Magic Link Login & Signup Component - PropelAuth Docs

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.

passwordlessLogin

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

{}