Installation
React
For a full walk-through of how to get up and running with a sign-up and login flow using Stytch, check out our React Quickstart Guide.
1Install Packages
To use the React FE SDK, you need to install both the @stytch/react and @stytch/vanilla-js packages:
npm install @stytch/react @stytch/vanilla-js --save2Create the Stytch client
First, initialize the Stytch UI client, passing in your Project's public_token from the Stytch dashboard.
import { createStytchB2BUIClient } from '@stytch/react/b2b/ui';
const stytch = createStytchB2BUIClient(
import.meta.env.STYTCH_PUBLIC_TOKEN, // or process.env.STYTCH_PUBLIC_TOKEN for non-Vite based projects
);If you do not want to use the pre-built UI components, you can instead initialize the headless client:
import { createStytchB2BHeadlessClient } from '@stytch/react/b2b/headless';
const stytch = createStytchB2BHeadlessClient(
import.meta.env.STYTCH_PUBLIC_TOKEN, // or process.env.STYTCH_PUBLIC_TOKEN for non-Vite based projects
);3Wrap 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 { StytchB2BProvider } from '@stytch/react/b2b';
import { createStytchB2BUIClient } from '@stytch/react/b2b/ui';
const stytch = createStytchB2BUIClient(
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(
<React.StrictMode>
<StytchB2BProvider stytch={stytch}>
<Router>
<App />
</Router>
</StytchB2BProvider>
</React.StrictMode>
);4Add 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.
Next.js
For a full walk-through of how to get up and running with a sign-up and login flow using Stytch, check out our Next.js Quickstart Guide.
1Install Packages
To use the Next.js FE SDK, you need to install both the @stytch/nextjs and @stytch/vanilla-js packages:
npm install @stytch/nextjs @stytch/vanilla-js --save2Create the Stytch client
First, initialize the Stytch UI client, passing in your Project's public_token from the Stytch dashboard.
import { createStytchB2BUIClient } from '@stytch/nextjs/b2b/ui';
const stytch = createStytchB2BUIClient(
process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN,
);If you do not want to use the pre-built UI components, you can instead initialize the headless client:
import { createStytchB2BHeadlessClient } from '@stytch/nextjs/b2b/headless';
const stytch = createStytchB2BHeadlessClient(
process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN,
);3Wrap 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 { StytchB2BProvider } from '@stytch/nextjs/b2b';
import { createStytchB2BUIClient } from '@stytch/nextjs/b2b/ui';
const stytch = createStytchB2BUIClient(
process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN,
);
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Head>
// Truncated
</Head>
<StytchB2BProvider stytch={stytchClient}>
<main>
<div className="container">
<Component {...pageProps} />
</div>
</main>
</StytchB2BProvider>
</>
);
}4Add 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.