Learn how to build a user authentication flow with Expo (React Native) by integrating Logto SDK.
In this tutorial, we will show you how to build a user authentication flow with Expo (React Native) by integrating Logto SDK. The tutorial uses TypeScript as the programming language.
Before you begin, ensure you have the following:
To get started, create a Logto application with the "Native" type. Follow these steps to create a Logto application:
Then you should see an interactive guide that guides you through the process of integrating Logto SDK with your Expo (React Native) application. The following content can be a reference for future use.
Install Logto SDK and peer dependencies via your favorite package manager:
The @logto/rn package is the SDK for Logto. The remaining packages are its peer dependencies. They couldn't be listed as direct dependencies because the Expo CLI requires that all dependencies for native modules be installed directly within the root project's package.json.
Import and use LogtoProvider to provide a Logto context:
Switch to the application details page of Logto Console. Add a native redirect URI (for example, io.logto://callback), then click "Save".
For iOS, the redirect URI scheme does not really matter since the ASWebAuthenticationSession class will listen to the redirect URI regardless of if it's registered.
For Android, the redirect URI scheme must be filled in Expo's app.json file, for example:
Now back to your app, you can use useLogto hook to sign in and sign out:
To display the user's information, you can use the getIdTokenClaims() method:
Now you can run the application and try to sign-in/sign-out with Logto:
If you encounter any issues during the integration, please don't hesitate to join our Discord server to chat with the community and the Logto team!