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.
Follow the steps below to get this application fully functional and running using your own Stytch credentials.
-
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
, andpublic_token
values found on this page later on.
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
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
.
Join the discussion, ask questions, and suggest new features in our Slack community!
Check out the Stytch Forum or email us at support@stytch.com.