B2B Passwords Prebuilt UI Integration

If you haven't done so already:

1. Set up Redirect URLs in the Stytch Dashboard for:
   1. Signup, Login, Invite, Reset password and Discovery types
2. Enable the Frontend SDKs in your Stytch Dashboard
3. Enable Cross-Organization passwords by toggling on “Allow Passwords to be used between Organizations” in your Password strength configuration

To display Passwords as a login option in the UI, add it to the products array in your UI config and set the authFlowType to “Discovery”.

You can set your desired loginRedirectURL and resetPasswordRedirectURL values within the passwordOptions object. The resetPasswordRedirectURL will be used when the user selects the “Reset Password” button in password reset emails, and the loginRedirectURL will be used when the user selects the “Log in without password” button in password reset emails.

We recommend reviewing the UI Config documentation if you want to explore available styling options.

Most developers choose to place this configuration in a helper file. In this guide we’re doing the same, and you can find this pattern in the companion example app here, but you can alternatively include the config options directly within your Login component.

config.ts

import { AuthFlowType, B2BProducts } from "@stytch/vanilla-js";

export const discoveryConfig = {
  products: [B2BProducts.passwords],
  sessionOptions: { sessionDurationMinutes: 60 },
  passwordOptions: {
    loginRedirectURL: "http://localhost:3000/authenticate",
    resetPasswordRedirectURL: "http://localhost:3000/passwordreset",
    resetPasswordExpirationMinutes: 20
    },
  authFlowType: AuthFlowType.Discovery,
};

export const discoveryStyles = {
  fontFamily: 'Arial',
  container: {
    width: '500px',
  },
}

The example below shows how to create a Login component. It applies the configuration and style defined in your config file. This component automatically handles the UI events and calls the Stytch API with the necessary authentication data. You can then import the Login component into your main application file:

Login.tsx

import { StytchB2B } from "@stytch/react/b2b";
import { discoveryConfig, discoveryStyles } from './config';

export const Login = () => {

  return (
    <div className="centered-login">
      <StytchB2B
      config={discoveryConfig}
      styles={discoveryStyles}
      />
    </div>
  );
};

In this example, there are three routes defined, all of which render the Login component. The /authenticate and /passwordreset routes are the login and password reset redirect URLs defined in the UI configuration.

App.tsx

import { Routes, Route } from "react-router-dom";
import { Login } from "./Login";

export const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Login />} />
      <Route path="/authenticate" element={<Login />}/>
      <Route path="/passwordreset" element={<Login />}/>
    </Routes>
  );
};