Configurer la connexion Google avec Clerk sur Expo React Native

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

1. Créer un projet Clerk

Rends-toi sur Clerk et crée un projet.
Une fois ton projet créé, tu auras accès à ton API key et tes Publishable keys qui seront utilisées dans l’application Expo.

code

1EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=

2. Configurer Clerk

Dans le Clerk Dashboard, va dans Developers → Native applications.
Ajouter une applications : App ID (Team ID) et Bundle ID pour IOS et Namespace, Package name et SHA-256 certificate fingerprints pour Android utiliser la commande suivante pour obtenir le Bundle ID et Package name :

code

1npx expo prebuild

Puis le Allowlist for mobile SSO redirect dans votre app.json (scheme) pour la redirection :

code

1coderoetutoclerk://(public)

3. Ajouter les dépendances nécessaires

Installe Clerk pour Expo et React Native :

code

1npx expo install @clerk/clerk-expo expo-secure-store

4. Initialiser Clerk dans ton projet

Structure des dossiers

code

1├── app/
2│   ├── (private)      # Route connecté  
3│   │   └── _layout.tsx  
4│   │   └── index.tsx  
5│   ├── (public)       # Route non connecté
6│   │   └── _layout.tsx  
7│   │   └── index.tsx  
8│   └── _layout.tsx

Copié le code directement dans app/_layout.tsx :

code

1import { ClerkProvider, useUser } from "@clerk/clerk-expo";
2import { tokenCache } from "@clerk/clerk-expo/token-cache";
3import { Stack } from "expo-router";
4 
5const RootLayout = () => {
6  const { isSignedIn } = useUser();
7 
8  console.log(isSignedIn, "isSignedIn");
9 
10  if (isSignedIn === undefined) {
11    return null;
12  }
13 
14  return (
15    <Stack>
16      <Stack.Protected guard={!isSignedIn}>
17        <Stack.Screen name="(public)" options={{ headerShown: false }} />
18      </Stack.Protected>
19 
20      <Stack.Protected guard={isSignedIn}>
21        <Stack.Screen name="(private)" options={{ headerShown: false }} />
22      </Stack.Protected>
23    </Stack>
24  );
25};
26 
27export default function Layout() {
28  return (
29    <ClerkProvider tokenCache={tokenCache}>
30      <RootLayout />
31    </ClerkProvider>
32  );
33}

Copié le code directement dans app/(public)/_layout.tsx et app/(private)/_layout.tsx :

code

1import { Stack } from 'expo-router/stack'
2 
3export default function Layout() {
4  return <Stack />
5}

Copié le code directement dans app/(public)/index.tsx :

code

1import * as React from "react";
2import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
3import { isClerkAPIResponseError, useSSO } from "@clerk/clerk-expo";
4import * as AuthSession from "expo-auth-session";
5 
6export default function SignUpScreen() {
7  const { startSSOFlow } = useSSO();
8 
9  const onSignInWithGoogle = async () => {
10    try {
11      const { createdSessionId, setActive } = await startSSOFlow({
12        strategy: "oauth_google",
13        redirectUrl: AuthSession.makeRedirectUri(),
14      });
15 
16      if (createdSessionId) {
17        setActive!({ session: createdSessionId });
18      } else {
19        // Error
20      }
21    } catch (error) {
22      if (isClerkAPIResponseError(error)) {
23        console.error(error.errors);
24      } else {
25        console.error(error);
26      }
27    }
28  };
29 
30  return (
31    <View style={styles.container}>
32      <TouchableOpacity style={styles.button} onPress={onSignInWithGoogle}>
33        <Text>Sign in with Google</Text>
34      </TouchableOpacity>
35    </View>
36  );
37}
38 
39const styles = StyleSheet.create({
40  container: {
41    flex: 1,
42    alignItems: "center",
43    justifyContent: "center",
44    padding: 20,
45  },
46  button: {
47    padding: 10,
48    borderRadius: 10,
49    alignItems: "center",
50    justifyContent: "center",
51    borderWidth: 1,
52    borderColor: "#0000001A",
53    width: "100%",
54    height: 50,
55  },
56});

Copié le code directement dans app/(private)/index.tsx :

code

1import { useUser } from '@clerk/clerk-expo'
2import { StyleSheet, Text, View } from 'react-native'
3import { SignOutButton } from '@/components/SignOutButton'
4 
5export default function Page() {
6 const { user } = useUser()
7 
8 return (
9   <View style={styles.container}>
10       <Text>Hello {user?.emailAddresses[0].emailAddress}</Text>
11       <Text>Tutorial by @coderoe</Text>
12       <SignOutButton />
13   </View>
14 )
15}
16 
17const styles = StyleSheet.create({
18 container: {
19   flex: 1,
20   alignItems: 'center',
21   justifyContent: 'center',
22 },
23});

5. Créer un composant bouton de déconnexion

Crée un fichier SignOutButton.tsx :

code

1import { useClerk } from '@clerk/clerk-expo'
2import * as Linking from 'expo-linking'
3import { Text, TouchableOpacity } from 'react-native'
4 
5export const SignOutButton = () => {
6  const { signOut } = useClerk()
7  const handleSignOut = async () => {
8    try {
9      await signOut()
10      Linking.openURL(Linking.createURL('/'))
11    } catch (err) {
12      console.error(JSON.stringify(err, null, 2))
13    }
14  }
15  return (
16    <TouchableOpacity onPress={handleSignOut}>
17      <Text>Sign out</Text>
18    </TouchableOpacity>
19  )
20}

6. Tester la connexion Google

Lance ton projet avec :

code

1npx expo start

Puis clique sur le bouton Se connecter avec Google. Tu devrais être redirigé vers le flux OAuth Google géré par Clerk.

Vérifier dans le dashboard Clerk

Retourne dans ton Clerk Dashboard → Users et tu verras ton utilisateur ajouté automatiquement après authentification réussie.

Configurer la connexion Google avec Clerk sur Expo React Native

1. Créer un projet Clerk

2. Configurer Clerk

3. Ajouter les dépendances nécessaires

4. Initialiser Clerk dans ton projet

5. Créer un composant bouton de déconnexion

6. Tester la connexion Google

Articles recommandés

Configurer la connexion Apple avec Supabase sur Expo React Native

Comment configurer Appwrite sur Expo React Native

Configurer la traduction avec expo-localization dans Expo