Skip to main content

Deep link for password reset

To create a new password user needs a token. The token can be sent via the deep link that opens the Create New Password scene with proper params.

To change deep linking config edit the src/navigators/deepLinking.ts file.

How to change deep linking prefix?​

Use platform-specific instructions from below. If something is unclear you can always check full docs from React Navigation

Deep linking prefix on iOS​

The easiest way to do this is with the uri-scheme package:

npx uri-scheme remove prf --ios.
npx uri-scheme add yourPrefix --ios.

If you decide to do it manually:

Open ios/ProductionReadyForms/Info.plist and find CFBundleURLSchemes record. Now change:

<key>CFBundleURLSchemes</key>
<array>
  <string>prf</string>
</array>

to

<key>CFBundleURLSchemes</key>
<array>
  <string>yourPrefix</string>
</array>

Deep linking prefix on Android​

The easiest way to do this is with the uri-scheme package:

npx uri-scheme remove prf --ios.
npx uri-scheme add yourPrefix --ios.

If you decide to do it manually: Open android/app/src/main/AndroidManifest.xml and find below line:

<data android:scheme="prf"/>

Then change it to:

<data android:scheme="yourPrefix"/>
info

When testing on Android you have to escape ampersand characters like this:

prf://default?mode=resetPassword\&oobCode=CODE\&apiKey=API

How to test deep linking?​

If you want to test real-case scenario using Firebase:

  • enter the Login screen
  • press Remind Password button
  • enter existing Email address
  • you will receive an email with the deep link to Create New Password scene
  • click in the deep link or copy it and paste to Safari address bar on iOS emulator (the app will open on Reset Password scene)
  • create a new password
  • login in using the new password

Press the deep link for tests if you'd like to open Create New Password scene from the browser without configuring Firebase. (You have to do it from the phone/simulator with the app installed & `prf`` as a prefix is unchanged)

caution

Gmail removes deep link URLs so the user needs to copy & paste the link in the browser (works only on iOS). It would be better to configure universal linking but it requires an additional web server for custom email action handlers. With universal linking, even GMail would work as expected.

Here is the Firebase Password reset template to highlight the copy & paste requirement. To change this enter Firebase Console/Authentication/Templates/Password reset and edit the Message field.

<p>Hello,</p>
<p>
  Follow this link to reset your %APP_NAME% password for your %EMAIL% account.
</p>
<h2>Click in the link below or copy it to your browser</h2>
<p style="background-color:#DDD;  padding: 10px;">
  <a href="%LINK%">
    <code>%LINK%</code>
  </a>
</p>

<p>If you didn’t ask to reset your password, you can ignore this email.</p>
<p>Thanks,</p>
<p>Your %APP_NAME% team</p>

On iOS, there are several ways to test deep links. You can either:

  1. paste deep link into Safari address bar,
  2. use npx uri-scheme open [ URI prefix ] --ios command,
  3. use xcrun simctl openurl booted [ URI prefix ] command.
iOS open deep link example
npx uri-scheme open "prf://default?mode=resetPassword&oobCode=CODE&apiKey=API" --ios

Find detailed description on React Navigation docs

info

When testing on Android you have to escape ampersand characters with a backslash like this:

prf://default?mode=resetPassword\&oobCode=CODE\&apiKey=API

Simply replace each & character with \&.

On Android you can either:

  1. use npx uri-scheme open [ URI prefix ] --android command,
  2. use adb shell am start -W -a android.intent.action.VIEW -d "[ URI prefix ]" com.productionreadyforms command (adjust bundle ID com.productionreadyforms to your real one).
Android open escaped deep link example
npx uri-scheme open "prf://default?mode=resetPassword\&oobCode=CODE\&apiKey=API" --android

Unfortunately, I don't think it is possible to open the deep link on Android from the browser's address bar. Thus for the production app, you have to configure proper deep linking server (not a scope of this project).

Find detailed deep links description on React Navigation docs