# Split Method Picker block

> Split login method picker with passkey, SAML SSO, and a framed brand-logo testimonial sidebar

Login with Google, email, WebAuthn passkey, SAML SSO, and backup code, a two-step email reveal, and a framed sidebar with an animated brand-logo grid and rotating star testimonials. ReUI Alert; shadcn Button, Field, Input, Avatar. Sign-in, SSO.

- Type: Pro block
- Category: [Auth](https://web.dev.reui.io/blocks/application/auth.md)
- Page: https://web.dev.reui.io/blocks/application/auth/auth-12
- 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-12")`
- Built with: Alert, Avatar, Button, Field, Input, Item
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A 5 method picker with a WebAuthn passkey flow and toasts, beside a logo grid and rotating quotes

## Agent notes

- `authenticateWithPasskey` posts to `DEFAULT_PASSKEY_OPTIONS_ENDPOINT` and `DEFAULT_PASSKEY_VERIFY_ENDPOINT`; serve both or pass your own
- Use backup code in `LoginForm` has no `onClick`; wire it to your recovery code step
- Replace the 18 grid logos in `AUTH12_SIDEBAR_BRANDS` and the 6 quotes in `AUTH12_SIDEBAR_TESTIMONIALS`

## When not to use

- The same method picker alone in the center, with no quote panel or page guides: use [Centered Method Picker](https://web.dev.reui.io/blocks/application/auth/auth-17.md) (`get_block("auth-17")`)
- A step that takes a one-time code typed into separate digit slots: use [Input Otp](https://web.dev.reui.io/components/input-otp.md) (`get_component("input-otp")`)

## Third-party libraries

- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

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

## 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.