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 StytchB2BProvider

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 StytchB2BProvider 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 StytchB2BHeadlessClient constructor.

import { ReactNode } from "react";
import { StytchB2BProvider } from "@stytch/nextjs/b2b";
import { createStytchB2BUIClient } from "@stytch/nextjs/b2b/ui";


const stytchClient = createStytchB2BUIClient('PUBLIC_TOKEN');

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.
    <StytchB2BProvider 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 { StytchB2BProvider } from '@stytch/react/b2b';
import { StytchB2BUIClient } from '@stytch/vanilla-js/b2b';

const stytchClient = new StytchB2BUIClient('PUBLIC_TOKEN');

// Wrap your app in the StytchProvider and instantiate the StytchUIClient.
ReactDOM.render(
  <StytchB2BProvider 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 createStytchB2BUIClient rather than calling StytchB2BUIClient 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 { StytchB2BProvider } from '@stytch/nextjs/b2b';
import { createStytchB2BUIClient } from '@stytch/nextjs/b2b/ui';
import React from 'react';

const stytch = createStytchB2BUIClient('PUBLIC_TOKEN');

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