Multi-Device Testing with ngrok

Use ngrok to easily setup and test Passage’s cross-device authentication

Prerequisites

Passage account in the Passage Console

ngrok

ngrok (opens in a new tab) is a tool that allows you to serve local web applications over the internet in a single command. This guide walks through the setup and usage of ngrok for testing Passage across different devices.

Using ngrok lets you quickly see the value that Passage adds:

  • You can run one of our example applications locally and see the user login experience on your laptop, iPhone, and Windows tablet - all in just a few minutes.
  • Biometric authentication requires HTTPS in order to work on non-localhost domains. ngrok spins up a secure tunnel every time, so you can always use biometrics when testing in non-production environments.

Follow our example in the React example app to set up ngrok and use it to run your application.

Install ngrok

Install ngrok from https://ngrok.com/download (opens in a new tab).

Install dependencies

npm install
npm run start

Initialize

Launch ngrok to connect it to your application.

ngrok http 3000

Create a ngrok account

Copy the new https ngrok.io (opens in a new tab) url into your browser. You will be prompted to sign up for an account.

Create a free account on ngrok.comCreate a free account on ngrok.com

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

Copy your auth token from ngrok to use in your terminalCopy your auth token from ngrok to use in your terminal

Associate your auth token

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

ngrok --authtoken=<your_authtoken>

Re-run ngrok and copy the HTTTPS ngrok.io (opens in a new tab) url.

ngrok http 3000

In the Passage Console, change your authentication origin to the ngrok.io (opens in a new tab) url.

Passage settings

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

Passage React app with ngrok success example

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 biometrics 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).