/
Contact usSee pricingStart building
    Overview
    Installation
    Changelog

    Pre-built UI

    StytchLogin
      UI Configuration
      UI Callbacks
      Text Customization
      Component Playground
    StytchPasswordReset
    StytchPasskeyRegistration
    IdentityProvider
      UI Configuration
      UI Callbacks

    Headless

    Users
      Get user
      Update user
      Delete authentication factors
    Email Magic Links
      Send
      Login or create
      Authenticate
    OAuth
      Start
      Google One Tap
      Authenticate
    Passwords
      Create
      Authenticate
      Reset by Email Start
      Reset by Email
      Reset by Existing Password
      Reset by Session
      Strength Check
    One-Time Passcodes (OTP)
      Login or create via SMS
      Send via SMS
      Login or create via Email
      Send via Email
      Login or create via WhatsApp
      Send via WhatsApp
      Authenticate
    Time-Based One-Time Passcodes (TOTP)
      Create
      Authenticate
      Get Recovery Codes
      Recover
    Session Management
      Get Session
      Authenticate Session
      Revoke Session
      Update Session
      Get Tokens
      Attest Session
      Exchange Access Token
    Passkeys & WebAuthn
      Register
      Authenticate
      Update
      Browser supports autofill
    Crypto Wallets
      Authenticate
      Authenticate Start
    Impersonation
      Authenticate
    RBAC
      Is Authorized
      Permissions
    Connected Apps
      Get Connected Apps
      Revoke Connected App
      Start OAuth Authorization
      Submit OAuth Authorization

    More Resources

    Cookies & session management
    SWR & caching
    TypeScript
    User privacy measures
    Multi-factor authentication
    Next.js
    CAPTCHA
Get support on SlackVisit our developer forum

Contact us

Consumer Authentication

/

Frontend SDKs

/

Headless

/

OAuth

/

Start

Start

The oauth.$provider.start() methods start OAuth flows by redirecting the browser to one of Stytch's oauth start endpoints. The method will also generate a PKCE code_verifier and store it in local storage on the device (See the PKCE OAuth guide for details). If your application is configured to use a custom subdomain with Stytch, it will be used automatically.

  • oauth.amazon.start()
  • oauth.apple.start()
  • oauth.bitbucket.start()
  • oauth.coinbase.start()
  • oauth.discord.start()
  • oauth.facebook.start()
  • oauth.github.start()
  • oauth.gitlab.start()
  • oauth.google.start()
  • oauth.linkedin.start()
  • oauth.microsoft.start()
  • oauth.salesforce.start()
  • oauth.slack.start()
  • oauth.twitch.start()
  • oauth.yahoo.start()

Method parameters


Configuration object

Additional configuration.

login_redirect_url string

The URL Stytch redirects to after the OAuth flow is completed for a user that already exists. This URL should be a route in your application which will run oauth.authenticate (see below) and finish the login.

The URL must be configured as a Login URL in the Redirect URL page. If the field is not specified, the default Login URL will be used.

signup_redirect_url string

The URL Stytch redirects to after the OAuth flow is completed for a user that does not yet exist. This URL should be a route in your application which will run oauth.authenticate (see below) and finish the login.

The URL must be configured as a Login URL in the Redirect URL page. If the field is not specified, the default Login URL will be used.

custom_scopes string

Include a space separated list of custom scopes that you'd like to include. Note that this list must be URL encoded, i.e. the spaces must be expressed as %20.

provider_params object

An object containing parameters that you'd like to pass along to the OAuth provider. For example, some OAuth providers support a login_hint parameter that allows you to pre-populate the OAuth login flow with a suggested email address. We recommend consulting each OAuth provider's documentation for a list of supported parameters. The keys in the provider_params object are the parameter names (like login_hint), and their values are the data that you'd like to pass along for each parameter (like example_hint@stytch.com).

import { useStytch } from '@stytch/react';

export const Login = () => {
  const stytch = useStytch();

  const startOAuth = () =>
    stytch.oauth.google.start({
      login_redirect_url: 'https://example.com/authenticate',
      signup_redirect_url: 'https://example.com/authenticate',
      custom_scopes: [
        'https://www.googleapis.com/auth/documents.readonly',
        'https://www.googleapis.com/auth/drive.readonly',
      ],
      provider_params: {
        login_hint: 'example_hint@stytch.com',
      },
    });

  return <button onClick={startOAuth}>Log in with Google</button>;
};