For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- Security options a signed in admin edits, such as session timeout and access toggles: use the Settings blocks
- A newsletter or waitlist email capture band on a landing page: use the CTA blocks
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
AuthLogomark in auth-logo.tsx with your own brand logo
Third-party API docs
- Motion v12: API reference, docs, used by 7 of 20 blocks (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: API reference, docs, used by 2 of 20 blocks
- Embla Carousel v8: API reference, docs, used by 1 of 20 blocks
- Embla Carousel Autoplay v8: API reference, docs, used by 1 of 20 blocks
https://web.dev.reui.io/blocks/application/auth.mdsearch({ query: "auth", type: "block", category: "auth" })Every Sign-in Method, Not Just Email and Password
Authentication is where most component libraries stop at a single email and password card. That holds up until the enterprise tier asks for SAML, the security team asks for passkeys, and growth asks for a magic link. This collection is organised around that spread of methods rather than around one visual treatment of one form.
The forms are built on shadcn Field, Input, InputGroup, Button, and Separator, with ReUI Frame, Card, Alert, Avatar, and Carousel shaping the surface around them. Password fields ship with a show and hide toggle, and the method pickers reveal the email step only once a method is chosen.
Sign-in is a conversion page, so the second column is not filler. Founder testimonial carousels, a Trustpilot rating panel, star-rated quotes, customer logo walls, and brand logos animating into a grid are part of the block, which means the trust half of the screen is designed instead of left as an empty gradient.
All Auth Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Photo Split Login Split-screen login page with animated grid backdrop and editorial image panel
- Customer Quotes Login Split-screen login with an autoplay founder testimonial carousel and Trustpilot rating panel
- Magic Link Reviews Split-screen magic-link sign-in with testimonial and trust-brand sidebar on a dot-grid canvas
- Photo Magic Link Split-screen magic-link sign-in with left image sidebar and social login buttons
- Framed Password Login Framed password sign-in card with email or username, social provider row, and footer nav
- Workspace Sign-In Split-screen workspace sign-in with animated stacked media panel and social SSO
- Free Trial Signup Split-screen marketing trial signup page with animated gradient blob background and social login
- Magic Link Logos Split magic-link sign-in with a framed testimonial and customer logo wall trust sidebar
- Founder Story Login Split-screen login with social OAuth and testimonial sidebar over an animated grid background
- Split Testimonial Login Split-screen login with testimonial sidebar and animated dot backdrop
- Work Email Continue Full-page sign-in with app header, SSO and email-continue form, and customer logo trust strip footer
- Magic Link Card Blueprint-framed passwordless sign-in card with magic-link email and customer trust logos
- Split Method Picker Split login method picker with passkey, SAML SSO, and a framed brand-logo testimonial sidebar
- Photo Backdrop Login Centered Frame login card over a softened photo backdrop with social provider sign-in
- Rotating Quotes Login Split magic-link sign-in with an animated brand-logo grid sidebar and rotating star testimonial
- Invite-Only Sign-In Passwordless workspace sign-in page with magic-link work email and Google plus GitHub login
- Centered Magic Link Centered magic-link email login with logo, social sign-in buttons, and legal footer
- Centered Method Picker Centered login method picker with WebAuthn passkey sign-in and email reveal step
- Social Proof Login Split-screen sign-in with testimonial sidebar, social login, and password show/hide toggle
- Centered Password Login Centered sign-in card with Google and Apple buttons, password visibility toggle, and email login
Sign-in Methods Covered
- Email and password Email-or-username fields with a show and hide visibility toggle, forgot-password links, and a full-width submit, across split-screen, centered, and framed card treatments.
- Passwordless magic link Work-email fields that send a secure sign-in link, including one that states a 15 minute expiry and one gated to approved work addresses.
- WebAuthn passkey A centered method picker with real WebAuthn passkey authentication and toast feedback, plus a split-screen variant of the same two-step flow.
- SAML SSO and backup codes Enterprise sign-in paths sitting beside Google and email in a picker that reveals the email field only after a method is selected.
- Social OAuth Google, Apple, and GitHub provider rows above an or divider, used both as the primary path and as the secondary option under an email field.
- Trial signup A full-page registration variant with a marketing hero, OAuth buttons, email and password fields, and a brand logo trust strip over drifting gradient blobs.
Layouts for the Same Sign-in Form
Method and layout are independent here, so you can usually find the flow you need in the shape your brand wants.
- Split-screen pages that pair the form with an editorial photo panel, an auto-cycling stacked media panel, or a full-cover image sidebar.
- Split-screen pages whose second column is social proof: an autoplay founder testimonial Carousel with a Trustpilot rating, a star-rated testimonial inside a Frame trust card with a logo wall, or brand logos animating into a grid.
- Centered single-card sign-in on a blurred photo with noise grain, on a noise-textured background inside a ReUI Frame, or inside a dashed blueprint frame with crosshair corners.
- Full-page single-column sign-in with an app header, a create-workspace link, and a customer logo strip in the footer.
- Backdrops that stay quiet behind the form: masked animated grids, twinkling dot canvases, and drifting gradient blobs.
Details That Usually Get Skipped
The method pickers are genuinely two-step. Choosing email reveals the field instead of showing every input at once, which is how sign-in has to work when SSO and passkeys are in play and you do not yet know which tenant the person belongs to.
Provider rows stay consistent across the set, so supporting Google and Apple but not GitHub means deleting a button rather than restructuring a grid. Legal footers, terms and copyright lines, forgot-password links, and create-account links sit where they belong instead of being left as an exercise.
The passkey block calls the browser WebAuthn API and reports success and failure through toasts, with a ReUI Alert for the fallback path, so you can feel the real interaction before wiring it to your credential store.
Related Shadcn Application Block Categories
- Onboarding (9) Welcome screens and guided setup for the screen immediately after a successful sign-up or first sign-in.
- Form (12) Grouped and validated field layouts for the longer profile and data-entry forms that follow account creation.
- Wizard (7) Multi-step flows with step indicators, useful when account setup spans several screens after authentication.
- Dialog (14) Modal confirmations and overlays for re-authentication prompts, session expiry, and destructive account actions.
- Settings (16) Preference pages where users manage password, connected providers, sessions, and two-factor options later on.
- Profile (10) Account pages with avatars and activity for the identity surface behind the credentials created on these screens.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Do these auth blocks include backend authentication?
Which providers are wired into the social sign-in buttons?
Can I use a magic link layout for signup instead of sign-in?
How do I install a login page block?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.