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

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.

Props

• provider: string - The name of the OAuth provider (e.g., ‘google’, ‘github’, ‘facebook’).
• type: 'sign-in' | 'sign-up' - Determines whether the button text is for signing in or signing up. (both are the same in terms of functionality)

Example

1
import { OAuthButton } from '@stackframe/stack';
2
3
export default function Page() {
4
  return (
5
    <div>
6
      <h1>Sign In</h1>
7
      <OAuthButton provider="google" type="sign-in" />
8
      <OAuthButton provider="github" type="sign-up" />
9
    </div>
10
  );
11
}

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