Expo React Native avec Apple Authentication et Supabase

Dans ce tutoriel, nous allons configurer une authentification avec Apple dans une application Expo React Native, tout en utilisant Supabase pour gérer l'authentification et les utilisateurs.

1. Créer un projet Supabase

Avant de commencer, crée un projet sur Supabase. Une fois ton projet créé, tu pourras lier ton application Expo à Supabase.

2. Créer une table users sur Supabase via SQL Editor

Dans Supabase, utilise l'éditeur SQL pour créer une table users et une fonction qui ajoutera un utilisateur à cette table lorsqu'il se connecte via Apple.

create table if not exists public.users (
  id uuid primary key references auth.users(id) on delete cascade,
  email text,
  created_at timestamp with time zone default timezone('utc'::text, now())
);

create or replace function public.handle_new_user()
returns trigger as $$
begin
  insert into public.users (id, email)
  values (new.id, new.email);
  return new;
end;
$$ language plpgsql security definer;

create trigger on_auth_user_created
after insert on auth.users
for each row
execute procedure public.handle_new_user();

Cette table contient l'ID utilisateur, l'email et la date de création. La fonction handle_new_user va automatiquement ajouter un utilisateur dans la table users lorsque ce dernier se connecte via Supabase.

3. Ajouter les dépendances nécessaires

Installe les bibliothèques nécessaires pour intégrer Supabase et l'authentification Apple dans ton application :

npx expo install @supabase/supabase-js expo-apple-authentication

4. Configurer les variables d'environnement

Ajoute tes clés Supabase dans le fichier .env de ton projet. Ces clés sont disponibles dans le tableau de bord Supabase, dans la section Connecting to your new project ⇒ Project API.

EXPO_PUBLIC_SUPABASE_URL=
EXPO_PUBLIC_SUPABASE_PUBLIC_KEY=

5. Créer un fichier supabase.ts

Dans le répertoire lib, crée un fichier supabase.ts et configure le client Supabase :

import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
    process.env.EXPO_PUBLIC_SUPABASE_URL!,
    process.env.EXPO_PUBLIC_SUPABASE_PUBLIC_KEY!
);

6. Relancer l'application

Après avoir ajouté les variables d'environnement, redémarre ton application pour que celles-ci soient correctement chargées :

npx expo start -c

7. Configurer l'authentification Apple sur Supabase

• Va dans la section Authentification de Supabase, puis dans Sign In / Up.

• Active Apple dans la section Auth Providers.

• Dans la partie Client IDs, si tu utilises Expo Go, ajoute host.exp.Exponent en développement. Sinon, ajoute ton bundleID Expo sous la forme com.app.name.

• Sauvegarde les modifications.

8. Importer AppleAuthentication dans ton fichier

Dans ton écran de connexion, importe AppleAuthentication :

import * as AppleAuthentication from 'expo-apple-authentication';

9. Créer la fonction signInApple

Crée une fonction signInApple qui sera appelée lors de la tentative de connexion via Apple :

const signInApple = async () => {
  try {
    const credential = await AppleAuthentication.signInAsync({
      requestedScopes: [
        AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
        AppleAuthentication.AppleAuthenticationScope.EMAIL,
      ],
    });

    console.log('[APPLE CREDENTIAL]: ', credential);

    if (credential.identityToken) {
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: credential.identityToken,
      });

      if (error) {
        console.log('Apple sign-in error: ', error);
        throw error;
      }

      if (data) {
        console.log('Apple sign-in success: ', data);
        return data;
      }
    }
  } catch (e: any) {
    if (e.code !== 'ERR_REQUEST_CANCELED') {
      console.log('Apple sign-in error: ', e);
      throw e;
    }
  }
};

10. Ajouter un bouton de connexion Apple

Ajoute un bouton dans ton interface pour appeler la fonction signInApple lorsque l'utilisateur clique dessus :

<Button title="Connexion Apple" onPress={signInApple} />

11. Vérifier dans Supabase

Enfin, vérifie dans ton tableau de bord Supabase que l'utilisateur est bien ajouté à la table users et que les redirections fonctionnent comme prévu après la connexion.