Start OAuth Flow - Stytch Docs

import { useStytchB2BClient } from '@stytch/react/b2b';

export const GoogleLogin = () => {
  const stytch = useStytchB2BClient();

  const startOAuth = () => {
    stytch.oauth.google.start({
      organization_id: 'organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931',
      login_redirect_url: 'https://example.com/authenticate',
      signup_redirect_url: 'https://example.com/authenticate',
    });
  };

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

import { useStytchB2BClient } from '@stytch/react/b2b';

export const GoogleLogin = () => {
  const stytch = useStytchB2BClient();

  const startOAuth = () => {
    stytch.oauth.google.start({
      organization_id: 'organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931',
      login_redirect_url: 'https://example.com/authenticate',
      signup_redirect_url: 'https://example.com/authenticate',
    });
  };

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

import { useStytchB2BClient } from '@stytch/react/b2b';

export const GoogleLogin = () => {
  const stytch = useStytchB2BClient();

  const startOAuth = () => {
    stytch.oauth.google.start({
      organization_id: 'organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931',
      login_redirect_url: 'https://example.com/authenticate',
      signup_redirect_url: 'https://example.com/authenticate',
    });
  };

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

oauth.$provider.start() kicks off an OAuth flow by redirecting the browser to one of Stytch’s OAuth Start endpoints. One of organization_id or slug is required to specify which organization the user is trying to access. If the organization that the user is trying to access is not yet known, use the oauth.$provider.discovery.start() method instead. 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. Use one of the following methods to start an OAuth flow:

oauth.google.start()
oauth.microsoft.start()
oauth.hubspot.start()
oauth.slack.start()
oauth.github.start()

Parameters

organization_id

string

The id of the Organization to start the OAuth flow for.One of either organization_id or slug is required.

slug

string

The unique URL slug of the Organization. The slug only accepts alphanumeric characters and the following reserved characters: - . _ ~. Must be between 2 and 128 characters in length.One of either organization_id or slug is required.

The URL Stytch redirects to after the OAuth flow is completed for a Member 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.

The URL Stytch redirects to after the OAuth flow is completed for a Member 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 Signup URL in the Redirect URL page. If the field is not specified, the default Signup URL will be used.

custom_scopes

string

A space-separated list of custom scopes that you’d like to include. Note that this list must be URL encoded (e.g. 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).

⌘I

​Parameters

Parameters