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.
- Auth 1 Split-screen login page with animated grid backdrop and editorial image panel
- Auth 2 Split-screen login with an autoplay founder testimonial carousel and Trustpilot rating panel
- Auth 3 Split-screen magic-link sign-in with testimonial and trust-brand sidebar on a dot-grid canvas
- Auth 13 Split-screen magic-link sign-in with left image sidebar and social login buttons
- Auth 4 Framed password sign-in card with email or username, social provider row, and footer nav
- Auth 14 Split-screen workspace sign-in with animated stacked media panel and social SSO
- Auth 5 Split-screen marketing trial signup page with animated gradient blob background and social login
- Auth 10 Split magic-link sign-in with a framed testimonial and customer logo wall trust sidebar
- Auth 6 Split-screen login with social OAuth and testimonial sidebar over an animated grid background
- Auth 11 Split-screen login with testimonial sidebar and animated dot backdrop
- Auth 16 Full-page sign-in with app header, SSO and email-continue form, and customer logo trust strip footer
- Auth 7 Blueprint-framed passwordless sign-in card with magic-link email and customer trust logos
- Auth 12 Split login method picker with passkey, SAML SSO, and a framed brand-logo testimonial sidebar
- Auth 8 Centered Frame login card over a softened photo backdrop with social provider sign-in
- Auth 9 Split magic-link sign-in with an animated brand-logo grid sidebar and rotating star testimonial
- Auth 19 Passwordless workspace sign-in page with magic-link work email and Google plus GitHub login
- Auth 15 Centered magic-link email login with logo, social sign-in buttons, and legal footer
- Auth 17 Centered login method picker with WebAuthn passkey sign-in and email reveal step
- Auth 18 Split-screen sign-in with testimonial sidebar, social login, and password show/hide toggle
- Auth 20 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 (9) 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 (307) Browse 307 Shadcn Application blocks across 22 categories.
- Shadcn Data Grid Blocks (38) Browse 38 Shadcn Data Grid blocks across 8 categories.
- Shadcn Solutions Blocks (66) Browse 66 Shadcn Solutions blocks across 9 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (60) Browse 60 Shadcn Marketing blocks across 8 categories.
- Shadcn AI & Agents Blocks (17) Browse 17 Shadcn AI & Agents blocks across 2 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.