Web Dev Academy UI kits & extras · Auth (Clerk, Auth0, NextAuth) Tool 63 / 64
UI kits & extras

Authentication

Sign-in, sign-up, sessions and social login — done right. Auth providers handle passwords, OAuth and security so you don't have to roll your own.

Demo · interactive simulation

A sign-in flow you can click through

Real OAuth needs a backend (secret keys, redirect callbacks, a session store) — none of which runs in a static page. So this is a faithful simulation of what Clerk / Auth0 / NextAuth give you: enter any email + password, or click "Continue with Google", and watch a fake session get created.

⚠ Simulation — no real login, nothing is sent anywhere

Welcome back

Sign in to your account

or
// With a real provider (NextAuth example) it's roughly:
import { signIn, signOut, useSession } from "next-auth/react";

const { data: session } = useSession();
session
  ? <button onClick={() => signOut()}>Sign out</button>
  : <button onClick={() => signIn("google")}>Continue with Google</button>
Under the hood

What actually happens in real OAuth

When you click "Continue with Google", the provider runs a redirect dance. Your app never sees the password — Google does, then hands back a verified token.

Click "Google" Redirect to Google You approve Google → callback URL with code Server swaps code for token Session cookie set

The secret token exchange happens server-side — that's exactly the part a static HTML page can't do, and exactly the part these providers handle for you.

The players

Clerk vs. Auth0 vs. NextAuth

All three solve auth, but with different trade-offs.

Clerk

Drop-in pre-built UI components (<SignIn/>, <UserButton/>), user management dashboard, organisations. The fastest to add a polished flow.

Auth0

The enterprise veteran. Hosted login, every social + enterprise SSO provider (SAML, LDAP), fine-grained rules. Powerful, framework-agnostic.

NextAuth / Auth.js

Open-source, self-hosted auth for Next.js (and beyond). Free, you control the database and session — but you wire more yourself.

Why not roll your own

Auth is easy to start, dangerous to finish

Hashing passwords, secure session cookies, CSRF protection, password resets, rate limiting, OAuth callbacks, MFA, account linking — every one is a place to leak user data. Providers ship all of it, audited, for free or cheap. That's why almost nobody writes auth from scratch anymore.

i
This sign-in flow is a clearly-labelled interactive simulation built with plain HTML, CSS and vanilla JavaScript. Real authentication (Clerk, Auth0, NextAuth) requires a backend for the OAuth token exchange and session storage, which can't run in a static page — so no real login happens and nothing is sent anywhere. The fake "session" lives only in this tab's memory. The shared CSS shell styles the surrounding page.

↑ All 64 tools