Example React Native App with Passage Auth

🔑 The easiest way to get passkeys up and running for React Native

Passage and the Passage React Native SDK were built to make passkey authentication as fast, simple, and secure as possible. This example application is a great place to start. Before using Passage in your own React Native app, you can use this example app to:

• Plug in your own Passage app credentials to see passkeys in action
• Learn basic implementation of the Passage React Native SDK

A successful registration flow will look like this:

Requirements

• Android Studio Electric Eel or newer
• Xcode 14 or newer
• A Passage account and Passage app (you can register for a free account here)
• Completed setup of
  • Associated Domains file (iOS) (view instructions)
  • Asset Links file (Android) (view instructions)
  • Key hash registration (Android) (view instructions)

Installation

npm install
cd ios && pod install && cd ..

Configuration

To get this example React Native app working with your Passage account/app, you'll need to swap out the placeholder authentication origin with your own. Learn more about Passage auth origins here.

iOS

You'll need to open up Xcode and replace YOUR_AUTH_ORIGIN in the Associated Domains section.

Android

In the strings.xml file (found here) replace YOUR_AUTH_ORIGIN with your app’s Passage app id and auth origin, respectively.

<resources>
    <string name="app_name">ExampleReactNative</string>

    <!-- Required Passage app settings -->
    <string name="passage_auth_origin">YOUR_APP_ORIGIN</string>
    ...
</resources>

Final step

Lastly, replace YOUR_APP_ID in the PassageContext.tsx file here.

const passage = new Passage('YOUR_APP_ID');

🚀 Run the app!

npm run start

If all of the configuration was setup correctly, you should be able to run this application in the simulator or a real device!