---
title: "<OAuthButton />"
---

Renders a customized OAuth button for various providers to initiate sign-in or sign-up processes.

<div className="stack-white-image-showcase stack-50h">
  <img src="/imgs/oauth-button.png" alt="OAuthButton" className="stack-50h" />
</div>

Note that if the specific OAuth provider is disabled in the dashboard, this component will still render. However, attempting to use it will result in an error being thrown.

For more information, please refer to the [custom pages guide](../customization/custom-pages.mdx).

## Props

<PropTable
  props={[
    {
      name: "provider",
      type: "string",
      description: "The name of the OAuth provider (e.g., 'google', 'github', 'facebook')."
    },
    {
      name: "type",
      type: "'sign-in' | 'sign-up'",
      description: "Determines whether the button text is for signing in or signing up. (both are the same in terms of functionality)"
    }
  ]}
/>

## Example

```tsx
import { OAuthButton } from '@stackframe/stack';

export default function Page() {
  return (
    <div>
      <h1>Sign In</h1>
      <OAuthButton provider="google" type="sign-in" />
      <OAuthButton provider="github" type="sign-up" />
    </div>
  );
}

```

The `OAuthButton` component automatically styles itself based on the provided OAuth provider and handles the sign-in or sign-up process when clicked.