# Centered Method Picker block

> Centered login method picker with WebAuthn passkey sign-in and email reveal step

Two-step sign-in: a centered method picker (Google, email, SAML SSO, passkey, backup code) that reveals an email field, with real WebAuthn passkey auth and toasts. Uses shadcn Button, Input, Field, Item and ReUI Alert. Login / auth page.

- Type: Pro block
- Category: [Auth](https://web.dev.reui.io/blocks/application/auth.md)
- Page: https://web.dev.reui.io/blocks/application/auth/auth-17
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/field.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/field.md
- MCP: `get_block("auth-17")`
- Built with: Alert, Button, Field, Input, Item
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A Google, email, SAML SSO, passkey and backup code chooser centered on its own, with no sidebar

## Agent notes

- Serve the `DEFAULT_PASSKEY_OPTIONS_ENDPOINT` and `DEFAULT_PASSKEY_VERIFY_ENDPOINT` routes that `authenticateWithPasskey` POSTs to, or pass your own
- Your verify route must answer `verified` or `success` true; a `redirectTo` in it makes `handlePasskeyLogin` call `window.location.assign`
- The Use backup code button has no `onClick`, and the Sign up and learn more links point at #

## When not to use

- The same 5 option chooser beside a customer logo grid and rotating star quotes: use [Split Method Picker](https://web.dev.reui.io/blocks/application/auth/auth-12.md) (`get_block("auth-12")`)
- One emailed sign-in link plus Google, Apple and GitHub, with no SSO or passkey: use [Centered Magic Link](https://web.dev.reui.io/blocks/application/auth/auth-15.md) (`get_block("auth-15")`)

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/auth-17
```

## About Auth blocks

### When to use

- A full page sign-in screen by password, emailed magic link or passkey, with social provider buttons
- A free trial signup page that opens an account from a work email or a social provider
- A split login layout that pairs the sign-in with a testimonial, a customer logo wall or a photo panel

### When not to use

- A data entry page inside the product, such as intake, invites or sign-in method rules: use the [Form blocks](https://web.dev.reui.io/blocks/application/form.md)
- Security options a signed in admin edits, such as session timeout and access toggles: use the [Settings blocks](https://web.dev.reui.io/blocks/application/settings.md)
- A newsletter or waitlist email capture band on a landing page: use the [CTA blocks](https://web.dev.reui.io/blocks/marketing/cta.md)

### Agent notes

- Each form's submit handler only calls `preventDefault`; call your auth backend from it
- The social and SSO provider buttons have no `onClick`; start your OAuth or SAML redirect from each
- Replace the `AuthLogo` mark in auth-logo.tsx with your own brand logo

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.