{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "login-oauth",
"title": "Login with OAuth providers",
"description": "Provider-first sign-in — Google, GitHub, and Apple buttons above an email fallback.",
"registryDependencies": [
"input",
"label",
"button",
"separator"
],
"files": [
{
"path": "registry/blocks/login-oauth.tsx",
"content": "'use client'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\n\n/**\n * Provider-first sign-in — the shape you need when identity comes from Google,\n * GitHub or Apple rather than a password you store. The provider buttons are\n * the primary path; the email field below the rule is the fallback, not the\n * headline (delete it for provider-only apps).\n *\n * The marks are inlined rather than pulled from the icon set: brand logos are\n * trademarked artwork on their own grids, not UI glyphs, and each provider's\n * brand guidelines expect its own colour. Google keeps its four-colour mark;\n * GitHub and Apple are monochrome by their own guidelines and take\n * currentColor so they invert correctly in Dusk.\n */\n\nfunction GoogleMark() {\n return (\n \n )\n}\n\nfunction GitHubMark() {\n return (\n \n )\n}\n\nfunction AppleMark() {\n return (\n \n )\n}\n\n/** Provider-first sign-in — Google, GitHub, and Apple buttons above an email fallback. */\nexport function LoginOauth() {\n return (\n
\n
\n \n Q\n \n
Sign in to Quill
\n
\n Use the account you already have.\n
\n
\n\n
\n \n \n \n
\n\n
\n \n or\n \n
\n\n e.preventDefault()}\n >\n
\n \n \n
\n \n \n\n
\n By continuing you agree to the Terms and Privacy Policy.\n
\n
\n )\n}\n",
"type": "registry:component",
"target": "components/quill/login-oauth.tsx"
}
],
"meta": {
"intent": [
"auth"
],
"use_when": "Identity comes from a provider (Google, GitHub, Apple) rather than a password you store.",
"not_for": "this is account creation, not sign-in — signup-social also leads with OAuth providers → signup-social; you store first-party passwords and don't want a provider-first order at all → login; you don't have OAuth providers configured and just need a single email field → login-minimal"
},
"docs": "Provider-first sign-in — Google, GitHub, and Apple buttons above an email fallback. Do: Treat the provider buttons as the primary path; keep the email form below the rule as a fallback, not the headline. Don't: Give the email field equal visual weight to the provider buttons when most users have a provider account. Do: Keep provider marks as their official inlined artwork, with GitHub and Apple taking currentColor so they invert correctly in Dusk. Don't: Restyle a provider mark to match your palette — that breaks the brand guidelines you agree to by using their sign-in. Use signup-social when this is account creation, not sign-in — signup-social also leads with OAuth providers. Use login when you store first-party passwords and don't want a provider-first order at all. Use login-minimal when you don't have OAuth providers configured and just need a single email field.",
"categories": [
"auth"
],
"type": "registry:block"
}