Sign In

# 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>
  )
}
```