# 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](https://docs.propelauth.com/overview/authentication/login-methods#passwordless-magic-links). It is designed to be used when your user has a [Login State](https://ui.propelauth.com/login-signup-apis#login-state) of `LOGIN_REQUIRED`.

We highly recommend reviewing the [Login and Signup Guide](https://ui.propelauth.com/login-signup-apis) if using any of our login or signup components.

## Login or Signup With Magic Link

Email

Login

---

## [Shadcn Installation](https://ui.propelauth.com/login-signup-apis/magic-link-login-signup#shadcn-installation)

Install this component from our [shadcn registry](https://ui.propelauth.com/getting-started/component-registry).

```bash
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](https://ui.propelauth.com/login-signup-apis/magic-link-login-signup#passwordless-login)

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

```javascript
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

```json
{}
```