Stytch Passkey Example (React/Express)

Overview

This example application demonstrates how one may use Stytch's Passkey authentication within a React frontend Express backend application. The application features a sign-up and login flow powered by OTP sms/email and passkeys.

This project utilizes Stytch's React SDK to power authentication. All authentication logic lives within the React SDK UI components.

This project was bootstrapped with Create React App.

Set up

Follow the steps below to get this application fully functional and running using your own Stytch credentials.

In the Stytch Dashboard

Create a Stytch account. Within the signup flow select B2C Authentication as the authentication type you are interested in. Once your account is set up a Project called "My first project" will be automatically created for you.
- If you signed up for Stytch in the past then your default Project is likely a Consumer type Project. You can confirm this in your Project settings.
Navigate to SDK Configuration and click "Enable SDK". Enter the domain you will be running this application on (e.g. localhost:3000). Click the toggle to enable "Email Passcodes (OTP)", "SMS Passcodes (OTP)", and "Passkeys".
Finally, navigate to API Keys. You will need the project_id, secret, and public_token values found on this page later on.

On your machine

In your terminal clone the project and install dependencies:

git clone [https://github.com/stytchauth/stytch-passkey-react-node-example-app.git](https://github.com/stytchauth/stytch-passkey-react-node-example-app.git)
cd stytch-passkey-react-node-example-app
npm i
cd server
npm i

Next, create .env.local file by running the command below which copies the contents of .env.template.

cp .env.template .env.local

Open .env.local in the text editor of your choice, and set the environment variables using the project_id, secret, and public_token found on API Keys.

# This is what a completed .env.local file will look like
REACT_APP_STYTCH_PUBLIC_TOKEN=public-token-test-abc123-abcde-1234-0987-0000-abcd1234
STYTCH_PROJECT_ID=project-test-00000000-0000-1234-abcd-abcdef1234
STYTCH_SECRET=secret-test-12345678901234567890abcdabcd
SERVER_PORT=3001
PORT=3000

Running locally

After completing all the setup steps above the application can be run with the command:

npm run start

The application will be available at http://localhost:3000 and the server will be available at http://localhost:3001.

Get help and join the community

💬 Stytch community Slack

Join the discussion, ask questions, and suggest new features in our Slack community!

❓ Need support?

Check out the Stytch Forum or email us at support@stytch.com.