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.
UI config
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;