> ## 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.
# Adding OAuth to Stytch Login
> Integrate OAuth providers with Stytch's pre-built login UI for Consumer Authentication.
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](/consumer-auth/authentication/oauth/adding-to-custom-auth-flow).
## Prerequisites
If you haven't done so already:
1. Complete the steps in the [OAuth provider setup guide](/consumer-auth/authentication/oauth/adding-providers/google-oauth).
2. Enable the Frontend SDKs in [your Stytch Dashboard](https://stytch.com/dashboard/sdk-configuration) and add your application's domain to **Authorized Domains**.
3. Configure your [Redirect URLs](https://stytch.com/dashboard/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.
```jsx React icon="react" theme={null}
import { Products, StytchLogin } from "@stytch/react";
const config = {
products: [Products.oauth],
oauthOptions: {
providers: [{ type: "google" }, { type: "microsoft" }],
},
};
export const Login = () => {
return ;
};
```
```jsx Next.js icon="triangle" theme={null}
import { Products, StytchLogin } from "@stytch/nextjs";
const config = {
products: [Products.oauth],
oauthOptions: {
providers: [{ type: "google" }, { type: "microsoft" }],
},
};
export const Login = () => {
return ;
};
```
```html Vanilla JS icon="square-js" theme={null}
```
You can add multiple OAuth providers by including additional provider objects in the `providers` array. See the [OAuth providers guide](/consumer-auth/authentication/oauth/adding-providers/google-oauth) 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
Learn how to customize the appearance and behavior of the pre-built login UI.
Configure additional OAuth providers like GitHub, Slack, or Apple.