English

react
react-native
expo
tutorial
auth
authentication
oauth
oidc
identity

Build Expo (React Native) authentication with Logto

Learn how to build a user authentication flow with Expo (React Native) by integrating Logto SDK.

Gao

Founder

2/28/20242 min read

Stop wasting weeks on user auth

Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.

Get started

Get started

Introduction

Logto is an open-source Auth0 alternative for building identity infrastructures. It supports various sign-in methods, including username, email, phone number, and popular social sign-ins like Google and GitHub.
Expo (React Native) is an ecosystem of tools that help you create universal native apps with React that run on Android, iOS, and the web.

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.

Prerequisites

Before you begin, ensure you have the following:

A Logto account. If you don't have one, you can sign up for free.
An Expo (React Native) development environment and a project.

Create a Logto application

To get started, create a Logto application with the "Native" type. Follow these steps to create a Logto application:

Sign in to the Logto Console.
In the left navigation bar, click on Applications.
Click on Create application.
In the opened page, find the "Native" section and locate the "Expo (React Native)" card.
Click on Start building, and input the name of your application.
Click on Create.

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.

Try Logto Cloud's interactive guide

Integrate with Logto SDK

Installation

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.

Init Logto provider

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:

Display user information

To display the user's information, you can use the getIdTokenClaims() method:

Checkpoint: Run the application

Now you can run the application and try to sign-in/sign-out with Logto:

Open the application in your browser, you should see the "Sign in" button.
Click the "Sign in" button, and you should be redirected to the Logto sign-in page.
After you have signed in, you should be redirected back to the application, and you should see the user data and the "Sign out" button.
Click the "Sign out" button, and you should be redirected to the Logto sign-out page, and then redirected back to the application with an unsigned-in state.

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!

Build Expo (React Native) authentication with Logto

Get started

Introduction

Prerequisites

Create a Logto application

Integrate with Logto SDK

Installation

Init Logto provider

Display user information

Checkpoint: Run the application

Further readings

Get started

Introduction

Prerequisites

Create a Logto application

Integrate with Logto SDK

Installation

Init Logto provider

Display user information

Checkpoint: Run the application

Further readings

Get started#

Introduction

Prerequisites

Create a Logto application

Integrate with Logto SDK#

Installation#

Init Logto provider#

Implement sign-in and sign-out#

Display user information#

Checkpoint: Run the application#

Further readings#

Get started#

Introduction

Prerequisites

Create a Logto application

Integrate with Logto SDK#

Installation#

Init Logto provider#

Implement sign-in and sign-out#

Display user information#

Checkpoint: Run the application#

Further readings#

Get started

Integrate with Logto SDK

Installation

Init Logto provider

Implement sign-in and sign-out

Display user information

Checkpoint: Run the application

Further readings

Get started

Integrate with Logto SDK

Installation

Init Logto provider

Implement sign-in and sign-out

Display user information

Checkpoint: Run the application

Further readings