Multi-Device Testing with ngrok

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

ngrok 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.

This guide assumes you've already created an application that uses Passage. If you haven't done that yet, check out our guide for Quickstart: Embedded Login.

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.

Ngrok Setup

Follow the instructions below to set up ngrok and use it to run your application. For this tutorial, we will assume you are using the React example app. If you are using a different one, just change the run commands.

Install ngrok (https://ngrok.com/download).

Install dependencies and run your application.

npm install
npm run start

Launch ngrok to connect it to your application.

ngrok http 3000

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

Follow the instructions to sign up for a free account and copy 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 url.

ngrok http 3000

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!

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

Last updated