Developer experience is one of the core tenants of Passage - we want developers to have a simple and delightful experience when implementing identity. At the same time, Passage is designed to handle biometric authentication across a varied landscape of devices, browsers, and operating systems. It can be difficult to fully exercise Passage’s multi-device environment when initial set up and testing is done on localhost. By using ngrok in combination with Passage, we get a few big wins for our users:

• As a developer integrating Passage, you can use ngrok to quickly see the value prop of Passage. You can run one of our example applications locally, but see the user login experience on your laptop, iPhone, and Windows tablet - all in just a few minutes.
• It is easier for our team to automate testing Passage authentication flows on a number of different devices. This ensures a more seamless transition from dev to prod and we get new features to production quicker, with fewer bugs!

How It Works

To demonstrate the power of using Passage and ngrok together, we are going to create an application that uses Passage for authentication and runs locally. We will then use Ngrok to test that application from different devices and quickly see how powerful Passage can be.

Creating an application with Passage

The easiest way to get started with Passage is using one of our example apps. You can find the full list of them on Github, but we will use the React example for this.

1. Clone our example React repository

2. Create an application in the Passage Console by logging in or creating an account at https://console.passage.id. Follow the steps to create an application with the following configuration:

• Application Name: React with Ngrok
• Authentication Origin: http://localhost:3000
• Redirect URL: /dashboard

3. Copy the App ID from the created app and put it in the .env of the app code.

‍

4. Install dependencies and run your application.

‍

You can visit http://localhost:3000 in your browser to see the application.

Running your application with ngrok

Next, set up ngrok to expose your application to the internet for easy testing.

1. Install ngrok

2. Start your application as above

‍

3. Launch ngrok to connect it to your application

‍

4. Copy the new https ngrok.io url into your browser. You will be prompted to sign up for an account.

5. Follow the instructions to sign up for a free account and copy your Auth Token

6. Return to your terminal and exit ngrok (Ctrl-c). Then run the following command to associate the auth token with your account.

‍

7. Re-run ngrok and copy the HTTPS ngrok.io url.

‍

8. In the Passage Console, change your authentication origin to the ngrok.io url.

Now visit that url in your browser and you should see your React app!

Thanks to ngrok, this application has HTTPS, which is required for biometric authentication to work. It also has a domain on the internet, so you can visit `https://<your-domain>.ngrok.io` from any device and see how authentication will work. To demonstrate the power of Passage + ngrok, you can create an account on a mobile device or log into the same account from different devices (this will require a magic link to verify you own the device).

‍