React Native Academy · Leçon

Authentification par e-mail et OAuth

Authentification par e-mail et OAuth est une leçon React Native Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Native Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Native Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Authentication Options in Supabase

Supabase Auth supports multiple authentication strategies out of the box: email/password, magic link (passwordless email), OAuth providers (Google, Apple, GitHub, etc.), and phone OTP. All of these are accessible through the same supabase.auth API.

For React Native, the most common flows are email/password for simplicity and Google/Apple OAuth for a polished native experience. Supabase manages token storage, refresh, and expiry automatically when AsyncStorage is configured.

Sign Up with Email and Password

To register a new user, call supabase.auth.signUp with the email and password. Supabase creates the user in the auth.users table and sends a confirmation email. The returned data.session will be null until the user confirms their email, unless you disable email confirmation in the Supabase dashboard.

Always check for the error field in the response and display a meaningful message to the user if sign-up fails.

import { supabase } from '../lib/supabase';

async function signUp(email: string, password: string) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
  });

  if (error) {
    console.error('Sign up error:', error.message);
    return null;
  }

  // data.user is available; data.session may be null until email confirmed
  return data.user;
}

Sign In with Email and Password

For returning users, call supabase.auth.signInWithPassword. On success, Supabase returns a session with a JWT and a refresh token. With persistSession: true, the client saves this session to AsyncStorage automatically.

If the user enters the wrong credentials, the error will have a message like Invalid login credentials. Map this to a user-friendly message like Email or password is incorrect rather than exposing internal error text.

async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) {
    Alert.alert('Login Failed', 'Email or password is incorrect.');
    return;
  }

  // Session is saved automatically; navigate to main app
  console.log('Signed in as:', data.user?.email);
}

Sign Out

Signing out is straightforward: call supabase.auth.signOut(). This invalidates the session on the server, clears it from AsyncStorage, and triggers the SIGNED_OUT event in onAuthStateChange.

A good UX pattern is to navigate the user to the login screen inside the onAuthStateChange listener rather than directly after calling signOut, so that all parts of the app respond consistently to the auth state change regardless of where signOut is triggered from.

async function signOut() {
  const { error } = await supabase.auth.signOut();
  if (error) {
    console.error('Sign out error:', error.message);
  }
  // Navigation to login happens in onAuthStateChange listener
}

Building an Auth Screen Component

A typical auth screen holds email and password in component state, provides Sign In and Sign Up buttons, and displays a loading indicator while the async call is in progress. Keep the form simple: two TextInput components and two TouchableOpacity buttons are enough for a functional login screen.

Use the keyboardType='email-address' prop on the email field and secureTextEntry on the password field to improve the user experience on mobile keyboards.

import { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, ActivityIndicator } from 'react-native';
import { supabase } from '../lib/supabase';

export function AuthScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  async function handleSignIn() {
    setLoading(true);
    await supabase.auth.signInWithPassword({ email, password });
    setLoading(false);
  }

  return (
    <View>
      <TextInput value={email} onChangeText={setEmail} keyboardType='email-address' />
      <TextInput value={password} onChangeText={setPassword} secureTextEntry />
      {loading ? <ActivityIndicator /> : (
        <TouchableOpacity onPress={handleSignIn}>
          <Text>Sign In</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

OAuth with Google: Installing Dependencies

OAuth in React Native requires opening an external browser for the provider's consent screen and then capturing the redirect back to the app. The recommended approach with Expo uses expo-web-browser and expo-auth-session.

Install these packages with npx expo install expo-web-browser expo-auth-session. You must also configure a redirect URL that the browser can use to return control to your app after the user grants consent. In Expo, this URL looks like exp://your.project/--/auth/callback in development.

npx expo install expo-web-browser expo-auth-session

# In app.json, register a deep-link scheme:
# {
#   'expo': {
#     'scheme': 'myapp'
#   }
# }
#
# This makes the redirect URL:
# myapp://auth/callback

Performing the Google OAuth Flow

Call supabase.auth.signInWithOAuth to get the OAuth URL, then open it with WebBrowser.openAuthSessionAsync. When the browser redirects back to your app with the session tokens in the URL, extract them and call supabase.auth.setSession.

You must register your redirect URL in the Supabase dashboard under Authentication > URL Configuration > Redirect URLs and also configure your app's custom scheme so the OS routes the redirect back correctly.

import * as WebBrowser from 'expo-web-browser';
import * as Linking from 'expo-linking';
import { supabase } from '../lib/supabase';

async function signInWithGoogle() {
  const redirectUrl = Linking.createURL('/auth/callback');

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: { redirectTo: redirectUrl },
  });

  if (error || !data.url) return;

  const result = await WebBrowser.openAuthSessionAsync(data.url, redirectUrl);

  if (result.type === 'success') {
    const { url } = result;
    // Extract tokens from URL and set session
    const parsedUrl = new URL(url);
    const accessToken = parsedUrl.searchParams.get('access_token')!;
    const refreshToken = parsedUrl.searchParams.get('refresh_token')!;
    await supabase.auth.setSession({ access_token: accessToken, refresh_token: refreshToken });
  }
}

Getting the Current User

After sign-in, you can retrieve the currently authenticated user at any time by calling supabase.auth.getUser(). This validates the JWT with the Supabase server, making it more secure than reading the cached session.user object.

For performance-sensitive cases where you just need the user's ID, reading session?.user from supabase.auth.getSession() avoids a network round-trip. Use getUser() for security-sensitive operations and getSession() for display purposes.

// Secure: validates with Supabase server
async function getAuthenticatedUser() {
  const { data: { user }, error } = await supabase.auth.getUser();
  if (error) {
    console.error('Auth error:', error.message);
    return null;
  }
  return user; // { id, email, created_at, ... }
}

// Fast: reads from local cache
async function getUserFromSession() {
  const { data: { session } } = await supabase.auth.getSession();
  return session?.user ?? null;
}

Protecting Screens Based on Auth State

A clean pattern for protecting screens is to create a root navigator that watches the Supabase session and switches between an auth stack and a main app stack based on whether a session exists.

Place the onAuthStateChange listener in the root layout component. When the session is null, render the login screens; when a session is present, render the main app screens. React Navigation handles the transition automatically.

import { NavigationContainer } from '@react-navigation/native';
import { useSession } from '../hooks/useSession';

export function RootNavigator() {
  const session = useSession(); // custom hook using onAuthStateChange

  return (
    <NavigationContainer>
      {session ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
}

Password Reset Flow

Supabase provides a built-in password reset flow. Call supabase.auth.resetPasswordForEmail with the user's email address. Supabase sends an email with a magic link. When the user taps the link, they land on a reset password page where they can set a new password.

In a mobile deep-link setup, you configure the redirect URL to point back to your app, where you then call supabase.auth.updateUser({ password: newPassword }) after the user enters their new credentials.

// Step 1: Send password reset email
async function requestPasswordReset(email: string) {
  const { error } = await supabase.auth.resetPasswordForEmail(email, {
    redirectTo: 'myapp://auth/reset-password',
  });
  if (!error) {
    Alert.alert('Check your email', 'A password reset link has been sent.');
  }
}

// Step 2: After the user follows the link and is redirected to the app,
// update their password:
async function updatePassword(newPassword: string) {
  const { error } = await supabase.auth.updateUser({ password: newPassword });
  if (!error) {
    Alert.alert('Success', 'Your password has been updated.');
  }
}

Handling Auth Errors Gracefully

Always handle authentication errors in a user-friendly way. Common Supabase auth errors include:

Invalid login credentials — wrong email or password
User already registered — email is taken during sign-up
Email not confirmed — user signed up but has not confirmed their email yet

Map these technical messages to clear UI messages. Consider storing a authError string in state and displaying it beneath the form fields in a red Text component.

const ERROR_MESSAGES: Record<string, string> = {
  'Invalid login credentials': 'Email or password is incorrect.',
  'User already registered': 'This email is already in use.',
  'Email not confirmed': 'Please confirm your email before signing in.',
};

async function handleSignIn(email: string, password: string) {
  const { error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) {
    const friendlyMessage = ERROR_MESSAGES[error.message] ?? 'An error occurred. Try again.';
    setAuthError(friendlyMessage);
  }
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: how to implement email/password sign-up and sign-in, how to perform OAuth with Google using expo-web-browser, and how to protect navigation routes based on the Supabase auth session. Next up we explore querying the Supabase database from React Native components.

Questions Fréquemment Posées

La leçon « Authentification par e-mail et OAuth » est-elle gratuite ?

Oui — le texte complet de « Authentification par e-mail et OAuth » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Native Academy, passe à CoddyKit PRO. Le cours React Native Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Authentification par e-mail et OAuth » ?

Implémentez l'inscription et la connexion par e-mail et mot de passe, ajoutez l'authentification Google OAuth avec WebBrowser pour le flux de redirection, puis conservez la session entre les redémarr… Tu pratiques React Native Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Native Academy ?

Aucune expérience préalable n'est requise. React Native Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Authentification par e-mail et OAuth » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Native Academy ?

Oui. Chaque leçon React Native Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configurer le client Supabase dans React Native
Authentification par e-mail et OAuth
Interroger la base de données avec le client Supabase
Abonnements en temps réel

← Retour à React Native Academy