### Install @clerk/clerk-expo Once you have a Expo application ready, you need to install Clerk's Expo SDK. ```bash npm install @clerk/clerk-expo ``` ### Mount `` Clerk requires your Expo application to be wrapped in the `` component. The `` component provides active session and user context to Clerk's hooks and other components. The `CLERK_PUBLISHABLE_KEY` can be obtained from the API Keys page in the [Clerk dashboard](https://dashboard.clerk.dev). ```tsx import React from "react"; import { SafeAreaView, Text, StyleSheet } from "react-native"; import { ClerkProvider } from "@clerk/clerk-expo"; const CLERK_PUBLISHABLE_KEY = "pk_test_••••••••••••••••••••••••••••••••••" export default function App() { return ( Hello world! ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, }); ``` ### Protecting Your Pages Clerk offers Control Components that allow you to protect your pages. In the example below we are using [``](https://clerk.com/docs/component-reference/signed-in) and [``](https://clerk.com/docs/component-reference/signed-out) control components. ```tsx import React from "react"; import { SafeAreaView, Text, StyleSheet } from "react-native"; import { ClerkProvider, SignedIn, SignedOut } from "@clerk/clerk-expo"; const CLERK_PUBLISHABLE_KEY = "pk_test_••••••••••••••••••••••••••••••••••" export default function App() { return ( You are Signed in You are Signed out ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, }); ``` Using expo requires you to create custom flows in our quickstart guide, we are going to show you how to create a sign in and sign up flow using the `useSignIn` and `useSignUp` hooks. The following flows are built on the default instance settings for Clerk. If you have changed your instance settings, you may need to make changes to the following code. ### Build Your Sign Up The examples below use email and password to sign a user up. You will notice that we have a conditional flow in the sign up page for verifying a code called `pendingVerification`, this is an important step as it verifies the user owns their email. ```tsx import * as React from "react"; import { Text, TextInput, TouchableOpacity, View } from "react-native"; import { useSignUp } from "@clerk/clerk-expo"; export default function SignUpScreen() { const { isLoaded, signUp, setActive } = useSignUp(); const [emailAddress, setEmailAddress] = React.useState(""); const [password, setPassword] = React.useState(""); const [pendingVerification, setPendingVerification] = React.useState(false); const [code, setCode] = React.useState(""); // start the sign up process. const onSignUpPress = async () => { if (!isLoaded) { return; } try { await signUp.create({ emailAddress, password, }); // send the email. await signUp.prepareEmailAddressVerification({ strategy: "email_code" }); // change the UI to our pending section. setPendingVerification(true); } catch (err: any) { console.error(JSON.stringify(err, null, 2)); } }; // This verifies the user using email code that is delivered. const onPressVerify = async () => { if (!isLoaded) { return; } try { const completeSignUp = await signUp.attemptEmailAddressVerification({ code, }); await setActive({ session: completeSignUp.createdSessionId }); } catch (err: any) { console.error(JSON.stringify(err, null, 2)); } }; return ( {!pendingVerification && ( setEmailAddress(email)} /> setPassword(password)} /> Sign up )} {pendingVerification && ( setCode(code)} /> Verify Email )} ); } ``` Now would be good a time to test your sign up flow. Make sure you update your `app` file to use the component that you have created, to keep it simple we will add the `SignUpScreen` to the `SignedOut` component. ```tsx import React from "react"; import { SafeAreaView, Text, StyleSheet } from "react-native"; import { ClerkProvider, SignedIn, SignedOut } from "@clerk/clerk-expo"; import SignUpScreen from "./components/SignUpScreen"; const CLERK_PUBLISHABLE_KEY = "pk_test_••••••••••••••••••••••••••••••••••"; export default function App() { return ( You are Signed in ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, }); ``` ### Build Your Sign In ```tsx import React from "react"; import { Text, TextInput, TouchableOpacity, View } from "react-native"; import { useSignIn } from "@clerk/clerk-expo"; export default function SignInScreen() { const { signIn, setActive, isLoaded } = useSignIn(); const [emailAddress, setEmailAddress] = React.useState(""); const [password, setPassword] = React.useState(""); const onSignInPress = async () => { if (!isLoaded) { return; } try { const completeSignIn = await signIn.create({ identifier: emailAddress, password, }); // This is an important step, // This indicates the user is signed in await setActive({ session: completeSignIn.createdSessionId }); } catch (err: any) { console.log(err); } }; return ( setEmailAddress(emailAddress)} /> setPassword(password)} /> Sign in ); } ``` Now would be good a time to test your sign in flow. Restart your server to remove the session. Make sure you update your `app` file to use the component that you have created, replace the `SignUpScreen` with the `SignInScreen` to the `SignedOut` component. ```tsx import React from "react"; import { SafeAreaView, Text, StyleSheet } from "react-native"; import { ClerkProvider, SignedIn, SignedOut } from "@clerk/clerk-expo"; import SignInScreen from "./components/SignInScreen"; const CLERK_PUBLISHABLE_KEY = "pk_test_••••••••••••••••••••••••••••••••••"; export default function App() { return ( You are Signed in ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, }); ``` ### OAuth Login If you want to add OAuth login flows to you Expo application, in most cases you want to be able to handle both sign in and sign up in a single flow. With Clerk we make this possible with our OAuth hook. ```tsx import React from "react"; import * as WebBrowser from "expo-web-browser"; export const useWarmUpBrowser = () => { React.useEffect(() => { void WebBrowser.warmUpAsync(); return () => { void WebBrowser.coolDownAsync(); }; }, []); }; ``` ```tsx import React from "react"; import * as WebBrowser from "expo-web-browser"; import { Button } from "react-native"; import { useOAuth } from "@clerk/clerk-expo"; import { useWarmUpBrowser } from "../hooks/useWarmUpBrowser"; WebBrowser.maybeCompleteAuthSession(); const SignInWithOAuth = () => { useWarmUpBrowser(); const { startOAuthFlow } = useOAuth({ strategy: "oauth_google" }); const onPress = React.useCallback(async () => { try { const { createdSessionId, signIn, signUp, setActive } = await startOAuthFlow(); if (createdSessionId) { setActive({ session: createdSessionId }); } else { // Use signIn or signUp for next steps such as MFA } } catch (err) { console.error("OAuth error", err); } }, []); return (

Clerk Expo

Integrate Clerk into your React Native application