# Passwordless Sign-In in Expo with Supabase Email OTP Codes Passwords are friction on a phone. Typing one on a small keyboard is slow, people forget them, and password reset is its own flow to build. Magic links remove the password, but on mobile they bring a new problem: the link opens in an email app or browser and has to find its way back into your app through deep links and redirect URLs. A one-time code avoids both. The user types their email, gets a six-digit code, types it in, and they are signed in. No password, no redirect configuration, and it works the same in Expo Go, a development build and production. This guide builds that flow in an Expo app with Supabase Auth. ## Why choose an email code over a magic link on mobile? | | Magic link | Email OTP code | |---|---|---| | User action | Tap a link in the email | Type a 6-digit code | | Needs deep link / redirect setup | Yes | No | | Works if email is opened on another device | Not easily | Yes, just read the code | | Autofill support on iOS | No | Yes, with `oneTimeCode` | In Supabase these are the same feature underneath. As the [passwordless email docs](https://supabase.com/docs/guides/auth/auth-email-passwordless) explain, the difference is the email template: if it contains the `{{ .Token }}` variable, the user receives a code. ## Step 1: Change the email template to send a code In the Supabase dashboard, open **Authentication → Email Templates → Magic Link** and include the token: ```html

Your sign-in code

Enter this code in the app: {{ .Token }}

It expires in 1 hour. If you didn't request it, you can ignore this email.

``` According to Supabase's docs, the code is **six digits** and expires after **one hour** by default, and a user can request a new one **once every 60 seconds**. The expiry setting is shared with other email links such as password recovery, so change it with that in mind. ## Step 2: Set up custom SMTP before you test with real users This step is easy to miss. Supabase's [SMTP guide](https://supabase.com/docs/guides/auth/auth-smtp) says the built-in email service only delivers to addresses that are part of your project's team, is limited to a few messages per hour, and is best-effort only. Anyone outside your team gets "Email address not authorized". So for anything beyond testing with your own team, configure a custom SMTP provider under **Authentication → Emails → SMTP Settings**. ## Step 3: Send the code ```tsx import { supabase } from '@/lib/supabase'; export async function sendCode(email: string) { const { error } = await supabase.auth.signInWithOtp({ email: email.trim().toLowerCase(), options: { shouldCreateUser: true }, }); if (error) throw error; } ``` `shouldCreateUser` decides what happens for a new email address. Set it to `true` if sign-in and sign-up are the same screen, or `false` if only existing users may sign in. ## Step 4: Verify the code ```tsx export async function verifyCode(email: string, code: string) { const { data, error } = await supabase.auth.verifyOtp({ email: email.trim().toLowerCase(), token: code, type: 'email', }); if (error) throw error; return data.session; } ``` On success Supabase returns a session, and the client stores it like any other sign-in. ## Step 5: The screen A two-step screen keeps it simple: email first, then code. ```tsx import { useState } from 'react'; import { Button, Text, TextInput, View } from 'react-native'; export default function SignIn() { const [email, setEmail] = useState(''); const [code, setCode] = useState(''); const [step, setStep] = useState<'email' | 'code'>('email'); const [error, setError] = useState(null); async function onSend() { setError(null); try { await sendCode(email); setStep('code'); } catch (e: any) { setError(e.message); } } async function onVerify() { setError(null); try { await verifyCode(email, code); } catch (e: any) { setError('That code is wrong or has expired.'); } } return ( {step === 'email' ? ( <>