> ## 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.

# Stytch Login

> Implement the Stytch Login component using the Stytch React Native SDK

The React Native SDK provides the option for you to use pre-built login flows, supporting dark and light themes, with easy configuration, detailed below.

## Handling Deeplinks

For Email Magic Links, OAuth, SSO, and Password Reset flows, this component handles the deeplinking automatically. You'll need to add a custom URL scheme and redirect URL as explained below.

First, you need to configure your app to listen for a deeplink with the scheme: `stytch-ui-[YOUR_PUBLIC_TOKEN]`. How you do that will depend on your supported platforms and whether you are using [bare React Native](https://reactnative.dev/docs/linking) or [Expo](https://docs.expo.dev/guides/linking/#linking-to-your-app).

<Note>
  If you are using [Expo Router](https://docs.expo.dev/versions/latest/sdk/router/), which is the default for new apps created with create-expo-app, you must add a `+native-intent.tsx` file which ignores the incoming Stytch UI deep links. An example of this can be found [here](https://github.com/stytchauth/stytch-react-native-ui-expo-router/blob/main/app/%2Bnative-intent.tsx).
</Note>

Lastly, you'll need to add a special redirect URL in your Stytch Dashboard [Redirect URLs](https://stytch.com/dashboard/redirect-urls). It should have a URL of `stytch-ui-[YOUR_PUBLIC_TOKEN]://deeplink` and be applied to all redirect types.

Once both the scheme (in your app) and the redirect URL (in your Dashboard) are configured, our pre-built UI should handle the rest.

## Props

<ParamField path="client" type="StytchClient" required>
  The Stytch client object.
</ParamField>

<ParamField path="config" type="StytchUIConfig" required>
  The config object for the UI components.

  <ParamField path="config.productConfig" type="RNUIProductConfig" required>
    The config object for the UI components.

    <Expandable title="properties">
      <ParamField path="products" type="RNUIProducts[]" required>
        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 SDK supports our `emailMagicLinks`, `oauth`, `otp`, and `passwords` products.

        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.
      </ParamField>

      <ParamField path="sessionOptions" type="SessionOptions">
        Configuration options for the sessions that will be created.

        <Expandable title="properties">
          <ParamField path="sessionDurationMinutes" type="integer">
            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.
          </ParamField>
        </Expandable>
      </ParamField>

      <ParamField path="emailMagicLinksOptions" type="RNUIEmailMagicLinksOptions">
        The options for email magic links. This is required if `emailMagicLinks` is present in the products array.

        <Expandable title="properties">
          <ParamField path="loginTemplateId" type="string">
            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”.
          </ParamField>

          <ParamField path="signupTemplateId" type="string">
            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”.
          </ParamField>
        </Expandable>
      </ParamField>

      <ParamField path="passwordOptions" type="object">
        The options for Passwords. This is required if `passwords` is present in the products array.

        <Expandable title="properties">
          <ParamField path="resetPasswordExpirationMinutes" type="integer">
            The number of minutes that the password reset token sent in password reset emails will be valid for. Defaults to 30 minutes.
          </ParamField>

          <ParamField path="resetPasswordTemplateId" type="string">
            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.
          </ParamField>
        </Expandable>
      </ParamField>

      <ParamField path="oauthOptions" type="RNUIOAuthOptions" required>
        The options for OAuth. This is required if `oauth` is present in the products array.

        <Expandable title="properties">
          <ParamField path="providers" type="ProviderOptions[]" required>
            Specifies which OAuth providers to display.

            <Expandable title="properties">
              <ParamField path="type" type="string" required>
                The provider type. Currently we support  `google`, `microsoft`, `apple`, `github`, `gitlab`, `facebook`, `discord`, `salesforce`, `slack`, `amazon`, `bitbucket`, `linkedin`, `coinbase`, `twitch`, `twitter`, `tiktok`, `snapchat`, `figma`, and `yahoo`.
              </ParamField>

              <ParamField path="customScopes" type="array[string]">
                An optional array of scopes that Stytch will request for your application in addition to the base set of scopes required for login.
              </ParamField>

              <ParamField path="providerParams" type="object">
                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).
              </ParamField>
            </Expandable>
          </ParamField>
        </Expandable>
      </ParamField>

      <ParamField path="otpOptions" type="RNUIOTPOptions">
        Configuration options for the One Time Passcode product. This is required if `otp` is present in the products array.

        <Expandable title="properties">
          <ParamField path="methods" type="OTPMethods[]" required>
            The list of OTP methods that should be available. Currently we support `sms`, `whatsapp`, and `email`.
          </ParamField>

          <ParamField path="expirationMinutes" type="number" required>
            The length of time that an OTP code is valid for.
          </ParamField>

          <ParamField path="loginTemplateId" type="string">
            Use a custom template 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 “OTP - Login”.
          </ParamField>

          <ParamField path="signupTemplateId" type="string">
            Use a custom template 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 - Signup”.
          </ParamField>
        </Expandable>
      </ParamField>
    </Expandable>
  </ParamField>

  <ParamField path="config.styles" type="StytchStyles">
    An object that configures the dark and light themes used by the login UI.

    <Expandable title="properties">
      <ParamField path="darkTheme" type="StytchTheme">
        Styles that will be applied on devices in dark mode.

        <Expandable title="properties">
          <ParamField path="backgroundColor" type="string" />

          <ParamField path="primaryTextColor" type="string" />

          <ParamField path="secondaryTextColor" type="string" />

          <ParamField path="disabledTextColor" type="string" />

          <ParamField path="successColor" type="string" />

          <ParamField path="errorColor" type="string" />

          <ParamField path="socialButtonBackgroundColor" type="string" />

          <ParamField path="socialButtonTextColor" type="string" />

          <ParamField path="buttonBackgroundColor" type="string" />

          <ParamField path="buttonTextColor" type="string" />

          <ParamField path="buttonBorderColor" type="string" />

          <ParamField path="buttonBorderRadius" type="number" />

          <ParamField path="disabledButtonBackgroundColor" type="string" />

          <ParamField path="disabledButtonBorderColor" type="string" />

          <ParamField path="disabledButtonTextColor" type="string" />

          <ParamField path="inputBorderRadius" type="number" />

          <ParamField path="inputBorderColor" type="string" />

          <ParamField path="inputBackgroundColor" type="string" />

          <ParamField path="inputTextColor" type="string" />

          <ParamField path="inputPlaceholderTextColor" type="string" />

          <ParamField path="disabledInputBorderColor" type="string" />

          <ParamField path="disabledInputBackgroundColor" type="string" />

          <ParamField path="disabledInputTextColor" type="string" />

          <ParamField path="dialogTextColor" type="string" />

          <ParamField path="hideHeaderText" type="boolean" />

          <ParamField path="warningBackgroundColor" type="string" />

          <ParamField path="warningTextColor" type="string" />
        </Expandable>
      </ParamField>

      <ParamField path="lightTheme" type="StytchTheme">
        Styles that will be applied on devices in light mode.

        <Expandable title="properties">
          <ParamField path="backgroundColor" type="string" />

          <ParamField path="primaryTextColor" type="string" />

          <ParamField path="secondaryTextColor" type="string" />

          <ParamField path="disabledTextColor" type="string" />

          <ParamField path="successColor" type="string" />

          <ParamField path="errorColor" type="string" />

          <ParamField path="socialButtonBackgroundColor" type="string" />

          <ParamField path="socialButtonTextColor" type="string" />

          <ParamField path="buttonBackgroundColor" type="string" />

          <ParamField path="buttonTextColor" type="string" />

          <ParamField path="buttonBorderColor" type="string" />

          <ParamField path="buttonBorderRadius" type="number" />

          <ParamField path="disabledButtonBackgroundColor" type="string" />

          <ParamField path="disabledButtonBorderColor" type="string" />

          <ParamField path="disabledButtonTextColor" type="string" />

          <ParamField path="inputBorderRadius" type="number" />

          <ParamField path="inputBorderColor" type="string" />

          <ParamField path="inputBackgroundColor" type="string" />

          <ParamField path="inputTextColor" type="string" />

          <ParamField path="inputPlaceholderTextColor" type="string" />

          <ParamField path="disabledInputBorderColor" type="string" />

          <ParamField path="disabledInputBackgroundColor" type="string" />

          <ParamField path="disabledInputTextColor" type="string" />

          <ParamField path="dialogTextColor" type="string" />

          <ParamField path="hideHeaderText" type="boolean" />

          <ParamField path="warningBackgroundColor" type="string" />

          <ParamField path="warningTextColor" type="string" />
        </Expandable>
      </ParamField>
    </Expandable>
  </ParamField>
</ParamField>

<ParamField path="callbacks" type="object">
  Optional callbacks that are triggered by various events in the SDK. See more details about the callbacks [here](/docs/api-reference/consumer/mobile-sdks/react-native/prebuilt-ui/callbacks).

  <Expandable title="properties">
    <ParamField path="onEvent" type="(data) => void">
      A callback function that responds to events sent from the SDK.
    </ParamField>

    <ParamField path="onError" type="(data) => void">
      A callback function that responds to errors in the SDK. It is useful for debugging during development and error handling in production.
    </ParamField>
  </Expandable>
</ParamField>

<Panel>
  <RequestExample>
    ```jsx theme={null}
    import React, { useEffect } from 'react';
    import { useStytch, StytchUI, useStytchUser, RNUIProducts, OTPMethods, OAuthProviders } from '@stytch/react-native';

    const Login = ({ navigation }) => {
      const config = {
        productConfig: {
          products: [RNUIProducts.emailMagicLinks, RNUIProducts.oauth, RNUIProducts.passwords, RNUIProducts.otp],
          emailMagicLinksOptions: {},
          oAuthOptions: {
            providers: [OAuthProviders.Google, OAuthProviders.Apple, OAuthProviders.Github],
          },
          otpOptions: {
            methods: [OTPMethods.SMS, OTPMethods.WhatsApp],
            expirationMinutes: 10,
          },
          sessionOptions: {
            sessionDurationMinutes: 30,
          },
          passwordOptions: {},
        },
      };

      const stytch = useStytch();
      const { user } = useStytchUser();

      useEffect(() => {
        if (user) {
          navigation.navigate('Profile');
        }
      }, [user, navigation]);

      return <StytchUI client={stytch} config={config}></StytchUI>;
    };

    export default Login;
    ```
  </RequestExample>
</Panel>