Auth Stack
What real auth looks like: providers, session storage, RBAC, magic links.
When to use
Day one. Do not roll your own.
Anatomy
- Email + OAuth (Google, GitHub, Apple)
- Magic links or passkeys preferred over passwords
- Session in HTTP-only cookies
- RBAC at the route + UI level
How the industry does it
3 examples · credited
Prompt
Set up a production auth stack for a Next.js 15 app. Use Auth.js (NextAuth) with Google + GitHub OAuth providers plus an email magic-link provider via Resend. Store sessions as HTTP-only cookies. Provide a middleware that gates /app routes and redirects unauthenticated users to /login. Build a useSession hook for client components and a getSession helper for server components. Add a basic RBAC check (user.role === 'admin') with a typed helper.Polish & tuning
2 of 4 unlockedMotion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.