React Native Quickstart
This guide will only include the frontend integration. If you would like to also handle Session Management in your backend, select your backend technology below:
This is a quickstart guide to help you integrate Descope with your React Native application. Follow the steps below to get started.
You can also refer our React Native Sample App for a complete implementation of Native Flows with Descope.
Expo support
Expo is supported; however, to use the React Native SDK, you need a custom development build. Refer to our example repo for a working example.
Expo Go is a pre-built app and cannot load the native modules from this SDK. If you use Expo Go, you can still integrate Descope using the Expo OIDC approach instead of this SDK.
Include the Descope React Native Package
Incorporate the Descope React Native SDK as a package. Run the following command:
npm i --save @descope/react-native-sdkyarn add @descope/react-native-sdkpnpm add @descope/react-native-sdkbun i @descope/react-native-sdkImport the React Native SDK
Proceed to import the Descope React Native package.
import { useCallback } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { AuthProvider, useFlow, useDescope, useSession } from '@descope/react-native-sdk' // <-- Import the Descope React Native SDK
export default function App() {
// ...
}Initialize Descope with a Custom Project ID
Wrap your app with the Auth Provider and pass in the Descope Project ID (found on your Descope project page). This is needed to activate the SDK.
Note
Optionally, add the baseUrl parameter if using a custom domain in your Descope project (ex: https://auth.company.com).
export default function App() {
return (
<AuthProvider projectId="__ProjectID__"> {/* <-- Add your Descope Project ID */}
{/* ... */}
</AuthProvider>
);
}Define and Host Your Flow
Your Descope console provides customizable, predefined authentication flows which are hosted for you. You can also host the flow yourself. You'll use the url of the hosted flow later in your code.
export default function App() {
const flow = useFlow()
const startFlow = async () => {
try {
const resp = await flow.start('https://auth.descope.io/login/__ProjectID__', '<URL_FOR_APP_LINK>')
await manageSession(resp.data)
} catch (e) {
// handle errors
}
}
return (
<AuthProvider projectId="__ProjectID__">
{/* ... */}
</AuthProvider>
);
}(Android Only) Configure App Links, Activity, and Linking
For Android (iOS works with just a flow url), follow the instructions in our README to establish App Links, create an activity, and handle token exchange.
Launch Your Flow
Use the flow 'start' function to initiate authentication with a custom flow (URL from step 6). For Android, add the deep link (URL from step 7).
Note
If you need to support Magic Link redirects, follow the steps in our README.
Leverage React Native SDK's Hooks and Session Management Functions
Descope provides many different hooks to check if the user is authenticated, session is loading etc. You can use these to customize the user experience:
useSession- This is used for implementing loading screens while sessions are being established (checksession), getting user information (session.user.name), etc.useDescope- Exposes the Descope SDK to your app for additional customization (e.g.,descope.logout()).useFlow- Used for handling flow related events (e.g.,flow.start()).
For more specifics on implementing Session Management, check out our Mobile Session Validation page.
For backend Session Validation, continue reading!
export default function App() {
const flow = useFlow()
const { session, clearSession, manageSession } = useSession()
const { logout } = useDescope()
const handleLogout = useCallback(() => {
logout()
}, [logout])
const startFlow = async () => {
try {
const resp = await flow.start('https://auth.descope.io/login/__ProjectID__', '<URL_FOR_APP_LINK>')
await manageSession(resp.data)
} catch (e) {
// handle errors
}
}
const exampleFetch = async () => {
const res = await fetch('/path/to/server/api', {
headers: {
Authorization: `Bearer ${session.sessionJwt}`,
},
})
}
return (
<AuthProvider projectId="__ProjectID__">
{session ? (
<View style={styles.container}>
<Text>Welcome! {session.user.name}</Text>
<Button onPress={handleLogout} title="Logout" />
</View>
) : (
<View style={styles.container}>
<Text>Welcome!</Text>
<Button onPress={startFlow} title="Start Flow" />
</View>
)}
</AuthProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});At this point, you're done with the frontend. If you would like to also handle Session Management in your backend, keep on reading!
Continue with Backend SDK
If you would like to also handle Session Management in your backend, keep on reading by selecting your backend technology below:
Checkpoint
Your application is now integrated with Descope. Please test with sign-up or sign-in use case.
Customize
Now that you have the end-to-end application working, you can choose to configure and personalize many different areas of Descope, including your brand, style, custom user authentication journeys, etc. We recommend starting with customizing your user-facing screens, such as signup and login.