> ## 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 with Stytch's pre-built UI components.
export const organization = "Represents an instance or tenant in your application, typically mapping to each of your top-level customers.";
export const discovery = "Centralized login flow that allows users to view all Organizations they have access to, including pending invites and Organizations they are allowed to automatically join based on their verified email domain.";
## Prerequisites
If you haven't done so already:
1. Complete the steps in the [OAuth configuration guide](/multi-tenant-auth/authentication/oauth/configuring-oauth-for-your-project)
2. Enable the Frontend SDKs in [your Stytch Dashboard](https://stytch.com/dashboard/sdk-configuration) and enable Create Organizations under "Enabled Methods."
## Add OAuth providers to your UI config
To surface the OAuth providers you wish to support in the UI, add them to the UI config for your authentication flow.
```jsx React icon="react" theme={null}
import { B2BProducts, StytchB2B } from '@stytch/react/b2b';
const Login = () => {
const config = {
authFlowType: "Discovery", // or "Organization"
products: [B2BProducts.oauth],
oauthOptions: {
providers: [{ type: 'google' }, { type: 'microsoft' }]
},
};
return ;
};
export default Login;
```
```jsx Next.js icon="triangle" theme={null}
import { B2BProducts, StytchB2B } from '@stytch/nextjs/b2b';
const Login = () => {
const config = {
authFlowType: "Discovery", // or "Organization"
products: [B2BProducts.oauth],
oauthOptions: {
providers: [{ type: 'google' }, { type: 'microsoft' }]
},
};
return ;
};
export default Login;
```
```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](/multi-tenant-auth/authentication/oauth/adding-providers/google-oauth) for more information on configuring specific providers.
## Render the UI component
Render the Stytch UI component on the Redirect URL(s) that you specified in the [Stytch Dashboard](https://stytch.com/dashboard/redirect-urls) during the configuration steps.
When rendered, the UI component will automatically:
* Handle the OAuth redirect from Stytch based on the `stytch_token_type`
* For Discovery flows, prompt the user with their discovered organizations and handle their selection
* For Organization-specific flows, log the user in directly
## Test your integration
Start your application and test the OAuth flow:
1. Navigate to your login page
2. Click on 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 UI
Configure additional OAuth providers like GitHub, Slack, or HubSpot