Authentication Basics — Complete Guide
Authentication Basics — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of Next.js Tutorial on Toolliyo Academy.
On this page
Next.js Tutorial (LearnHub) · Lesson 20 of 100
Authentication Basics
Beginner → Intermediate → Advanced → Professional
Beginner · 1 — Foundations · ~12 min read · Module 2: Layouts & Styling
Introduction
This lesson is part of the beginner section. We explain Authentication Basics slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. Authentication proves who the user is (login). Authorization decides what they can do (student vs instructor). Sessions or JWT tokens remember login between requests. LearnHub paid lessons and grades are private. Auth is the gate between public marketing pages and /dashboard.
Authentication Basics appears in almost every LearnHub page you will build. Once it clicks, data fetching and auth become much easier.
When will you use this?
You use layouts and styling in every page you build from your first screen to production.
- Course catalogs, lesson sidebars, and instructor dashboards all use layouts and shared navigation.
- When a student opens a lesson page, nested layouts keep the header and progress bar consistent.
Real-world: NewsDaily portal
The Media team building NewsDaily portal uses Authentication Basics to know who is logged in before showing paid lesson content. readers and editors never see the TypeScript files — they just get a fast, reliable article pages, categories, and SEO metadata.
Production-style code
// Conceptual flow — full NextAuth in later lessons
// 1. User submits email/password
// 2. Server verifies credentials
// 3. Session cookie or JWT issued
// 4. Dashboard reads session — shows enrolled courses
// middleware.ts (preview)
export function middleware(request: NextRequest) {
const session = request.cookies.get('session');
if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', request.url));
}
}What happens in production: In NewsDaily portal, getting Authentication Basics right means readers and editors trust the article pages, categories, and SEO metadata every day.
Lesson example (start here)
Copy this smaller example first. Once it works, compare it with the real-world code above.
// Conceptual flow — full NextAuth in later lessons
// 1. User submits email/password
// 2. Server verifies credentials
// 3. Session cookie or JWT issued
// 4. Dashboard reads session — shows enrolled courses
// middleware.ts (preview)
export function middleware(request: NextRequest) {
const session = request.cookies.get('session');
if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', request.url));
}
}Line-by-line walkthrough
| Code | What it means |
|---|---|
// Conceptual flow — full NextAuth in later lessons | Comment — notes for humans; the compiler ignores it. |
// 1. User submits email/password | Comment — notes for humans; the compiler ignores it. |
// 2. Server verifies credentials | Comment — notes for humans; the compiler ignores it. |
// 3. Session cookie or JWT issued | Comment — notes for humans; the compiler ignores it. |
// 4. Dashboard reads session — shows enrolled courses | Comment — notes for humans; the compiler ignores it. |
// middleware.ts (preview) | Comment — notes for humans; the compiler ignores it. |
export function middleware(request: NextRequest) { | Named export — reusable function or component. |
const session = request.cookies.get('session'); | Part of the Authentication Basics example — read it together with the lines before and after. |
if (!session && request.nextUrl.pathname.startsWith('/dashboard')) { | Part of the Authentication Basics example — read it together with the lines before and after. |
return NextResponse.redirect(new URL('/login', request.url)); | Next.js helpers for Route Handlers — read request and return JSON or redirects. |
} | Closes a block started by { above. |
} | Closes a block started by { above. |
How it works (big picture)
- This lesson is concepts before tools.
- Cookies carry session id.
- Middleware blocks guests early.
- Later lessons add NextAuth and protected layouts.
Do this on your computer
- List LearnHub routes that need auth vs public
- Sketch login → session → dashboard on paper
- Read middleware preview above
- Prepare .env.local for auth secrets in next lessons
- Read the real-world section and name which part of LearnHub uses this topic.
- Run the example locally with npm run dev and confirm the same behavior.
- Change one value in the example (route, text, or course id) and predict what will happen before you save.
Experiments — try changing this
- Change a string or route in the example and save — watch the browser update.
- Break the code on purpose (remove a bracket), read the error overlay, then fix it.
Remember
Auth = identity; authorization = permissions. Sessions via secure cookies common in Next.js. Protect on server and middleware.
Common questions
Build auth vs buy?
NextAuth, Clerk, or Auth0 save time; learning basics still matters for interviews.
How long should I spend on Authentication Basics?
Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new concept; setup lessons may take one afternoon.
What if I get stuck on Authentication Basics?
Re-read the line-by-line walkthrough, check the terminal and browser overlay for errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.
Where is Authentication Basics used in real jobs?
See the real-world section above — the same pattern appears in LMS, e-commerce, SaaS, and dashboards. Interviewers ask you to explain it using one concrete example.