> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# StytchLogin Configuration
> Configuration options for the StytchLogin component
Stytch Login is a prebuilt UI component that handles login and signup flows for Consumer Authentication. It supports a mix of authentication methods (Email Magic Links, OAuth, OTPs, passwords, and more) and returns a Session when a user completes authentication.
## Props
The configuration object for the StytchLogin pre-built UI component.
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`, `passwords`, `otp`, `passkeys` and `crypto` products.
`passkeys` must be used with another authentication factor and cannot be used alone.
If the only product specified is `oauth`, and the only OAuth provider specified is google with `one_tap` set to true, the login form will not be displayed. Instead, we will only show the Google One Tap prompt in the upper right of the user's browser.
The options for Email Magic Links. This is required if `emailMagicLinks` is present in the products array.
The URL that will appear in your email template and accepts a token (ex: you implement '[https://example.com/authenticate?token=123](https://example.com/authenticate?token=123)' in your app and pass '[https://example.com/authenticate](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.
The expiration of the Magic Link sent in the login email, in minutes. Defaults to 60 minutes. The minimum expiration is 5 minutes and the maximum is 7 days (10080 mins).
The URL that will appear in your email template and accepts a token (ex: you implement '[https://example.com/authenticate?token=123](https://example.com/authenticate?token=123)' in your app and pass '[https://example.com/authenticate](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.
The expiration of the Magic Link sent in the signup email, in minutes. Defaults to 7 days. The minimum expiration is 5 minutes and the maximum is 7 days (10080 mins).
Custom template ID for login emails. By default, it will use your default email template. Templates can be added in the [Stytch dashboard](https://stytch.com/dashboard/templates) using our built-in customization options or custom HTML templates with type “Magic links - Login”.
Custom template ID for sign-up emails. By default, it will use your default email template. Templates can be added in the [Stytch dashboard](https://stytch.com/dashboard/templates) using our built-in customization options or custom HTML templates with type “Magic links - Sign-up”.
Used to determine which language to use when sending the user this delivery method. Parameter is an [IETF BCP 47 language tag](https://www.w3.org/International/articles/language-tags/), e.g. "en".
Supported languages are English ("en"), Spanish ("es"), French ("fr") and Brazilian Portuguese ("pt-br"); if no value is provided, the copy defaults to English.
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](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.
The options for Email or SMS One-Time Passcodes. This is required if `otp` is present in the products array.
Specifies which OTP methods to display. Valid values are `'email'`, `'sms'` and `'whatsapp'`. 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.
The expiration for the one-time passcode, in minutes. The default expiration is 2 minutes. The minimum expiration is 1 minute and the maximum is 10 minutes.
Custom template ID for signup emails. By default, it will use your default email template. Templates can be added in the [Stytch dashboard](https://stytch.com/dashboard/templates) using our built-in customization options or custom HTML templates with type “OTP”.
Custom template ID for OTP emails. By default, it will use your default email template. Templates can be added in the [Stytch dashboard](https://stytch.com/dashboard/templates) using our built-in customization options or custom HTML templates with type “OTP”.
Used to determine which language to use when sending the user this delivery method. Parameter is an [IETF BCP 47 language tag](https://www.w3.org/International/articles/language-tags/), e.g. "en".
Supported languages are English ("en"), Spanish ("es"), French ("fr") and Brazilian Portuguese ("pt-br"); if no value is provided, the copy defaults to English.
The options for OAuth. This is required if `oauth` is present in the products array.
Specifies which OAuth providers to display.
The provider type. Currently we support `google`, `microsoft`, `apple`, `github`, `gitlab`, `facebook`, `discord`, `salesforce`, `slack`, `amazon`, `bitbucket`, `coinbase`, `linkedin`, `twitch`, `twitter` (a.k.a. X), `yahoo`, `snapchat`, `shopify`, `figma`, and `tiktok`.
Whether to display the Google One Tap prompt in the top right corner of the user's browser. This parameter is only allowed if the type is set to `google`.
Controls whether the Google One Tap prompt is automatically dismissed when the user taps outside of it. This parameter is only allowed if the type is set to `google` and `one_tap` is set to true. Defaults to true.
Supported behaviors for positioning Google One Tap. The actual behavior depends on browser support and Google's One Tap implementation. The position options are:
* `floating`: Display the One Tap prompt using a native browser prompt if available, or in the top right corner otherwise. This is the default option.
* `floatingOrEmbedded`: Display the One Tap prompt using a native browser prompt if available, or embedded in the existing SDK login form otherwise.
* `embeddedOnly`: Display the One Tap prompt embedded in the existing SDK login form if a native browser prompt is not available, or not at all otherwise. This option is not recommended for new applications.
* `forceLegacyEmbedded`: Attempt to display the One Tap prompt embedded in the existing SDK login form, even if a native browser prompt is supported. This option is not recommended. It disables native browser FedCM support even where it is available, and will stop being honored by Google in the future.
An optional array of scopes that Stytch will request for your application in addition to the base set of scopes required for login.
An 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).
The URL that Stytch will redirect to after a successful OAuth login. This should be a page in your application that handles the OAuth callback.
The URL that Stytch will redirect to after a successful OAuth sign-up. This should be a page in your application that handles the OAuth callback.
The options for Passwords. This is required if `passwords` is present in the products array.
The URL to redirect to after a successful password login.
The URL that will appear in password reset emails and accepts a token. This link should route to an endpoint in your application that renders the password reset UI.
The number of minutes that the password reset token sent in password reset emails will be valid for. Defaults to 30 minutes.
Custom template ID for password reset emails, configured via [the Branding page](https://stytch.com/dashboard/templates) in the Stytch Dashboard. If this value is not specified, your default password reset template will be used.
Used to determine which language to use when sending the user this delivery method. Parameter is an [IETF BCP 47 language tag](https://www.w3.org/International/articles/language-tags/), e.g. "en".
Supported languages are English ("en"), Spanish ("es"), French ("fr") and Brazilian Portuguese ("pt-br"); if no value is provided, the copy defaults to English.
The options for Passkeys.
Sets the domain option for both WebAuthn registration and authentication. Defaults to the current page's hostname.
The options for session management.
Set the session lifetime to be this many minutes from now; minimum of 5 and a maximum of 527040 minutes (366 days).
The `presentation.theme` 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.
If you pass in an array of two themes, the first will automatically be used when the user's OS is in light mode, and the second in dark mode.
See [our pre-built themes](../theming#pre-built-themes), [how to write your own theme](../theming#creating-your-own-theme) or [reference for all properties](../theming#reference).
The `presentation.options` object customizes non-style related aspects of the SDK's appearance.
You can specify some of them or none at all. We'll use our defaults for the ones you don't specify.
When this value is true, the title and description text will not show in the SDK.
The configuration object for your custom logo.
The URL of your custom logo.
The alt text for the logo for non-visual users. This is required for accessibility.
Allows our icons to be overridden. See [icon customization guide](../theming#icon-customization) for more information.
Optional callbacks that are triggered by various events in the SDK. See more details about the callbacks [here](/api-reference/consumer/frontend-sdks/react/prebuilt-ui/login/callbacks).
A callback function that responds to events sent from the SDK.
A callback function that responds to errors in the SDK. It is useful for debugging during development and error handling in production.
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](/api-reference/consumer/frontend-sdks/react/prebuilt-ui/text-customization) for more information.
```jsx Basic Example theme={null}
import { Products, StytchLogin } from '@stytch/react';
const Login = () => {
// Set the login configuration
const config = {
products: [Products.emailMagicLinks, Products.oauth],
oauthOptions: {
providers: [
{ type: 'google', one_tap: true },
{ type: 'microsoft' }
],
loginRedirectURL: 'https://example.com/authenticate',
signupRedirectURL: 'https://example.com/authenticate',
},
emailMagicLinksOptions: {
loginRedirectURL: 'https://example.com/authenticate',
signupRedirectURL: 'https://example.com/authenticate',
},
sessionOptions: {
sessionDurationMinutes: 60,
},
};
// Set the styles for the prebuilt UI
const presentation = {
theme: { 'font-family': 'Arial' },
options: { hideHeaderText: false },
};
// Set the callbacks to fire as a result of events from the prebuilt UI
const callbacks = {
onEvent: ({ type, data }) => {
console.log(type, data);
},
onError: (error) => {
console.log(error);
},
};
// Customize the text in the prebuilt UI
const strings = {
'login.title': 'Log in or sign up',
};
return (
);
};
export default Login;
```
```javascript Email Magic Links + OAuth theme={null}
import { Products } from '@stytch/react';
const config = {
products: [Products.emailMagicLinks, Products.oauth],
emailMagicLinksOptions: {
loginRedirectURL: 'https://example.com/authenticate',
signupRedirectURL: 'https://example.com/authenticate',
},
oauthOptions: {
providers: [
{ type: 'google', one_tap: true, cancel_on_tap_outside: false },
{ type: 'microsoft' },
{ type: 'apple' },
],
loginRedirectURL: 'https://example.com/authenticate',
signupRedirectURL: 'https://example.com/authenticate',
},
sessionOptions: {
sessionDurationMinutes: 60,
},
};
```
```javascript Passwords + OAuth theme={null}
import { Products } from '@stytch/react';
const config = {
products: [Products.passwords, Products.oauth],
passwordOptions: {
loginRedirectURL: 'https://example.com/authenticate',
resetPasswordRedirectURL: 'https://example.com/reset-password',
resetPasswordExpirationMinutes: 30,
},
oauthOptions: {
providers: [
{ type: 'google' },
{ type: 'github' },
],
loginRedirectURL: 'https://example.com/authenticate',
signupRedirectURL: 'https://example.com/authenticate',
},
sessionOptions: {
sessionDurationMinutes: 120,
},
};
```
```javascript OTP (Email + SMS) theme={null}
import { Products } from '@stytch/react';
const config = {
products: [Products.otp],
otpOptions: {
methods: ['email', 'sms'],
},
sessionOptions: {
sessionDurationMinutes: 60,
},
};
```
```javascript Passkeys + Email Magic Links theme={null}
import { Products } from '@stytch/react';
const config = {
products: [Products.passkeys, Products.emailMagicLinks],
emailMagicLinksOptions: {
loginRedirectURL: 'https://example.com/authenticate',
signupRedirectURL: 'https://example.com/authenticate',
},
sessionOptions: {
sessionDurationMinutes: 60,
},
};
```