Fix, improve, and manage your website with online website maintenance & management services by freelance website experts. Affordable & remote.

はじめに OAuth 2.0を学習する目的でアプリを作成しました。 アプリにGoogleログインやDiscordログインを実装したいけどいまいち仕組みがわかっていない、という方はぜひ読んでほしいです！ また、その際は実際にこのアプリを動かしながら理解することをおすすめしま...

## The short version NextAuth (now Auth.js) creates 4 tables in your database: `users`, `accounts`, `sessions`, and `verification_tokens`. The `users` and `accounts` tables have a one-to-one relationship via `accounts.user_id`. Sessions link to users via `sessions.user_id`. Verification tokens are short-lived and self-cleaning. ## The 4 tables ### users Column | Type | What it means ---|---|--- `id` | text / UUID | Primary key. Generated by NextAuth. `name` | text | Display name from the OAuth provider (Google, GitHub, etc.) `email` | text | User's email. May be null if the provider doesn't share it. `email_verified` | timestamp | When the email was verified. Null if never verified. `image` | text | Profile picture URL from the provider. `created_at` | timestamp | When the user first signed in. `updated_at` | timestamp | Last profile sync from the provider. ### accounts This table links a user to an OAuth provider. One user can have multiple accounts (e.g., Google + GitHub). Column | Type | What it means ---|---|--- `id` | text / UUID | Primary key. `user_id` | text | Foreign key → `users.id`. `type` | text | Always `"oauth"` or `"oidc"`. `provider` | text | `"google"`, `"github"`, `"discord"`, etc. `provider_account_id` | text | The provider's unique ID for this user. `refresh_token` | text | OAuth refresh token (encrypted in production). `access_token` | text | OAuth access token (encrypted in production). `expires_at` | integer | When the access token expires (Unix timestamp). `token_type` | text | Usually `"Bearer"`. `scope` | text | Permissions granted by the provider. `id_token` | text | OIDC ID token (if using OIDC). `session_state` | text | Provider-specific session state. ### sessions Active sessions for each user. NextAuth creates a new row here on every sign-in. Column | Type | What it means ---|---|--- `id` | text / UUID | Primary key. `session_token` | text | The session token stored in the user's cookie. `user_id` | text | Foreign key → `users.id`. `expires` | timestamp | When this session expires. ### verification_tokens Short-lived tokens for email verification, password reset, etc. Self-cleaning old tokens are deleted automatically. Column | Type | What it means ---|---|--- `identifier` | text | Email or user ID the token is for. `token` | text | The actual token value. `expires` | timestamp | When this token expires. ## How they connect users ──1──1── accounts │ 1 │ ∞ sessions users ──1──∞── verification_tokens (via identifier) * One user → one or more accounts (Google, GitHub, etc.) * One user → many sessions (different devices/browsers) * Verification tokens are temporary and don't have a foreign key ## What to change * **Add a`role` column** to `users` if you need role-based access control. * **Add a`phone_number` column** to `users` if you're using SMS auth. * **Encrypt`access_token` and `refresh_token`** in production NextAuth doesn't do this by default. ## What to leave alone * Don't modify the `verification_tokens` table it's managed automatically. * Don't change the `session_token` format it's a signed JWT. * Don't add indexes to `provider_account_id` unless you're querying it directly (it's already unique). ## FAQ ### Does NextAuth store passwords? No. NextAuth is an OAuth-first library. It doesn't handle passwords. If you need email/password auth, use `next-auth/providers/credentials` with bcrypt, or use a service like Clerk or Lucia. ### How do I see what's in my NextAuth tables? Use dbdiagramr paste your connection string and get a visual schema of your NextAuth tables in seconds. ### Can I add custom fields to the users table? Yes. Add columns to the `users` table directly. NextAuth will ignore columns it doesn't know about, so you can safely add `role`, `phone_number`, `preferences`, etc. ### What happens when a user deletes their account? NextAuth doesn't cascade deletes by default. You need to manually delete from `users`, `accounts`, and `sessions`. Or add `ON DELETE CASCADE` to your foreign key constraints. ### Is Auth.js the same as NextAuth? Yes. Auth.js is the rebranded version of NextAuth. The database schema is identical. If you're on NextAuth v4, you're using the same tables.

Every time I started a new project, whether it was Formgrid, Sheetrocket, or a client build, the first week or two disappeared into authentication. Email verification tokens. Password reset flows. NextAuth configuration. A Prisma schema for users and sessions. Setting up the Google OAuth consent screen. Middleware for protected routes. None of that is intellectually interesting. All of it is necessary. And it has to be done correctly, because a mistake in auth isn't a bug; it's a security vulnerability with someone's real account attached to it. After doing this properly from scratch for the fifth time, I stopped. I built it once, the right way, open-sourced it, and made it the starting point for every project after this one. The result is a production-ready authentication starter kit that gets a new Next.js project from zero to working auth in minutes instead of weeks. ## What it includes **Email and password authentication with Zod validation.** Not just a signup form, proper server-side validation that catches weak passwords, duplicate emails, and malformed input before any of it reaches the database. **Email verification.** New users can't access protected routes until they verify their email, and the verification token expires after 24 hours. Without this, any email address, including ones the signer doesn't actually own, can be used to create an account. **Password reset with secure tokens.** The reset token expires after one hour. Without an expiry, a leaked reset link is a permanent vulnerability sitting in someone's inbox forever. The token itself is hashed before it's stored, so even a full database breach doesn't hand over usable reset tokens. **Google OAuth with NextAuth.js v5.** Handles the OAuth flow, stores the account link in the database, and merges correctly with an existing email account if the user originally signed up with a password. Getting that merge logic wrong is one of the most common auth bugs I've seen in real production apps. **Protected routes with Next.js middleware.** Everything under the dashboard directory is protected automatically. The middleware checks the session and redirects unauthenticated users to login before the page component ever renders; no manual auth check copied into every page. ** Role-based access.** The User model has a role field, defaulting to USER, with support for ADMIN and any other role you want to add. Middleware can gate admin-only routes without touching every protected page individually. **A responsive dashboard layout in Tailwind.** A clean starting point for the authenticated UI, so you can start building your actual feature immediately after cloning instead of also designing a dashboard shell first. ## The stack, and the honest tradeoffs **Next.js 15 with the App Router.** The current standard for React apps with server components and server actions. The App Router changes how auth is wired up compared to the Pages Router, and NextAuth v5 is built specifically for it. **Prisma with MySQL.** Type safe queries with automatic migrations. MySQL for wide hosting compatibility, easily swapped for PostgreSQL by changing one line in the Prisma schema and the DATABASE_URL. **NextAuth.js v5.** The current major version, with breaking changes from v4. The configuration pattern changed significantly, and most tutorials still floating around online use the old v4 pattern. This boilerplate uses the correct v5 approach. **Resend for transactional email.** The most developer-friendly email API I've used. It's what Formgrid runs in production for verification and notification emails. The templates in the boilerplate are plain text and easy to reskin with your own branding. **Tailwind CSS.** Utility-first styling that ships zero unused CSS to production. ## Three decisions worth explaining, because most tutorials get them wrong ### JWT sessions over database sessions NextAuth supports two session strategies. Database sessions store a session record per login and validate it against the database on every request. JWT sessions encode the session data into a signed token and validate it cryptographically, no database query required. Database sessions are more revocable; you can kill a session instantly by deleting its record. JWT sessions are faster, since there's no query on every authenticated request, but you can't invalidate one without extra infrastructure sitting on top. The boilerplate uses JWT for simplicity and speed. If your product needs immediate session revocation, for example, kicking someone out the moment their subscription lapses, that's the tradeoff worth knowing before you commit to this pattern. ### Hashing verification and reset tokens Verification tokens and password reset tokens are stored hashed in the database, never in plain text. That means even if someone reads the raw database, they can't use the stored tokens to verify accounts or reset passwords themselves. The plain text token only ever exists in the email link, and it's compared against the hash at submission time. Same principle as password hashing, applied to a temporary token instead of a permanent credential. ### Auth checks belong in middleware, not in page components Next.js middleware runs on the Edge runtime before the page ever renders. Putting the auth check there means a protected page is never rendered for an unauthenticated visitor, not even partially. Putting the check inside the page component instead means the page starts rendering and then redirects, which produces a flash of content the user was never supposed to see. Middleware is the correct place for the gate, not a convenience, but a correctness requirement. ## How to use it git clone git@github.com:allenarduino/nextjs-prisma-auth-boilerplate.git cd nextjs-prisma-auth-boilerplate npm install Copy `.env.example` to `.env` and fill in: * `DATABASE_URL`, your MySQL connection string * `NEXTAUTH_SECRET`, a random 32-character string; generate one with `openssl rand -base64 32` * `NEXTAUTH_URL`, your app's base URL * `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET`, from the Google Cloud Console after creating an OAuth 2.0 credential * `RESEND_API_KEY`, from resend.com after creating an account and verifying a sending domain * `EMAIL_FROM`, the sender address your verification and reset emails go out from, for example `Formgrid <no-reply@yourdomain.com>` Then: npx prisma generate npx prisma db push npm run dev That's the whole setup. From clone to a working signup, verification, login, and password reset flow, in minutes. ## What to build on top of it **A SaaS product.** The auth layer is done. Add your subscription logic, your core features, and your billing integration. The User model's role field is already there to extend into a subscription tier if you need one. **A client project.** Clone it, configure the environment variables for the client's domain and database, restyle the Tailwind to match their brand, and deploy. The auth is production-ready from day one, not a prototype you'll need to harden later. **A side project.** Stop spending the first two weeks on auth and start building the part that's actually yours. The boilerplate handles the foundation so you can get to the feature that makes your project worth building in the first place. ## How this connects to Formgrid Formgrid runs a similar auth pattern, built in Express and Prisma instead of NextAuth, but the same principles apply underneath: email verification, hashed tokens, JWT sessions, Google OAuth, protected routes. Building this boilerplate was really just distilling those same patterns, ones already proven in a product real customers pay for, into a shareable starting point for the Next.js ecosystem specifically. ## Where it stands right now The repo has picked up 17 GitHub stars and 9 forks in a short amount of time, which is a decent early signal that the pain point is real and not just mine. You can browse the code at github.com/allenarduino/nextjs-prisma-auth-boilerplate or try the live demo at nextjs-prisma-auth-boilerplate.vercel.app. ## Closing Authentication is never the interesting part of a product. It's the necessary foundation everything else gets built on. Getting it right matters because getting it wrong means real security vulnerabilities attached to real users. Getting it done quickly matters because every week spent on auth is a week not spent on the feature that actually makes your product worth using. Clone the repo, configure the environment, and go build the interesting part. If you use it on a project, or find a way to improve it, I'd genuinely like to hear about it. The repo is open for contributions and issues at github.com/allenarduino/nextjs-prisma-auth-boilerplate. Reach me at allen@formgrid.dev. _I'm Allen, a full-stack TypeScript engineer and the founder of Formgrid and Sheetrocket. I write about real production engineering from products that people actually pay for. More at jonesstack.com._

NextAuth.js, a popular authentication tool for Next.js websites, had a security issue that allowed attackers to bypass email verification.

If you use Auth.js to control access to your website or application, a misconfigured Auth.js setup can allow anyone to access your resources.

Next.js 15.0.1 NextAuth 5.0.0-beta I'm using NextAuth (v5). I have set up a form on the /signin page where users enter their email and password, then click the submit button to sign in. The sign-in