How to handle deep linking to reset a password with Expo and React Navigation 5

Even with the growing use of password managers today, forgetting a password still happens.

A lot. If you let your users create an account with some kind of email/password combination,

you have to let them change their password in case they forgot.How this usually works is :

1. Your user requests a reset password email.

2. An email containing a link is sent from your server.

3. User clicks on the link inside the email, which will get them inside your app to a reset password page.

4. This reset password page gets information from the link (like email and reset password token).

5. User enters new password.

6. App makes the call to your API with the info from the link together with the new password.

In this tutorial we will focus on the front-end part (you should already have a back-end route to change a password, as well as one to request the reset password email), and use Expo and React-Navigation 5 (which came out of beta yesterday 🚀

A deep link works by providing a unique identifier to your app, which is called a scheme, then using it like so : “appname://path”.

First, the easy part! Let’s set the scheme, the “appname://” part. Just go to app.json and add the following line for the expo key, replacing appname by the scheme you’d like for your app :

{ 
  "expo": {
    "scheme": "appname",
  }
}

Now let’s take care of the navigation part. No matter if the app is closed or foregrounded, you want your users to land on the password reset page when they click on your link.

What’s happening here ?

1. We use expo Linking API to grab the actual scheme from our app at run time, that will enable us to test easily on simulator as this is not the same scheme when running on expo than when the app is actually built.

2. We use react navigation helpers to convert the deep link the user just clicked into an actual navigation action.

3. We tell it line 12 to match the first part of the path “resetPassword” to the actual screen ResetPassword in our navigator.

4. Then we specify the params like so /:email/:code, that will be parsed from the URL and sent to the route we navigate to as params.

Next up is creating our ResetPassword screen :

The only thing our user will have to provide there is the new password as his email and token were encoded in the deep link, then parsed and provided as params to the route.

Testing :

When you’re ready run :

xcrun simctl openurl booted exp://127.0.0.1:19000/--/resetPassword/your@testemail.com/testToken

This will open the deep link on the simulator. Good luck!