Walkthrough

Auth with Supabase

Email + magic link + OAuth, all in under an hour.

Supabase gives you auth, a Postgres database, and storage with one signup. For mobile it pairs cleanly with Expo: there's an auth helper, OAuth deep-links work out of the box, and the JS client runs in React Native unchanged.

Steps · 0 / 4 done

Create the project + get keys
Spin up a Supabase project. Grab SUPABASE_URL and the anon key.
```
# .env.local
EXPO_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=ey...
```
VerifyEnv vars present and accessible via process.env.EXPO_PUBLIC_*.
Install + initialize the client
One client, exported from a module so every screen imports the same instance.
```
npx expo install @supabase/supabase-js @react-native-async-storage/async-storage
```
VerifyBoth packages installed.

Wire the auth provider

Wrap the root layout in an AuthProvider that listens to onAuthStateChange and exposes user.

// lib/auth.tsx
import { createClient } from '@supabase/supabase-js';
import AsyncStorage from '@react-native-async-storage/async-storage';
export const supabase = createClient(
  process.env.EXPO_PUBLIC_SUPABASE_URL!,
  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!,
  { auth: { storage: AsyncStorage, autoRefreshToken: true, persistSession: true } }
);

VerifySessions persist; you stay logged in across reloads.

Sign-in screen
Email magic link is the friendliest first auth method. Send the link; user taps; deep link returns to the app.
```
const { error } = await supabase.auth.signInWithOtp({
  email,
  options: { emailRedirectTo: 'tipjar://auth-callback' }
});
```
VerifyEmail arrives. Tapping the link opens the app and creates a session.

Check your understanding

Q1. Why pass AsyncStorage as the storage option to the Supabase client?

· Tick off the 4 step(s) above.

· Score 100% on the quiz.

Auth with Supabase

Create the project + get keys

Install + initialize the client

Wire the auth provider

Sign-in screen