Setting up Passcodes with the SDK

This is a step-by-step guide of how to integrate Stytch One-Time Passcodes (OTP) into your application using our frontend Javascript SDK. Our SDK provides pre-built UI components that you can use to easily add OTP flows to your application without having to without having to build your own login UI. For this guide, we are using Stytch's NextJS library to simplify the integration.

Before adding passcodes to your application you will need to make the following Project configurations within the Stytch Dashboard:

1. Within your new Project, navigate to SDK configuration, and click Enable SDK.
2. Under API keys, save your Project's public_token for later.

NOTE: there are two environments available for building and running your application: Test and Live. The Project uses the Test environment by default. If you would like to call SMS OTP endpoints in Live, we require you to have a payment method configured in the Workplace Settings of your Dashboard.

Install @stytch/vanilla-js and @stytch/nextjs with the package manager of your choice.

npm install @stytch/vanilla-js @stytch/nextjs

or

yarn add @stytch/vanilla-js @stytch/nextjs

At the top level of your application you will need to initialize the Stytch client using the public_token saved in Step 1.

import { StytchProvider } from "@stytch/nextjs";
import { createStytchUIClient } from "@stytch/nextjs/ui";

const STYTCH_PUBLIC_TOKEN = 'YOUR_PUBLIC_TOKEN'; 
const stytch = createStytchUIClient(STYTCH_PUBLIC_TOKEN);

function MyApp({ Component, pageProps }) {
  return (
      <StytchProvider stytch={stytch}>
        <Component {...pageProps} />
      </StytchProvider>
  );
}

export default MyApp;

Next, create a component that will render on your signup and login page. Within this component you will configure and render the Stytch UI. The Stytch UI accepts a config object as an argument; learn more about this object here.

In the config you need to specify:

1. The products that you'd like to display in the login component. In this case, we'll specify Products.otp.
2. The options for each of the products that will be displayed in the login component. In this case, you'll need to include the otpOptions object. You'll need to specify which types of OTP flows you'd like to offer (email, sms, or whatsapp) in the methods array, and can optionally set a desired code expiration via the expirationMinutes parameter. Here we set an expiration of 10 minutes for the OTP code.

import React from 'react';
import { Products } from '@stytch/vanilla-js';
import { StytchLogin } from '@stytch/nextjs';

const config = {
  otpOptions: {
      methods: ["sms"],
      expirationMinutes: 10,
  },
  products: [
    Products.otp,
  ],
};

export const Login = () => {
  return (<StytchLogin config={config} />);
};

You have now built all the pieces needed for a OTP signup and login flow with our pre-built UI config. The SDK handles the code authentication and no further logic is necessary for the OTP flow. When a user logs in successfully, the SDK will automatically start and manage a session. You can learn more about how to use sessions here.

Have any feedback after integrating? Get in touch with us and tell us what you think in our forum, support@stytch.com, or in our Slack community.