# Identifier First Login

> Identifier-first login form for React and Tailwind CSS (shadcn/ui) with email-based SSO routing, social sign-in, and remembered passkeys. One field finds the right sign-in method, with detection after you finish typing and one clear switch to the suggested action. Hints stay quiet while you type; detection waits 400ms after your last edit, or happens immediately on Enter or blur. The same provider button moves into the primary position when your email matches a route. Choosing a social or password action keeps the layout still, with brief in-button progress and disabled alternatives. Includes a last-used badge, expandable password fallback, biometric progress, controlled email and status, accessible method announcements, reduced-motion support, and a 7.2-second interactive demo showing SSO followed by a remembered passkey. Use it on SaaS, workspace, or web app login pages. Authentication remains in your app: connect onContinue(method, email) to your sign-in flow. Client routes are presentation hints; resolve routing and account availability on your server. Supply only locally remembered accounts, never an account directory.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Login, Sign in, Form, Sso, shadcn/ui
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/identifier-first-login

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/identifier-first-login?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/login.md