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

stylesobject

callbacksobject
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: ['google', 'microsoft']
    },
    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: ['google', '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;