# Auth 6

> Passwordless email-only sign-in — centered icon hero and single-field flow.

A shadcn/ui block from the [@nusaiba](https://nusaiba.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/nusaiba/auth-6).

- Page, with a live preview: https://shadcn.exchange/r/nusaiba/auth-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/nusaiba/auth-6-light-43efa5bf4f26a5ec.png
- Registry item: https://nusaiba.dev/r/base-nova/auth-6.json
- Categories: auth
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://nusaiba.dev/r/base-nova/auth-6.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `motion`
- Registry items: `@nusaiba/foundation`, `button`, `input`, `label`

## Files

### `registry/blocks/auth/auth-data.ts`

```ts
export const authSite = {
	name: "Nusaiba",
	domain: "nusaiba.dev",
	namespace: "@nusaiba",
	copyrightYear: 2026,
} as const;

export const authSignInCopy = {
	eyebrow: "Welcome back",
	title: "Sign in to Nusaiba",
	description: "Access your registry token, Pro blocks, and account settings.",
	submit: "Sign in",
	forgot: "Forgot password?",
	switchPrompt: "No account?",
	switchAction: "Create one",
} as const;

export const authSignUpCopy = {
	eyebrow: "Get started",
	title: "Create your Nusaiba account",
	description:
		"Install motion blocks into your repo, unlock Pro registry access, and keep every file.",
	submit: "Create account",
	switchPrompt: "Already have an account?",
	switchAction: "Sign in",
	terms:
		"By continuing, you agree to our Terms and acknowledge that blocks install into your own codebase.",
} as const;

export const authCenteredSignInCopy = {
	eyebrow: "Account",
	title: "Log in",
	description: "Continue to your registry token, billing, and saved blocks.",
} as const;

export const authMagicLinkCopy = {
	eyebrow: "Passwordless",
	title: "Sign in with email",
	description:
		"We'll send a one-time link — no password to remember. Perfect for quick access before you install blocks.",
	submit: "Send magic link",
	hint: "Check your inbox at the address you used to purchase Pro.",
} as const;

export const authOAuthCopy = {
	eyebrow: "Sign in",
	title: "Choose how to continue",
	description: "Use a provider or your work email — same account across CLI and site.",
	divider: "or continue with email",
} as const;

export const authOtpCopy = {
	eyebrow: "Verify",
	title: "Enter the code",
	description: "We sent a 6-digit code to your email. Paste it below to unlock Pro install.",
	resend: "Resend code",
} as const;

export const authBenefitsCopy = {
	eyebrow: "Why sign in",
	title: "Ship landing pages faster",
	description:
		"One account for preview, purchase, and registry token — then install sections straight into your repo.",
} as const;

export const authBenefits = [
	"Registry token for Pro block install",
	"Copy Prompt history and CLI shortcuts",
	"Commercial license for client projects",
	"Lifetime updates on purchased blocks",
] as const;

export const authFramedCopy = {
	eyebrow: "Registry access",
	title: "Sign in to install",
	description: "Preview blocks live, then add them to your landing page with one shadcn command.",
} as const;

export const authOAuthProviders = [
	{ id: "github", label: "Continue with GitHub" },
	{ id: "google", label: "Continue with Google" },
] as const;

export const authVisualCopy = {
	eyebrow: "Install",
	title: "Blocks that land in your repo",
	description:
		"Sign in to copy your registry token, unlock Pro sections, and keep full source ownership.",
} as const;
```

### `registry/blocks/auth/6/auth-section.tsx`

```tsx
"use client";

import Link from "next/link";
import { useRef } from "react";
import { MailIcon } from "lucide-react";
import { motion, useInView, useReducedMotion } from "motion/react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { motionStagger, motionViewport } from "@/lib/motion-tokens";
import { cn } from "@/lib/utils";
import { authMagicLinkCopy, authSignInCopy } from "../auth-data";
import { SectionShell } from "@/components/layout-contract";

const spring = { type: "spring" as const, duration: 0.3, bounce: 0 };

export function AuthMagicLinkSection() {
	const reduceMotion = useReducedMotion();
	const ref = useRef<HTMLElement>(null);
	const inView = useInView(ref, motionViewport);

	const itemVariants = reduceMotion
		? { hidden: { opacity: 1 }, visible: { opacity: 1 } }
		: {
				hidden: { opacity: 0, filter: "blur(4px)", y: 8 },
				visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: spring },
			};

	return (
		<SectionShell spacingMode="section" ref={ref}>
			<motion.div
				animate={inView ? "visible" : "hidden"}
				className="mx-auto w-full max-w-md text-center"
				initial="hidden"
				variants={{
					hidden: {},
					visible: { transition: { staggerChildren: motionStagger.item, delayChildren: 0.04 } },
				}}
			>
				<motion.div
					className="mx-auto flex size-12 items-center justify-center rounded-full border border-border bg-muted/40"
					variants={itemVariants}
				>
					<MailIcon className="size-5 text-muted-foreground" />
				</motion.div>
				<motion.p
					className="mt-6 font-medium text-primary text-xs uppercase tracking-[0.22em]"
					variants={itemVariants}
				>
					{authMagicLinkCopy.eyebrow}
				</motion.p>
				<motion.h1
					className="mt-3 text-balance font-medium text-2xl tracking-tight md:text-3xl"
					variants={itemVariants}
				>
					{authMagicLinkCopy.title}
				</motion.h1>
				<motion.p
					className="mx-auto mt-4 max-w-sm text-pretty text-muted-foreground text-sm leading-relaxed"
					variants={itemVariants}
				>
					{authMagicLinkCopy.description}
				</motion.p>

				<motion.form className="mt-8 space-y-4 text-left" variants={itemVariants}>
					<div className="space-y-2">
						<Label htmlFor="auth-6-email">Email</Label>
						<Input
							autoComplete="email"
							id="auth-6-email"
							placeholder="you@nusaiba.dev"
							type="email"
						/>
					</div>
					<Button className={cn("w-full active:scale-[0.96] transition-transform")} type="button">
						{authMagicLinkCopy.submit}
					</Button>
				</motion.form>

				<motion.p className="mt-4 text-muted-foreground text-xs" variants={itemVariants}>
					{authMagicLinkCopy.hint}
				</motion.p>
				<motion.p className="mt-6 text-muted-foreground text-sm" variants={itemVariants}>
					Prefer a password?{" "}
					<Link className="text-foreground underline-offset-4 hover:underline" href="#">
						{authSignInCopy.submit}
					</Link>
				</motion.p>
			</motion.div>
		</SectionShell>
	);
}
```