mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
4e467c4026
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com> Co-authored-by: Madison Kennedy <madison@Madisons-MacBook-Pro.local> Co-authored-by: BilalG1 <bg2002@gmail.com>
50 lines
1.3 KiB
Plaintext
50 lines
1.3 KiB
Plaintext
---
|
|
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.
|