The config object for the UI components.
UI Configuration
Fields
config* object
products* array
The products array allows you to specify the authentication methods that you would like to expose to your users.
The order of the products that you include here will also be the order in which they appear in the login form, with the first product specified appearing at the top of the login form.
Currently the JavaScript SDK supports our emailMagicLinks, oauth, crypto, otp, passkeys and passwords products.
emailMagicLinksOptions* object
The options for email magic links. This is required if emailMagicLinks is present in the products array.
loginRedirectURL* string
The URL that will appear in your email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's authenticate endpoint and redirect to your app's experience for existing users.
loginExpirationMinutes int
Number of minutes the magic link is valid for.
signupRedirectURL* string
The URL that will appear in your email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's authenticate endpoint and redirect to your app's experience for new users.
signupExpirationMinutes int
Number of minutes the magic link is valid for.
loginTemplateId string
Custom template ID for login emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for Login.
signupTemplateId string
Custom template ID for sign-up emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for Sign-up.
createUserAsPending boolean
This flag determines whether the status of a new user will be pending. Users are created with an active status by default. If this flag true, users will be saved with a pending status in Stytch's backend. An example usage of this would be to invite users.
domainHint string
A hint indicating which domain the email will be sent from used in the filters included in the component's links to common email inboxes (for example, https://mail.google.com/mail/u/0/#search/from%3A%40domainHint%20in%3Aanywhere). This field is only required if your project uses more than one custom domain to send emails.
oauthOptions* object
The options for OAuth. This is required if oauth is present in the products array.
providers* array[string]
An array of OAuth providers you wish to use. Each Provider is an object with a type key that determines the type of provider. The order of the providers in the array determines the order of the rendered buttons.
Each Provider accepts an optional custom_scopes array of scopes that Stytch will request for your application in addition to the base set of scopes required for login.
Each provider also accepts a providerParams object with any additional parameters that you'd like to pass along to the OAuth provider (for example, login_hint, for providers that support it).
Google object
Adds the Google OAuth login button and Google One Tap. If you enable one_tap you may also provide a position parameter. floating is the default and recommended option and will display the One Tap prompt using the browser's native UI (if supported) or in the top right corner of the page (if not). Other position options include:
- floatingOrEmbedded (previously known as embedded): use the browser's native UI (if supported) or embed in the JavaScript SDK login form alongside the other configured sign-in options (if not).
- embeddedOnly: embed in the existing SDK login form if the browser's native UI is not supported, or not at all otherwise. This option is not generally recommended.
- forceLegacyEmbedded: embed in the existing SDK login form even if the browser's native UI is supported. This option is not recommended, will stop being honored by Google in the future, and is only provided for compatibility until then.
You can also provide a cancel_on_tap_outside parameter which controls whether the Google One Tap prompt is automatically dismissed when the user taps outside of it. By default, this is set to true.
If Google OAuth is the only authentication option specified and one_tap is set to floating, the normal Google OAuth login button will not appear in the SDK login form and only the floating One Tap box will be displayed.
Note: If you enable Google One Tap, ensure that you've added your app or website's URL as an authorized JavaScript origin in your Google Developer dashboard. If you're using localhost, make sure to add both http://localhost and http://localhost:port (e.g http://localhost:3000). See Step 5 in your Google OAuth setup guide here.
Note: You will not receive a Google access_token or refresh_token for users who complete the Google One Tap flow, and you will not be able to make Google API calls on their behalf. Accordingly, Google One Tap cannot be used to authorize additional custom scopes. If you need to make calls to Google's APIs to retrieve additional user data, we recommend using standard Google OAuth rather than Google One Tap.
// with One Tap
{ type: 'google', one_tap: true, position: 'floating' | 'floatingOrEmbedded' | 'embeddedOnly' | 'forceLegacyEmbedded' }
// with standard OAuth
{ type: 'google', custom_scopes?: ['...'], providerParams?: {...} }Microsoft object
Adds the Microsoft OAuth start button.
{ type: 'microsoft', custom_scopes?: ['...'], providerParams?: {...} }Apple object
Adds the Apple OAuth start button. Apple has no additional scopes that may be requested at this time.
{ type: 'apple' }GitHub object
Adds the GitHub OAuth start button.
{ type: 'github', custom_scopes?: ['...'], providerParams?: {...} }GitLab object
Adds the GitLab OAuth start button.
{ type: 'gitlab', custom_scopes?: ['...'], providerParams?: {...} }Facebook object
Adds the Facebook OAuth start button.
{ type: 'facebook', custom_scopes?: ['...'], providerParams?: {...} }Slack object
Adds the Slack OAuth start button.
{ type: 'slack', custom_scopes?: ['...'], providerParams?: {...} }Discord object
Adds the Discord OAuth start button.
{ type: 'discord', custom_scopes?: ['...'], providerParams?: {...} }Amazon object
Adds the Amazon OAuth start button.
{ type: 'amazon', custom_scopes?: ['...'], providerParams?: {...} }Bitbucket object
Adds the Bitbucket OAuth start button.
{ type: 'bitbucket', custom_scopes?: ['...'], providerParams?: {...} }Coinbase object
Adds the Coinbase OAuth start button.
{ type: 'coinbase', custom_scopes?: ['...'], providerParams?: {...} }LinkedIn object
Adds the LinkedIn OAuth start button.
{ type: 'linkedin', custom_scopes?: ['...'], providerParams?: {...} }Twitch object
Adds the Twitch OAuth start button.
{ type: 'twitch', custom_scopes?: ['...'], providerParams?: {...} }Yahoo object
Adds the Yahoo OAuth start button.
{ type: 'yahoo', custom_scopes?: ['...'], providerParams?: {...} }loginRedirectURL string
The URL that your users will redirect to after completing the OAuth authentication flow at a given OAuth provider, i.e. after the user returns from authenticating via Google.
This URL should route to an endpoint within your app that will complete the Stytch OAuth authentication flow, by hitting our oauth/authenticate endpoint.
If not specified, the user will be redirected to the default login redirect URL that you've configured in your Dashboard.
signupRedirectURL string
The URL that your users will redirect to after completing the OAuth authentication flow at a given OAuth provider, i.e. after the user returns from authenticating via Google.
This URL should route to an endpoint within your app that will complete the Stytch OAuth authentication flow, by hitting our oauth/authenticate endpoint.
If not specified, the user will be redirected to the default sign up redirect URL that you've configured in your Dashboard.
otpOptions object
The options for one time passcodes. This is required if otp is present in the products array.
methods* array
The methods array allows you to specify the authentication methods that you would like to expose to your users. The order of the products that you include here will also be the order in which they appear in the login form, with the first product specified appearing at the top of the login form. We currently support passcodes on email, sms and whatsapp
expirationMinutes int
Number of minutes the passcode is valid for.
loginTemplateId string
Custom template ID for login emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for Login.
signupTemplateId string
Custom template ID for sign-up emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for Sign-up.
sessionOptions object
The options for session management. If you are using the otp or crypto product, we also create a session for users when they log in. You can access a user or session using the User or Session SDK methods.
sessionDurationMinutes int
Set the session lifetime to be this many minutes from now; minimum of 5 and a maximum of 525600 minutes (365 days). Note that a successful authentication will continue to extend the session this many minutes.
enableShadowDOM boolean
The enableShadowDOM configuration option allows developers to use the Stytch SDK in a shadow DOM. This defaults to false. This property was introduced in v1.0.0 of the @stytch/vanilla-js package. Prior versions of the package default to the shadow DOM being enabled. To retain this behavior, set the flag to true.
passwordOptions* object
The options for passwords. This is required if passwords is present in the products array.
loginRedirectURL* string
The URL that will appear in your Password Reset email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's authenticate endpoint and redirect to your app's experience for existing users.
loginExpirationMinutes int
Number of minutes the magic link is valid for.
resetPasswordRedirectURL* string
The redirect URL used in your password reset email template for users who opt to reset their password. This link should route to an page that lets your user reset their password via Stytch's reset password endpoint.
resetPasswordExpirationMinutes int
Number of minutes the reset password token is valid for.
resetPasswordTemplateId string
Custom template ID for password reset emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for Passwords - Password reset.
styles object
The style object allows you to customize the look of the SDK. You can specify some of them or none at all. We'll use our defaults for the ones you don't specify.
fontFamily string
The font family that will apply to all text in the SDK.
hideHeaderText boolean
When this value is true, the title and description text will not show in the SDK.
container object
The configuration object for the Stytch UI container.
width string
The width of the SDK container.
backgroundColor string
The background color of the SDK container.
borderColor string
The border color of the SDK container.
borderRadius string
The border radius of the SDK container.
colors object
The configuration object for colors used in the Stytch UI components.
primary string
Your primary brand color. This will be applied to most of the text in the SDK.
secondary string
Your secondary brand color. This will be applied to text disclaimers and other visual elements.
success string
A success color to be used in visual elements.
error string
An error color to be used in visual elements.
buttons object
The configuration object for buttons in the Stytch UI component.
primary object
The configuration object for primary buttons
textColor string
The text color of the primary button.
backgroundColor string
The background color of the primary button.
borderColor string
The border color of the primary button.
borderRadius string
The border radius of the primary button.
secondary object
The configuration object for secondary buttons
textColor string
The text color of the secondary button.
backgroundColor string
The background color of the secondary button.
borderColor string
The border color of the secondary button.
borderRadius string
The border radius of the secondary button.
disabled object
The configuration object for disabled buttons
textColor string
The text color of the disabled button.
backgroundColor string
The background color of the disabled button.
borderColor string
The border color of the disabled button.
borderRadius string
The border radius of the disabled button.
inputs object
The configuration object for text inputs in the Stytch UI components.
textColor string
The text color of the text inputs.
backgroundColor string
The background color of the text inputs.
placeholderColor string
The color of the placeholder text in the text inputs.
borderColor string
The border color of the text inputs.
borderRadius string
The border radius of the text inputs.
logo object
The configuration object for your custom logo.
logoImageUrl string
The URL of your custom logo. The image will be resized to fit a max height of 50px, and a max width of 100px.
callbacks object
Optional callbacks that are triggered by various events in the SDK. See more details about the callbacks here.
onEvent (data) => void
A callback function that responds to events sent from the SDK.
onError (data) => void
A callback function that responds to errors in the SDK. It is useful for debugging during development and error handling in production.
strings object
Specify custom strings to be used in the prebuilt UI. Consult the message catalog (messages/en.po) for the list of available strings. Each value should be specified using ICU MessageFormat.
Strings that are not defined will use the default English value as a fallback.
See Text Customization for more information.
import React from 'react';
import { StytchLogin } from '@stytch/react';
const Login = () => {
const styles = {
fontFamily: 'Arial',
};
const callbacks = {
onEvent: ({ type, data }) => {
if (type === 'MAGIC_LINK_LOGIN_OR_CREATE') {
console.log('Email magic Link sent', data);
}
},
onError: (data) => {
console.log(data);
},
};
const config = {
products: ['emailMagicLinks', 'oauth'],
emailMagicLinksOptions: {
loginRedirectURL: 'https://example.com/authenticate',
loginExpirationMinutes: 30,
signupRedirectURL: 'https://example.com/authenticate',
signupExpirationMinutes: 30,
createUserAsPending: true,
},
oauthOptions: {
providers: [
{
type: 'google',
one_tap: true,
position: 'floating',
cancel_on_tap_outside: false,
},
{
type: 'microsoft',
provider_params: {
login_hint: 'example_hint@stytch.com',
},
},
],
},
};
// Customize the text in the prebuilt UI via the `strings` parameter
const strings = {
'login.title': 'Welcome back!',
};
return (
<div className="sign-in-container">
<StytchLogin
config={config}
styles={styles}
callbacks={callbacks}
strings={strings}
/>
</div>
);
};
export default Login;