Skip to main content
This guide walks through adding OAuth to Stytch’s pre-built login UI. If you want a fully custom OAuth flow, see Adding OAuth to a custom auth flow.

​
Prerequisites

If you haven’t done so already:
  1. Complete the steps in the OAuth provider setup guide.
  2. Enable the Frontend SDKs in your Stytch Dashboard and add your application’s domain to Authorized Domains.
  3. Configure your Redirect URLs.

​
Add OAuth providers to your UI config

To surface the OAuth providers you want to support in the UI, add them to the oauthOptions.providers array in your config. 
import { Products, StytchLogin } from "@stytch/react";

const config = {
  products: [Products.oauth],
  oauthOptions: {
    providers: [{ type: "google" }, { type: "microsoft" }],
  },
};

export const Login = () => {
  return <StytchLogin config={config} />;
};
You can add multiple OAuth providers by including additional provider objects in the providers array. See the OAuth providers guide for provider-specific setup steps.

​
Render the login UI

Render the Stytch Login UI on the Redirect URL(s) you configured in the Stytch Dashboard. When rendered, the UI component will automatically handle the OAuth redirect and complete the authentication flow.

​
Test your integration

  1. Navigate to your login page.
  2. Click an OAuth provider button (e.g., “Continue with Google”).
  3. Complete the OAuth flow with the provider.
  4. Verify that you’re redirected back to your application and authenticated.
Use test accounts for your OAuth providers during development to avoid affecting production data.

​
Next steps

Customize the UI

Learn how to customize the appearance and behavior of the pre-built login UI.

Add more providers

Configure additional OAuth providers like GitHub, Slack, or Apple.