clerk/clerk-expo

Que fait clerk-expo ?

Implémentez l'authentification Clerk pour les applications Expo et React Native en utilisant les motifs guidés par source @clerk/expo. Utilisez pour AuthView/UserButton préconstruits ou des flux d'authentification personnalisés basés sur des hooks. Ne pas utiliser pour les projets natifs iOS/Swift, natifs Android/Kotlin, ou les framework web.

npx expo install @clerk/clerk-expo

import { ClerkProvider, SignedIn, SignedOut } from '@clerk/clerk-expo';
import { SafeAreaView, Text } from 'react-native';

export default function App() {
  return (
    <ClerkProvider publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
      <SafeAreaView>
        <SignedIn>
          <Text>Vous êtes connecté</Text>
        </SignedIn>
        <SignedOut>
          <Text>Vous n'êtes pas connecté</Text>
        </SignedOut>
      </SafeAreaView>
    </ClerkProvider>
  );
}

Authentification avec un hook personnalisé

import { useAuth, useUser } from '@clerk/clerk-expo';
import { Button, Text, View } from 'react-native';

export default function ProfileScreen() {
  const { isSignedIn, user } = useUser();
  const { signOut } = useAuth();

  if (!isSignedIn) {
    return <Text>Veuillez vous connecter</Text>;
  }

  return (
    <View>
      <Text>Bonjour, {user?.fullName}</Text>
      <Button title="Se déconnecter" onPress={() => signOut()} />
    </View>
  );
}

Écran de connexion

import { useSignIn } from '@clerk/clerk-expo';
import { Button, TextInput, View } from 'react-native';

export default function SignInScreen() {
  const { signIn, setActive, isLoaded } = useSignIn();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onSignInPress = async () => {
    if (!isLoaded) return;

    try {
      const completeSignIn = await signIn.create({
        identifier: email,
        password,
      });
      await setActive({ session: completeSignIn.createdSessionId });
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <View>
      <TextInput onChangeText={setEmail} placeholder="Email..." />
      <TextInput onChangeText={setPassword} placeholder="Mot de passe..." secureTextEntry />
      <Button title="Connexion" onPress={onSignInPress} />
    </View>
  );
}

Écran d'inscription

import { useSignUp } from '@clerk/clerk-expo';
import { Button, TextInput, View } from 'react-native';

export default function SignUpScreen() {
  const { signUp, setActive, isLoaded } = useSignUp();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onSignUpPress = async () => {
    if (!isLoaded) return;

    try {
      await signUp.create({ emailAddress: email, password });
      await setActive({ session: signUp.createdSessionId });
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <View>
      <TextInput onChangeText={setEmail} placeholder="Email..." />
      <TextInput onChangeText={setPassword} placeholder="Mot de passe..." secureTextEntry />
      <Button title="Inscription" onPress={onSignUpPress} />
    </View>
  );
}

Variables d'environnement

Créez un fichier .env à la racine de votre projet :

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=votre_clé_publiable_clerk_ici

Référez-vous à dashboard.clerk.com pour obtenir votre clé publiable.