Magic Link Sign In

A full-height passwordless sign-in screen: a single email field, a Send magic link button, a small helper note, a divider, and social login buttons below as an alternative. A static, server-rendered block with no client-side state.

By Staaarter Team

Auth

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/magic-link-sign-in.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth6.tsx instead.

Usage

The file also exports auth6Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth6, auth6Demo } from "@/components/blocks/auth/auth6";

export default function Page() {
  return <Auth6 {...auth6Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	"Sign in with a magic link"	Screen heading.
description	string	"No password needed. We'll email you a link that signs you in instantly."	Short description shown under the heading.
submitLabel	string	"Send magic link"	Label on the submit button.
helperNote	string	"The link expires in 15 minutes and can only be used once."	Small helper text shown under the form, omitted if not passed.
className	string	none	Extra classes for the outer section element.

Behavior notes

This block is a plain server component, no useState or useEffect: the form submit, the magic-link email, and the Google/GitHub buttons are entirely decorative, nothing is sent anywhere.
The social buttons below the divider are a fallback path shown purely for completeness, they do not do anything different from the ones on the other sign-in blocks.

More Auth Blocks

View all →

centered-sign-in-card

Centered Sign In Card

Full-height centered sign-in card with social buttons, a password show/hide toggle, and remember-me.

split-screen-sign-up

Split-Screen Sign Up

Two-column registration screen with a sign-up form on one side and a full-bleed photo with a customer quote on the other.

email-verification-code

Email Verification Code

Full-height OTP screen with a 6-digit segmented code input, auto-advancing focus, and a live resend countdown.

forgot-password-request

Forgot Password Request

Full-height password recovery screen with a single email field, a send-reset-link button, and a back-to-sign-in link.

set-new-password

Set New Password

Full-height reset-password screen with independent show/hide toggles per field and a live password-requirements checklist.

account-chooser

Account Chooser

Full-height account picker listing saved accounts with avatars, plus a Use another account row.