/
Contact usSee pricingStart building

    About B2B Saas Authentication

    Introduction
    Stytch B2B Basics
    Integration Approaches
      Full-stack overview
      Frontend (pre-built UI)
      Frontend (headless)
      Backend
    Next.js
      Routing
      Authentication
      Sessions
    Migrations
      Overview
      Reconciling data models
      Migrating user data
      Additional migration considerations
      Zero-downtime deployment
      Defining external IDs for members
      Exporting from Stytch
    Custom Domains
      Overview

    Authentication

    Single Sign On
    • Resources

      • Overview
        External SSO Connections
        Standalone SSO
    • Integration Guides

      • Start here
        Backend integration guide
        Headless integration guide
        Pre-built UI integration guide
    OAuth
    • Resources

      • Overview
        Authentication flows
        Identity providers
        Google One Tap
        Provider setup
    • Integration Guides

      • Start here
        Backend integration
        Headless frontend integration
        Pre-built UI frontend integration
    Connected AppsBeta
      Setting up Connected Apps
      About Remote MCP Servers
    • Resources

      • Integrate with AI agents
        Integrate with a remote MCP server
    Sessions
    • Resources

      • Overview
        JWTs vs Session Tokens
        How to use Stytch JWTs
        Custom Claims
    • Integration Guides

      • Start here
        Backend integration
        Frontend integration
    Email OTP
      Overview
    Magic Links
    • Resources

      • Overview
        Email Security Scanner Protections
    • Integration Guides

      • Start here
        Backend integration
        Headless frontend integration
        Pre-built UI frontend integration
    Multi-Factor Authentication
    • Resources

      • Overview
    • Integration Guides

      • Start here
        Backend integration
        Headless frontend integration
        Pre-built UI frontend integration
    Passwords
      Overview
      Strength policies
    UI components
      Overview
      Implement the Discovery flow
      Implement the Organization flow
    DFP Protected Auth
      Overview
      Setting up DFP Protected Auth
      Handling challenges
    M2M Authentication
      Authenticate an M2M Client
      Rotate client secrets
      Import M2M Clients from Auth0

    Authorization & Provisioning

    RBAC
    • Resources

      • Overview
        Stytch Resources & Roles
        Role assignment
    • Integration Guides

      • Start here
        Backend integration
        Headless frontend integration
    SCIM
    • Resources

      • Overview
        Supported actions
    • Integration Guides

      • Using Okta
        Using Microsoft Entra
    Organizations
      Managing org settings
      JIT Provisioning

    Testing

    E2E testing
    Sandbox values
Get support on SlackVisit our developer forum

Contact us

B2B Saas Authentication

/

Guides

/

Authentication

/

OAuth

/

Integration Guides

/

Pre-built UI frontend integration

Pre-built UI Frontend Integration of OAuth

In Stytch’s B2B product there are two different versions of the OAuth authentication flow:

  1. Discovery Authentication: used for self-serve Organization creation or login prior to knowing the Organization context
  2. Organization-specific Authentication: used when you already know the Organization that the end user is trying to log into
Pre-built UI integration of discovery OAuthDiscovery OAuth sequence when UI component is rendered on Discovery Redirect URLPre-built UI integration of organization OAuthOrganization OAuth sequence when UI component is rendered on Signup and Login Redirect URLs

This guide walks through how to offer OAuth for both scenarios using Stytch's frontend SDK with pre-built UI.

Steps

1
Complete config steps

If you haven't done so already:

  1. Complete the steps in the OAuth Integration Guide Start Here
  2. Enable the Frontend SDKs in your Stytch Dashboard
  3. In the Frontend SDK config, enable Create Organizations under "Enabled Methods"

2
Add OAuth to UI Config

In order to surface the OAuth providers that you wish to support in the UI, you can add them to the UI config defined for the discovery and organization auth flows.

import React from 'react';
import { StytchB2B } from '@stytch/react/b2b';

const Login = () => {
  const style = {
    fontFamily: 'Arial',
  };

  // Example config for the Discovery auth flow, hosted on a generic login page
  var discoveryConfig = {
    authFlowType: "Discovery",
    products: ['oauth'],
    oauthOptions: {
      providers: [{ type: 'google' }, { type: 'microsoft' }]
    },
  };

 // Example config for the Organization auth flow, hosted on an
  // Organization-specific login page
  var organizationConfig = {
    authFlowType: "Organization",
    products: ['oauth'],
    oauthOptions: {
      providers: [{ type: 'google' }, { type: 'microsoft' }]
    },
  };

  return (
    <div>
      // Choose either the discoveryConfig or the organizationConfig
      <StytchB2B config={discoveryConfig} styles={style} callbacks={callbacks} />
    </div>
  );
};

export default Login;
<!DOCTYPE html>
<html lang="en">
  <body>
    <div class="app">
      <div>
        <div id="stytch-sdk"></div>
      </div>
    </div>
    <script>
      import { StytchB2BUIClient } from '@stytch/vanilla-js/b2b';
      const stytch = new StytchB2BUIClient('PUBLIC_TOKEN');
      var styles = {
        fontFamily: 'Arial',
      };

      // Example config for the Discovery auth flow, to be hosted on a
      // generic login page
      var discoveryConfig = {
        authFlowType: "Discovery",
        products: ['oauth'],
        oauthOptions: {
          providers: [{ type: 'google' }, { type: 'microsoft' }]
        },
      };

      // Example config for the Organization auth flow, to be hosted on an
      // Organization-specific login page
      var organizationConfig = {
        authFlowType: "Organization",
        products: ['oauth'],
        oauthOptions: {
          providers: [{ type: 'google' }, { type: 'microsoft' }]
        },
      };

      stytch.mount({
        elementId: "#stytch-sdk",
        styles,
        callbacks,
          // Choose either the discoveryConfig or the organizationConfig
        config: discoveryConfig,
      });
    </script>
  </body>
</html>

3
Render UI Component on Redirect URL

Render the Stytch UI component on the Redirect URL(s) that you specified in the Stytch Dashboard during the initial setup steps.

When rendered, the UI component will automatically handle the redirect from Stytch based on the stytch_token_type, either prompting the user with the discovered organizations view and handling how they choose to proceed or logging them in directly.

4
Run your app and test it out

Steps

1.

Complete config steps

2.

Add OAuth to UI Config

3.

Render UI Component on Redirect URL

4.

Run your app and test it out