Lesson 10 / 25

Email, Password and Magic Links

The basic sign-in flows.

Sessions are JWTs

auth.signUp creates a user (by default an email confirmation may be required, configurable per project). auth.signInWithPassword returns a session containing a short-lived access token (a JWT) and a refresh token; supabase-js stores them and refreshes automatically. auth.signInWithOtp sends a magic link or one-time code for passwordless sign-in. auth.getUser() asks the Auth server to verify the current user, and onAuthStateChange notifies your UI about sign-in, sign-out and token refresh.

Who is making the request

Supabase Auth signs users in, issues JWTs and keeps sessions fresh on client and server.

Three ideas: passwords and magic links, OAuth, server-side sessions.
Figure 4.1 — Sign-in, session tokens, requests checked by RLS.

Sign up, sign in, listen

supabase-js v2.

await supabase.auth.signUp({ email: 'asha@example.com', password: 'a-long-passphrase' })

const { data, error } = await supabase.auth.signInWithPassword({
  email: 'asha@example.com',
  password: 'a-long-passphrase',
})

// passwordless magic link
await supabase.auth.signInWithOtp({
  email: 'asha@example.com',
  options: { emailRedirectTo: 'https://app.example.com/welcome' },
})

supabase.auth.onAuthStateChange((event, session) => {
  console.log(event, session?.user.id)
})

await supabase.auth.signOut()

A day pass and a membership card

The access token is a day pass that expires quickly; the refresh token is the membership card you show to get a new pass without logging in again.

Quick check: What does signInWithOtp provide?

  • Passwordless sign-in via a magic link or one-time code
  • Sign-in with Google only
  • A permanent API key
  • Admin access to the database
Answer

Passwordless sign-in via a magic link or one-time code — OTP = one-time password.