Installation - Stytch Docs

For a full walk-through of how to get up and running with a sign-up and login flow using Stytch, check out our Quickstart Guide.

Install Packages

Install the React package:

npm install @stytch/react

Create the Stytch client

Initialize the Stytch client, passing in your Project’s public_token from the Project Overview of the Stytch Dashboard.

import { createStytchB2BClient } from '@stytch/react/b2b';

const stytch = createStytchB2BClient(
  import.meta.env.STYTCH_PUBLIC_TOKEN, // or process.env.STYTCH_PUBLIC_TOKEN for non-Vite based projects
);

Wrap your application in <StytchB2BProvider>

Next, pass the Stytch client to the <StytchB2BProvider> component at the root of your application, making it accessible to all child components.

import { StrictMode } from 'react';
import { createStytchB2BClient, StytchB2BProvider } from '@stytch/react/b2b';

const stytch = createStytchB2BClient(
  import.meta.env.STYTCH_PUBLIC_TOKEN, // or process.env.STYTCH_PUBLIC_TOKEN for non-Vite based projects
);

const root = ReactDOM.createRoot(document.getElementById("root")!);

root.render(
  <StrictMode>
    <StytchB2BProvider stytch={stytch}>
      <Router>
        <App />
      </Router>
    </StytchB2BProvider>
  </StrictMode>
);

Add your login flow

You have now initialized the Stytch client, and can add the <StytchB2B> pre-built login component to get a robust, end-to-end login flow working with just a simple config.

⌘I