# Shadcn Auth blocks

> Login, register, forgot password, and two-factor authentication page layouts.

- Type: Pro blocks (Application)
- Page: https://web.dev.reui.io/blocks/application/auth
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/field.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/field.md
- Blocks: 20
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## Third-party libraries

- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 7 of 20 blocks (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), used by 2 of 20 blocks
- Embla Carousel v8: [API reference](https://www.embla-carousel.com/docs/v8/api), [docs](https://www.embla-carousel.com/docs/v8/get-started/react), used by 1 of 20 blocks
- Embla Carousel Autoplay v8: [API reference](https://www.embla-carousel.com/docs/v8/plugins/autoplay), [docs](https://www.embla-carousel.com/docs/v8/plugins), used by 1 of 20 blocks

## Blocks

- [Photo Split Login](https://web.dev.reui.io/blocks/application/auth/auth-1.md): Split-screen login page with animated grid backdrop and editorial image panel. Best for a password login beside a tall photo, over grid squares that light up around the form but never under it.
- [Customer Quotes Login](https://web.dev.reui.io/blocks/application/auth/auth-2.md): Split-screen login with an autoplay founder testimonial carousel and Trustpilot rating panel. Best for a password login beside a dark proof panel that autoplays 6 customer quotes above a Trustpilot rating.
- [Magic Link Reviews](https://web.dev.reui.io/blocks/application/auth/auth-3.md): Split-screen magic-link sign-in with testimonial and trust-brand sidebar on a dot-grid canvas. Best for a magic link sign-in beside a twinkling dot field holding 1 quote with 5 stars and 4 trust wordmarks.
- [Photo Magic Link](https://web.dev.reui.io/blocks/application/auth/auth-13.md): Split-screen magic-link sign-in with left image sidebar and social login buttons. Best for a magic link sign-in with a sticky full-height photo on the left, held in a Frame panel.
- [Framed Password Login](https://web.dev.reui.io/blocks/application/auth/auth-4.md): Framed password sign-in card with email or username, social provider row, and footer nav. Best for a centered password card on grain noise with a 3 provider row and Privacy, Terms and Status footer links.
- [Workspace Sign-In](https://web.dev.reui.io/blocks/application/auth/auth-14.md): Split-screen workspace sign-in with animated stacked media panel and social SSO. Best for a work email and password login beside a deck of 3 photos that reshuffles every 5.6 seconds, with an invite link.
- [Free Trial Signup](https://web.dev.reui.io/blocks/application/auth/auth-5.md): Split-screen marketing trial signup page with animated gradient blob background and social login. Best for a 14-day trial signup with a marketing headline, Google and GitHub first, a terms agreement line and a 6 logo strip.
- [Magic Link Logos](https://web.dev.reui.io/blocks/application/auth/auth-10.md): Split magic-link sign-in with a framed testimonial and customer logo wall trust sidebar. Best for a magic link sign-in with a sticky right Frame panel of gradient stars, 1 quote with a company mark and 6 logos.
- [Founder Story Login](https://web.dev.reui.io/blocks/application/auth/auth-6.md): Split-screen login with social OAuth and testimonial sidebar over an animated grid background. Best for a password login beside a founder photo story with a Read more button and a 6 logo customer grid.
- [Split Testimonial Login](https://web.dev.reui.io/blocks/application/auth/auth-11.md): Split-screen login with testimonial sidebar and animated dot backdrop. Best for a password login inside page-wide hairline guides with corner squares, beside a twinkling dot quote panel.
- [Work Email Continue](https://web.dev.reui.io/blocks/application/auth/auth-16.md): Full-page sign-in with app header, SSO and email-continue form, and customer logo trust strip footer. Best for a work email Continue step under Google, GitHub and Single Sign-On buttons, with a customer logo wall footer.
- [Magic Link Card](https://web.dev.reui.io/blocks/application/auth/auth-7.md): Blueprint-framed passwordless sign-in card with magic-link email and customer trust logos. Best for an always dark magic link card with dashed borders, plus sign corners and an 8 logo grid inside it.
- [Split Method Picker](https://web.dev.reui.io/blocks/application/auth/auth-12.md): Split login method picker with passkey, SAML SSO, and a framed brand-logo testimonial sidebar. Best for a 5 method picker with a WebAuthn passkey flow and toasts, beside a logo grid and rotating quotes.
- [Photo Backdrop Login](https://web.dev.reui.io/blocks/application/auth/auth-8.md): Centered Frame login card over a softened photo backdrop with social provider sign-in. Best for a centered password card over a softened full-bleed photo, under a header with a Create an account pill.
- [Rotating Quotes Login](https://web.dev.reui.io/blocks/application/auth/auth-9.md): Split magic-link sign-in with an animated brand-logo grid sidebar and rotating star testimonial. Best for a magic link sign-in beside a grid where brand logos fade in 4 at a time under 6 rotating quotes.
- [Invite-Only Sign-In](https://web.dev.reui.io/blocks/application/auth/auth-19.md): Passwordless workspace sign-in page with magic-link work email and Google plus GitHub login. Best for an invite-only workspace sign-in Card with Google and GitHub first and a mail icon email field below.
- [Centered Magic Link](https://web.dev.reui.io/blocks/application/auth/auth-15.md): Centered magic-link email login with logo, social sign-in buttons, and legal footer. Best for a bare magic link page with the logo on top and a legal consent, copyright, Docs and Support footer.
- [Centered Method Picker](https://web.dev.reui.io/blocks/application/auth/auth-17.md): Centered login method picker with WebAuthn passkey sign-in and email reveal step. Best for a Google, email, SAML SSO, passkey and backup code chooser centered on its own, with no sidebar.
- [Social Proof Login](https://web.dev.reui.io/blocks/application/auth/auth-18.md): Split-screen sign-in with testimonial sidebar, social login, and password show/hide toggle. Best for a password login with a left testimonial panel of 5 stars, 1 quote and 4 brand wordmarks on animated grid squares.
- [Centered Password Login](https://web.dev.reui.io/blocks/application/auth/auth-20.md): Centered sign-in card with Google and Apple buttons, password visibility toggle, and email login. Best for a plain centered password card that puts Google and Apple above the fields, with no backdrop or sidebar.

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.