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.com](/_next/image?url=%2Fimages%2Fv1-doc-images%2Fngrok-create-account.png&w=3840&q=75)
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 terminal](/_next/image?url=%2Fimages%2Fv1-doc-images%2Fngrok-copy-auth-token.png&w=3840&q=75)
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](/_next/image?url=%2Fimages%2Fv1-doc-images%2Fngrok-passage-settings-old.png&w=3840&q=75)
Now visit that url in your browser and you should see your React app!
![Passage React app with ngrok success example](/_next/image?url=%2Fimages%2Fv1-doc-images%2Fngrok-passage-react.png&w=3840&q=75)
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).