React Quickstart

If you haven't already, create a Stytch Consumer Authentication Project in your Stytch Dashboard.

Add our frontend React SDK package to your React application:

npm install @stytch/react @stytch/vanilla-js --save

Add your Stytch Project's public_token to your application as an environment variable in a .env file:

# .env
# The below values may be found in your Stytch Dashboard: https://stytch.com/dashboard/api-keys
STYTCH_PROJECT_ENV=test
STYTCH_PUBLIC_TOKEN="YOUR_STYTCH_PUBLIC_TOKEN"

To allow the Stytch SDK to run on your frontend, you'll also need to:

1. Enable frontend SDKs in Test in your Stytch Dashboard here.
2. Add the domain your application will run on (e.g. http://localhost:3000) to the list of Domains under Authorized applications.

First, initialize the Stytch UI client by invoking the createStytchUIClient constructor function, passing in your Project's public token.

Next, pass the Stytch UI client to the StytchProvider component at the root of your application, making it accessible to all child 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(
  import.meta.env.STYTCH_PUBLIC_TOKEN, // or process.env.STYTCH_PUBLIC_TOKEN for non-Vite based projects
  stytchOptions
);

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

root.render(
  <React.StrictMode>
    <StytchProvider stytch={stytchClient}>
      <App />
    </StytchProvider>
  </React.StrictMode>
);

Create a Login component. You can configure which authentication flow and methods you'd like to offer by modifying the authFlowType and products fields respectively in your config object.

Here's an example of our pre-built UI component utilizing Email Magic Links:

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

const LoginOrSignup = () => {
   const config = {
      products: [Products.emailMagicLinks],
      emailMagicLinksOptions: {
        loginRedirectURL: 'http://localhost:3000/authenticate',
        loginExpirationMinutes: 60,
        signupRedirectURL: 'http://localhost:3000/authenticate',
        signupExpirationMinutes: 60,
      },
    };

   return <StytchLogin config={config} />;
};

For Email Magic Links, you must specify a redirect URL in your Project's Dashboard to authenticate the token. By default, the redirect URL is set to http://localhost:3000/authenticate.

If the <StytchLogin> component is rendered on the redirect URL used for this flow, the Email Magic Link token will automatically be authenticated. You can specify additional Redirect URLs in your Project's Dashboard, and override the default by passing in an explicit emailMagicLinksOptions.loginRedirectURL to your UI config.

You can read more about redirect URLs in this guide.

Check out our product-specific guides for how to handle full authentication flows for each product you'd like to support, like Email Magic Links and OAuth.