/
Contact usSee pricingStart building
    Overview
    Installation
    Changelog

    Pre-built UI

    StytchLogin
      UI Configuration
      UI Callbacks
    StytchPasswordReset
    StytchPasskeyRegistration
    IdentityProviderBeta
      UI Configuration
      UI Callbacks

    Headless

    Users
      Get user
      Update user
      Delete authentication factors
    Email Magic Links
      Send
      Login or create
      Authenticate
    OAuth
      Start
      Google One Tap
      Authenticate
    Passwords
      Create
      Authenticate
      Reset by Email Start
      Reset by Email
      Reset by Existing Password
      Reset by Session
      Strength Check
    One-Time Passcodes (OTP)
      Login or create via SMS
      Send via SMS
      Login or create via Email
      Send via Email
      Login or create via WhatsApp
      Send via WhatsApp
      Authenticate
    Time-Based One-Time Passcodes (TOTP)
      Create
      Authenticate
      Get Recovery Codes
      Recover
    Session Management
      Get Session
      Authenticate Session
      Revoke Session
      Update Session
      Get Tokens
    Passkeys & WebAuthn
      Register
      Authenticate
      Update
      Browser supports autofill
    Crypto Wallets
      Authenticate
      Authenticate Start
    Impersonation
      Authenticate

    More Resources

    Cookies & session management
    SWR & caching
    TypeScript
    User privacy measures
    Multi-factor authentication
    Next.js
    CAPTCHA
Get support on SlackVisit our developer forum

Contact us

Consumer Authentication

/

Frontend SDKs

/

Installation

Installation

Install packages

Our JavaScript SDK comes in three flavors, @stytch/vanilla-js, @stytch/react, and @stytch/nextjs. You can install all of these packages via npm or yarn.

# React app
npm install @stytch/vanilla-js @stytch/react --save

# Next.js app
npm install @stytch/vanilla-js @stytch/nextjs --save

# All other JavaScript based web apps
npm install @stytch/vanilla-js --save

Wrap your app in StytchProvider

There are two ways to use the JavaScript SDK, either with its pre-built UI components or calling it headlessly as simple functions to power your own UI.

For both patterns, you'll first need to wrap your app in StytchProvider to make sure that the SDK can control authenticated states across your application. We generally recommend putting this at the root of your app, e.g. layout.tsx in your Next.js app, to ensure the SDK is loaded everywhere that it is needed.

Next, for headless-only methods, you'll need to initialize the SDK with the StytchHeadlessClient constructor.

import { ReactNode } from "react";
import { StytchProvider } from '@stytch/react';
import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';

// optional object for configuring SDK cookie behavior, currently showing defaults
const stytchOptions = {
  cookieOptions: {
    opaqueTokenCookieName: "stytch_session",
    jwtCookieName: "stytch_session_jwt",
    path: "",
    availableToSubdomains: false,
    domain: "",
  }
}

const stytchClient = new StytchHeadlessClient('PUBLIC_TOKEN', stytchOptions);

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    // Wrap your app in the StytchProvider, you'll now be able to call the SDK anywhere in your app headlessly.
    <StytchProvider stytch={stytchClient}>
      <html lang="en">
        <title>Stytch Example</title>
        <body>
          <main>
            <div className="container">{children}</div>
          </main>
        </body>
      </html>
    </StytchProvider>
  );
}

Pre-built UI components

If you're using the SDK with the pre-built UI components, you'll also need to add the StytchUIClient constructor provided in the vanilla-js package wherever you need to use the UI components.

import { StytchProvider } from '@stytch/react';
import { StytchUIClient } from '@stytch/vanilla-js';

// optional object for configuring SDK cookie behavior, currently showing defaults
const stytchOptions = {
  cookieOptions: {
    opaqueTokenCookieName: "stytch_session",
    jwtCookieName: "stytch_session_jwt",
    path: "",
    availableToSubdomains: false,
    domain: "",
  }
}

const stytchClient = new StytchUIClient('PUBLIC_TOKEN', stytchOptions);

// Wrap your app in the StytchProvider and instantiate the StytchUIClient.
ReactDOM.render(
  <StytchProvider stytch={stytchClient}>
    <App />
  </StytchProvider>,
  document.getElementById('root'),
);

Next.js

If you're using our pre-built UI components in Next.js you'll want to use createStytchUIClient rather than calling StytchUIClient directly. This protects you against accidentally trying to call the UI components server side.

You can read more about this in our Next.js framework docs.

import { StytchProvider, createStytchUIClient } from '@stytch/nextjs';
import React from 'react';

// optional object for configuring SDK cookie behavior, currently showing defaults
const stytchOptions = {
  cookieOptions: {
    opaqueTokenCookieName: "stytch_session",
    jwtCookieName: "stytch_session_jwt",
    path: "",
    availableToSubdomains: false,
    domain: "",
  }
}

const stytch = createStytchUIClient('PUBLIC_TOKEN', stytchOptions);

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

Install packages

Wrap your app in StytchProvider

Pre-built UI components

Next.js