Sign In with a Magic Link

Learn about Magic Links

Magic Links are a type of passwordless login that allow users to sign in by clicking a link emailed to them, rather than typing a password.

Magic Links are disabled by default and can be enabled using the Nhost Dashboard under Settings -> Sign-In Methods -> Magic Link.

To sign in users with a Magic Link, use signInPasswordlessEmail with an email and a codeChallenge for PKCE:

import { generatePKCEPair } from '@nhost/nhost-js/auth';

const { verifier, challenge } = await generatePKCEPair();
localStorage.setItem('nhost_pkce_verifier', verifier);

await nhost.auth.signInPasswordlessEmail({
  email: 'joe@example.com',
  options: {
    redirectTo: `${window.location.origin}/verify`,
  },
  codeChallenge: challenge,
});

After the user clicks the magic link in their email, they’ll be redirected to your app with an authorization code. See Handling the Verification Redirect to exchange the code for a session.

sequenceDiagram
  autonumber
  actor U as User
  participant C as Client
  participant A as Nhost Auth
  participant E as SMTP Server
  C->>C: Generate PKCE pair (verifier + challenge)
  C->>C: Store verifier in localStorage
  U->>+A: POST /signin/passwordless/email
  Note right of U: email, codeChallenge
  opt No user found
    A->>A: Create user
  end
  A->>A: Generate ticket (stores codeChallenge)
  A-)E: Send magic link email
  A->>-U: OK
  E-)U: Receive email
  U->>+A: GET /verify (follow email link)
  A->>A: Verify email
  A->>A: Generate authorization code
  A->>-C: Redirect with ?code=...
  C->>C: Consume verifier from localStorage
  C->>+A: POST /token/exchange
  Note right of C: code + codeVerifier
  A->>A: Validate S256(codeVerifier) == codeChallenge
  A->>-C: Session (access + refresh tokens)

Sign In with a Magic Link

Sign In

Sign In Flow