Magic Link Login & Signup Component

PropelAuth's Magic Link Login & Signup component allows you to customize the your login and signup pages with passwordless login. It is designed to be used when your user has a Login State of LOGIN_REQUIRED.

We highly recommend reviewing the Login and Signup Guide if using any of our login or signup components.

Login or Signup With Magic Link

Shadcn Installation

Install this component from our shadcn registry.

npx shadcn@latest add https://components.propelauth.com/r/magic-link-login.json

Reference APIs

These are the APIs that are used by the above component. You can use these APIs directly in your own code.

Sends a magic link to the user's email address to log them in.

Arguments

Name
email *
Type
string
Description
The email of the user to send a magic link to.
Name
create_if_doesnt_exist *
Type
boolean
Description
If set to true, a new user will be created if the email is not associated with an existing user.

Response Functions

The response object has a handle function that you can use to handle the response. These functions can be async, and you can return values from them.

Name
success
Description
Successful request.
Name
passwordlessLoginDisabled
Description
Passwordless login is disabled in the PropelAuth Dashboard.
Name
userAccountDisabled
Description
User cannot login due to their account being disabled.
Name
userAccountLocked
Description
User cannot login due to their account being locked.
Name
cannotSignupWithPersonalEmail
Description
Personal email domains are disabled in the PropelAuth Dashboard.
Name
domainNotAllowed
Description
The email domain is blocked in the PropelAuth Dashboard.
Name
badRequest
Description
Incorrect arguments provided.
Name
unexpectedOrUnhandled
Description
An unexpected error occurred.

Request

const { passwordlessLogin } = useAuthFrontendApis()

const response = await passwordlessLogin({
    email: "test@example.com",
    create_if_doesnt_exist: false
})
response.handle({
    success() {
        console.log('Magic link sent')
    },
    userAccountDisabled(error) {
        console.error('User account disabled', error.user_facing_error)
    },
    userAccountLocked(error) {
        console.error('User account locked', error.user_facing_error)
    },
    passwordlessLoginDisabled(error) {
        console.error('Passwordless login disabled', error.user_facing_error)
    },
    cannotSignupWithPersonalEmail(error) {
        console.error('Cannot signup with personal email', error.user_facing_error)
    },
    domainNotAllowed(error) {
        console.error('Domain not allowed', error.user_facing_error)
    },
    badRequest(error) {
        for (const [field, fieldErrorMessage] of Object.entries(error.user_facing_errors)) {
            console.log('Error: "' + fieldErrorMessage + '" for field: "' + field + '"')
        }
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled', error.user_facing_error)
    },
})

Successful Response

{}