UI config

Below you'll find a config reference for our pre-built UI components. We also recommend checking out our B2B UI components guides for an overview of our UI component authentication flows.

Fields

config* object
styles object
callbacks object
import React from 'react';
import { StytchB2B } from '@stytch/react/b2b';

const Login = () => {
  const style = {
    fontFamily: 'Arial',
  };

  const callbacks = {
    onEvent: ({ type, data }) => {
      console.log(type, data);
    },
    onError: (data) => {
      console.log(data);
    },
  };

  // Example config for the Discovery auth flow, hosted on a generic login page
  var discoveryConfig = {
    authFlowType: "Discovery",
    products: ['emailMagicLinks', 'oauth'],
    emailMagicLinksOptions: {
      discoveryRedirectURL: "https://example.com/authenticate"
    },
    oauthOptions: {
      discoveryRedirectURL: "https://example.com/authenticate",
      providers: [{ type: 'google', one_tap: true }, { type: 'microsoft' }]
    },
    sessionOptions: {
      sessionDurationMinutes: 60,
    },
  };

  // Example config for PasswordReset flows - you'll launch the UI component with this configuration after users click the password reset redirect URL.
  var passwordResetConfig = {
    authFlowType: "PasswordReset",
    products: ['passwords'],
    sessionOptions: { sessionDurationMinutes: 60 }
  };

  // Example config for the Organization auth flow, hosted on an
  // Organization-specific login page
  var organizationConfig = {
    authFlowType: "Organization",
    products: ['emailMagicLinks', 'oauth', 'sso', 'passwords'],
    emailMagicLinksOptions: {
      loginRedirectURL: "https://example.com/authenticate",
      signupRedirectURL: "https://example.com/signup"
    },
    oauthOptions: {
      loginRedirectURL: "https://example.com/authenticate",
      signupRedirectURL: "https://example.com/signup",
      providers: [{ type: 'google', one_tap: true }, { type: 'microsoft' }],
      provider_params: {
        login_hint: 'example_hint@stytch.com'
      }
    },
    ssoOptions: {
      loginRedirectURL: "https://example.com/authenticate",
      signupRedirectURL: "https://example.com/signup"
    },
    passwordOptions: {
      loginRedirectURL: "https://example.com/authenticate",
      resetPasswordRedirectURL: "https://example.com/resetPassword",
      resetPasswordExpirationMinutes: 20
    },
    sessionOptions: {
      sessionDurationMinutes: 60,
    },
  };

  return (
    <div>
      // Choose either the discoveryConfig or the organizationConfig
      <StytchB2B config={discoveryConfig} styles={style} callbacks={callbacks} />
    </div>
  );
};

export default Login;