Skip to content

Sign In with a Magic Link

Sign users in with passwordless magic links emailed to them, secured with PKCE and no password required.

magic link passwordless email login link authentication no password email sign in PKCE

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)