Sign In
Let a returning user authenticate with the least friction your security and audience allow.
Sign in to Acme
Use a provider or your email to continue.
or
Example result — your output may vary with your context and the prompt you pass.
# Sign In: Social First
## Context
Flexnative UI intent — a reference solution from the shadcn/ui registry (@flx). The intent frames the problem; the decision is one approach to it.
## Problem
Let a returning user authenticate with the least friction your security and audience allow.
## Decision
- Best for: Consumer and prosumer apps where most users already have a Google, Apple, or GitHub account. Fewest steps to get in.
- Trade-off: Leans on third-party providers and raises privacy/consent questions; always keep an email fallback.
## Registry Item
@flx/sign-in-1
## Stack
- UI: shadcn/ui
- Styling: Tailwind CSS
- shadcn components: Button, Input, Label
## Registry Source
https://ui.flexnative.com/r/sign-in-1.json
## Preview
https://ui.flexnative.com/intents/sign-in#1
## Reference Implementation
```tsx
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
function GoogleIcon() {
return (
<svg viewBox="0 0 24 24" className="size-4" aria-hidden>
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"
/>
<path
fill="#FBBC05"
d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84Z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06L5.84 9.9C6.71 7.31 9.14 5.38 12 5.38Z"
/>
</svg>
)
}
function AppleIcon() {
return (
<svg viewBox="0 0 24 24" className="size-4 fill-current" aria-hidden>
<path d="M16.36 12.65c-.02-2.1 1.71-3.1 1.79-3.15-.97-1.43-2.49-1.62-3.03-1.64-1.29-.13-2.52.76-3.18.76-.65 0-1.66-.74-2.73-.72-1.4.02-2.7.82-3.42 2.08-1.46 2.54-.37 6.3 1.05 8.36.69 1.01 1.52 2.14 2.6 2.1 1.04-.04 1.44-.67 2.7-.67 1.26 0 1.61.67 2.71.65 1.12-.02 1.83-1.03 2.51-2.04.79-1.17 1.12-2.3 1.13-2.36-.02-.01-2.17-.83-2.2-3.3ZM14.3 6.25c.57-.69.96-1.65.85-2.61-.83.03-1.83.55-2.42 1.24-.53.61-1 1.59-.87 2.53.92.07 1.87-.47 2.44-1.16Z" />
</svg>
)
}
function GithubIcon() {
return (
<svg viewBox="0 0 24 24" className="size-4 fill-current" aria-hidden>
<path d="M12 1a11 11 0 0 0-3.48 21.44c.55.1.75-.24.75-.53v-1.86c-3.06.67-3.71-1.48-3.71-1.48-.5-1.27-1.22-1.61-1.22-1.61-1-.69.07-.67.07-.67 1.1.08 1.69 1.14 1.69 1.14.98 1.69 2.57 1.2 3.2.92.1-.72.39-1.2.7-1.48-2.44-.28-5.01-1.22-5.01-5.44 0-1.2.43-2.18 1.13-2.95-.11-.28-.49-1.4.11-2.92 0 0 .92-.3 3.02 1.13a10.4 10.4 0 0 1 5.5 0c2.1-1.43 3.02-1.13 3.02-1.13.6 1.52.22 2.64.11 2.92.7.77 1.13 1.75 1.13 2.95 0 4.23-2.58 5.16-5.03 5.43.4.34.75 1.02.75 2.06v3.05c0 .3.2.64.76.53A11 11 0 0 0 12 1Z" />
</svg>
)
}
export function SignIn1() {
return (
<Card>
<CardHeader>
<CardTitle>Sign in to Acme</CardTitle>
<CardDescription>
Use a provider or your email to continue.
</CardDescription>
</CardHeader>
<CardContent>
<div className="mt-5 flex flex-col gap-2">
<Button variant="outline" className="justify-center gap-2 md:w-full">
<GoogleIcon />
<span className="truncate">Continue with Google</span>
</Button>
<Button variant="outline" className="w-full justify-center gap-2">
<AppleIcon />
<span className="truncate">Continue with Apple</span>
</Button>
<Button variant="outline" className="w-full justify-center gap-2">
<GithubIcon />
<span className="truncate">Continue with GitHub</span>
</Button>
</div>
<div className="my-5 flex items-center gap-3">
<span className="bg-border h-px flex-1" />
<span className="text-muted-foreground text-[11px] uppercase">
or
</span>
<span className="bg-border h-px flex-1" />
</div>
<div className="flex flex-col gap-1.5">
<Label htmlFor="social-email" className="text-xs">
Email
</Label>
<Input
id="social-email"
type="email"
placeholder="you@acme.com"
autoComplete="email"
/>
</div>
<Button className="mt-3 w-full">Continue</Button>
</CardContent>
</Card>
)
}
```Paste into your AI tool and adapt it to your context.
Other ways
Reach for these when the context shifts. Each is copyable too.
Sign in with email
We'll email you a secure link, no password to remember.
The link expires in 10 minutes.
Magic Link
Sign in with a passkey
Use Face ID, Touch ID, or a security key. Nothing to remember.
Phishing-resistant. Your key never leaves this device.
Passkey
Sign in with phone
We'll text you a 6-digit code to verify your number.
+1
Phone & OTP
Acme
Where teams ship together.
JDMKAR
Join 40,000+ teams on AcmeSplit Screen