Stytch + Next.js Example App

This is a Stytch + Next.js project bootstrapped with create-next-app. Check out a live version of this site here.

In this repo, we have three sample auth flows:

• SDK with React component: This flow uses Stytch's React component to create a login and sign-up flow using Email magic links and OAuth logins.
• SDK with custom UI: This flow uses a custom UI with Stytch's headless SDK to implement Onetime Passcodes(OTP) via SMS authentication.
• Direct API: This flow uses a custom UI with Stytch's backend API for a two step authenticaiton which requires Email magic links and WebAuthn.

Note: By default this example app enables five of our OAuth providers, Google, Microsoft, Facebook, Github, and Apple. If you haven't set up these OAuth providers in your Dashboard, you'll receive a redirect error when you attempt to login via those providers. You may remove all OAuth methods by removing SDKProductTypes.oauth from the products array in components/LoginWithReactSDK.tsx or adjust which ones are displayed by via oauthOptions.providers in the same file. More detail on working with OAuth providers in our SDK may be found in our Docs.

Running with Vercel

If you'd like to run this example app with Vercel, the first step is to configure the appropriate redirect URLs for your project.

You'll set these magic link redirect URLs in the Redirect URLs section of your Dashboard. Add https://*.vercel.app/authenticate as both a login and sign-up redirect URL. If you'd like to try our WebAuthn example integration, add https://*.vercel.app/api/authenticate_magic_link_with_webauthn as a login and sign-up redirect URL as well.

Additionally, you will need to configure the headless SDK settings. In your SDK Configuration add https://*.vercel.app as an authorized domain and toggle on the Auth methods "Email magic links", "OAuth", and "SMS passcodes (OTP)".

Note: To use Google One Tap in this example app, you'll need to deploy on Vercel first, then add the resulting URL, e.g. https://<uuid>.vercel.app/ as both a Stytch Redirect URL and as a Authorized JavaScript origins in your Google OAuth dashboard.

Now just click the deploy button below! Once you're signed in to your Vercel account, you'll be guided through how to get up and running quickly. Check out .env.template for pointers on filling in the appropriate environment variables for this step.

Running locally

Setting up Stytch

After signing up for Stytch, you'll need your Project's project_id, secret, and public_token. You can find these in the API keys tab.

Once you've gathered these values, add them to a new .env.local file. Example:

cp .env.template .env.local
# Replace your keys in new .env.local file

Next we'll configure the appropriate redirect URLs for your project, you'll set these magic link URLs for your project in the Redirect URLs section of your Dashboard. Add http://localhost:3000/authenticate as both a login and sign-up redirect URL. If you'd like to try our WebAuthn example integration, add http://localhost:3000/recipes/api-webauthn/magic-link-authenticate as a login and sign-up redirect URL as well.

Running the example app

Install dependencies by running

npm install
# or
yarn install

You can then run a development server using:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Documentation

Learn more about some of Stytch's products used in this example app:

• Stytch Web SDK
• Stytch NextJS
• Stytch's node client library