Authentication asks who you are. Authorization asks what you are allowed to do

# User Access Control Course: [React](https://www.devtutorials.ai/learn/react) · Section: Routing Source: https://www.devtutorials.ai/learn/react/routing/user-access-control > Authentication and authorization with JWT: the login flow, user identity and roles, role-based access control, protected routes and guards, an auth context and auth service, login state, logout and best practices. ## What Is Authentication? **Authentication** means checking **who** a user is. The most common way is a login form: the user types an email and a password, and the server checks them. If they are correct, the user is **logged in**. The app now knows who is using it. ### Real-World Example In a bookshop app, the user signs in with an email and a password. The app checks them and remembers who the user is. A guest who opens the **My orders** page is sent to the sign-in page. A normal customer does not see the **Admin** page in the menu, because only a user with the admin role may open it. Authentication answers one question: **Who are you?** ## What Is Authorization? **Authorization** means checking **what** a logged-in user is allowed to do. For example, a customer can see their own orders, but only an admin can edit the book list. Authorization always comes **after** authentication. You must know who the user is before you can decide what they may do. Authorization answers a different question: **What are you allowed to do?** ## Authentication vs Authorization

Authentication comes first. Authorization uses the result to decide what is allowed.

| | Authentication | Authorization | |---|---|---| | Question | Who are you? | What can you do? | | When | First, at login | After login, on every protected action | | Checks | Email and password (or Google, OTP, ...) | The user's role or permissions | | If it fails | "Wrong email or password" | "You do not have access to this page" | | Example | Asha logs in | Asha may see her orders, but not the admin page |

## Authentication Flow Overview Here is what happens when a user logs in to a React app that uses **JWT**. A **JWT** (JSON Web Token, said "jot") is a long piece of text that the server gives the app after a correct login. The app sends it with each request, so the server knows who the user is without asking for the password again.

After login, the app keeps a token. It proves who the user is, without sending the password again.

1. The user types an email and password in the login form. 2. The app sends them to the server's login API. 3. The server checks them. If they are correct, it creates a JWT and sends it back. 4. The app keeps the token, and stores the user's details in state. 5. For every later request, the app sends the token along. The server checks the token and answers. ### What Is Inside a JWT? A JWT has three parts, joined by dots.

The payload holds the user's details. The signature proves the server made the token.

- **Header** — says how the token was signed. - **Payload** — the user's details, called **claims**. For example: `sub` (the user's id), `name`, `role`, and `exp` (when the token expires). - **Signature** — made by the server with a secret key. If anyone changes the payload, the signature no longer matches, and the server rejects the token. The header and payload are only **encoded**, not hidden. Anyone with the token can read them. So never put a password or other secrets in a JWT. ## User Identity **User identity** is the information that says who the logged-in user is. In a JWT app, the identity comes from the token's payload. The lab below has a pretend **auth service**. It acts like a server: it checks the password and creates a JWT-shaped token. Then the app reads the payload back to learn who logged in. {" "} {error &&

{error}

} {token && (

Token: {token}

Name: {user?.name} · Role: {user?.role} · User id: {user?.sub}

)} ); } `, "App.css": `.token { word-break: break-all; font-family: monospace; font-size: 12px; background: #f1f5f9; padding: 6px; border-radius: 6px; } .error { color: #dc2626; } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> Click **Log in as Asha**. After half a second, the token appears: three parts joined by dots. Below it, the app shows the name and role it read from the payload. Click **Wrong password**, and you get an error instead of a token. In a real app, the browser cannot create a real JWT, because it does not have the server's secret key. The pretend service on this page is only for learning. The signature here is fake on purpose. ## User Roles A **role** is a group name for users who may do the same things. Most apps have only a few roles, for example: - **customer** — can view books and place orders. - **admin** — can do everything a customer can, and also edit books and see all orders. The role is usually part of the JWT payload, so the app knows it right after login: `role: "admin"`. ## Role-Based Access Control (RBAC) **Role-based access control** (RBAC) means you give permissions to **roles**, not to each person. A user can do something if their role allows it.

You check the role, not the person. Change a role's permissions once, and every user with that role is updated.

A simple way to write RBAC is a list of permissions for each role, and one function to check it. ```tsx const permissions = { customer: ["view-books", "place-order"], admin: ["view-books", "place-order", "edit-books", "see-all-orders"], }; function can(role: Role, action: string): boolean { return permissions[role].includes(action); } can("customer", "edit-books"); // false can("admin", "edit-books"); // true ``` Now the app asks `can(user.role, "edit-books")` instead of checking names. If the shop adds a new "manager" role, you only add one line to the list. Role:{" "}

{can(role, action) ? "✅" : "❌"} {action}

); } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> Change the role. The list of allowed actions changes at once. The "manager" role was added with just one line in `permissions`. ## Protected Routes A **protected route** is a page that only some users may open. For example, `/orders` needs a logged-in user, and `/admin` needs an admin. If the user may not open it, the app sends them somewhere else, usually to the login page. This is called a **redirect**.

The guard sits in front of the page. Only logged-in users get through.

## Route Guards Pattern in React A **route guard** is a component that wraps a protected page. It checks the user first: - If the check passes, it shows the page (`children`). - If not, it redirects with React Router's `` component. ```tsx function RequireAuth({ children }: { children: ReactNode }) { const { user } = useAuth(); if (!user) { return ; } return children; } // Use it around the page: } /> ``` `` changes the page as soon as it is shown. `replace` means the blocked page is not saved in the history, so the Back button does not lead back to it. Home} /> Please log in to see your orders.} />

Your orders: #1021 Atomic Habits

} /> ); } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> Click **My orders** while logged out. The address changes to `/login`. Now click **Log in**, then **My orders** again. This time the guard lets you through. ## Authentication Context Pattern Many components need to know who is logged in: the header, the guards, the account page. So the login state belongs in **context**, which you learned in the Context API lesson. The pattern has three parts: - an **AuthContext** that holds the user, plus `login` and `logout` functions; - an **AuthProvider** component near the top of the app; - a **useAuth** hook, so any component can read it. ## Auth Service Pattern An **auth service** is a separate file that does the talking to the server: log in, read the token, check if it has expired. Components and context call the service. They do not contain server code themselves. - **Components** show the screen. - **AuthContext** remembers who is logged in. - **authService** talks to the server and handles tokens. This keeps each file small, and makes it easy to change the server code later without touching the screens. ## Login State Management The login state is the data that says who is logged in. Keep it small: - `user` — the details from the token payload, or `null` when nobody is logged in. - `token` — the JWT, needed to call the server. From `user`, you can work out everything else: `isLoggedIn` is just `user !== null`. Also check the token's `exp` time. An expired token means the user must log in again. {isLoggedIn ? (

Hi, {session!.name}. Your token expires in {secondsLeft} seconds.

) : (

{session ? "Your session has expired. Please log in again." : "You are logged out."}

)} ); } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> Click **Log in** and wait. The seconds count down. At 0, the app treats the user as logged out, even though nobody pressed Log out. Real tokens usually last minutes or hours, not seconds. Here is the full pattern together: an auth service, an auth context, a login page, route guards, and a role check. btoa(JSON.stringify(part)).replace(/=+$/, "").replace(/\\+/g, "-").replace(/\\//g, "_"); // Pretend server: checks the password and returns a JWT-shaped token. return new Promise((resolve, reject) => { setTimeout(() => { const u = users.find((x) => x.email === email && x.password === password); if (!u) return reject(new Error("Wrong email or password.")); const payload = { sub: u.id, name: u.name, role: u.role, exp: Math.floor(Date.now() / 1000) + 3600 }; resolve(encode({ alg: "HS256", typ: "JWT" }) + "." + encode(payload) + ".demo-signature"); }, 400); }); } const p = JSON.parse(atob(token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))); return { id: p.sub, name: p.name, role: p.role, exp: p.exp }; } return user.exp * 1000 < Date.now(); } const permissions: Record = { customer: ["view-books", "see-own-orders"], admin: ["view-books", "see-own-orders", "edit-books"], }; return permissions[role].includes(action); } `, "AuthContext.tsx": `import { createContext, useContext, useState } from "react"; interface AuthValue { user: User | null; token: string | null; login: (email: string, password: string) => Promise; logout: () => void; } const AuthContext = createContext(null); const [token, setToken] = useState(null); // Work the user out from the token. An expired token counts as logged out. const decoded = token ? authService.readUser(token) : null; const user = decoded && !authService.isExpired(decoded) ? decoded : null; async function login(email: string, password: string) { const newToken = await authService.login(email, password); // throws if wrong setToken(newToken); } function logout() { setToken(null); } return ( {children} ); } const value = useContext(AuthContext); if (!value) throw new Error("useAuth must be used inside "); return value; } `, "Guards.tsx": `import { Navigate, useLocation } from "react-router-dom"; // Only logged-in users get through. const { user } = useAuth(); const location = useLocation(); if (!user) { // Remember where the user wanted to go, so we can send them back after login. return ; } return <>{children}; } // Only users whose role allows this action get through. const { user } = useAuth(); if (!user) return ; if (!can(user.role, action)) return

Sorry, you do not have access to this page.

; return <>{children}; } `, "LoginPage.tsx": `import { useState } from "react"; const { login } = useAuth(); const navigate = useNavigate(); const location = useLocation(); const [email, setEmail] = useState("asha@bookcorner.com"); const [password, setPassword] = useState("asha123"); const [error, setError] = useState(""); const [busy, setBusy] = useState(false); async function handleSubmit(e: FormEvent) { e.preventDefault(); setError(""); setBusy(true); try { await login(email, password); const from = (location.state as { from?: string } | null)?.from ?? "/"; navigate(from, { replace: true }); // go back to the page the user wanted } catch (err) { setError((err as Error).message); } setBusy(false); } return ( ); } `, "App.tsx": `import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; function Header() { const { user, logout } = useAuth(); return ( ); } return ( Everyone can see the books.

} /> } />

Your orders: #1021 Atomic Habits

} />

Admin: edit the book list here.

} /> ); } `, "App.css": `.nav { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; font-size: 14px; } .nav .who { margin-left: auto; } .form { display: grid; gap: 6px; max-width: 260px; } .form h3 { margin: 4px 0; } .error { color: #dc2626; } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> Try these steps, and watch the address bar: 1. Click **My orders**. You are not logged in, so `RequireAuth` sends you to `/login`. 2. Press **Log in** (Asha's details are filled in). You go back to `/orders`, the page you wanted. 3. Asha is a **customer**, so there is no **Admin** link. Log out, and log in as Ravi. Now the **Admin** link appears. Click through the file tabs. Each file has one job: `authService` talks to the "server", `AuthContext` remembers the user, `Guards` protect the routes, and `LoginPage` shows the form. ## Conditional Rendering Based on Authentication Once you have `user` from context, showing different things is just conditional rendering, which you learned earlier. ```tsx const { user } = useAuth(); {user ?

Hi, {user.name}

: Log in} {user && can(user.role, "edit-books") && Admin} ``` Hiding a link is only for a nicer screen. It does **not** protect anything. A user can still type `/admin` in the address bar, so the route must also be guarded. And the server must check the token on every request. ## Logout **Logout** means forgetting the user. In a JWT app, that means: 1. Remove the token from the app (set it to `null`). 2. Clear any user data in state. 3. Send the user to a public page, such as the home page. ```tsx function handleLogout() { logout(); // token = null, so user = null navigate("/"); // leave the protected page } ``` A JWT stays valid until its `exp` time, even after logout. So real apps keep tokens short-lived, and the server can also keep a list of tokens that were logged out. ## Authentication and Authorization Best Practices - **Always check on the server.** Hiding links and guarding routes in React only helps the user. The server must check the token and the role on every request, because browser code can be changed. - **Never trust the token in the browser.** The app reads the payload to show the user's name, but only the server can verify the signature. - **Never put secrets in a JWT.** The payload can be read by anyone. No passwords, no card numbers. - **Use short expiry times.** Check `exp`, and log the user out when the token has expired. - **Store tokens carefully.** Many apps ask the server to keep the token in an **httpOnly cookie**, which JavaScript cannot read. A token in `localStorage` can be stolen if the site has a security hole that lets someone run their own script. - **Always use HTTPS**, so the password and token cannot be read on the way. - **Show general error messages**, like "Wrong email or password". Do not say which one was wrong. React guards are for a good user experience. Real security happens on the server. ## Capstone Project: E-Commerce Access Management System You will build a small shop where access depends on who you are. **Guests** can browse. **Customers** can register, log in and use a cart. **Admins** can manage product prices. It uses everything from this lesson: JWT, an auth context, route guards and roles.

The token says who you are. The role says what you may do.

### User Registration `register(name, email, password)` in `authService.ts` checks the input (a name, a valid email, a password of 6+ characters, an email not used before), saves a new account with the role **customer**, and returns a token. New users never choose their own role: only the server gives out the admin role. ### User Login `login(email, password)` finds the account and returns a token, or throws "Wrong email or password." The login form shows that message and stays on the page. ### JWT Authentication Both functions return a **JWT**. Its payload holds the user's id, name, email, **role** and an expiry time (`exp`). The app reads the user from the token with `readUser(token)`. In this playground the signature is fake; a real server signs the token with a secret key and checks it on every request. Try both in the lab. Register a new account, then look at the token and the user read from it. {error &&

{error}

} {token && ( <>

Token:

{token}

User read from the token:

{JSON.stringify(readUser(token), null, 2)}

)}

Try: register twice with the same email, or log in as admin@shop.com / admin123.

Same app, three views. Guards also block the URLs, not only the links.

### User Navigation `NavBar` shows links for the current user. Guests see **Log in** and **Register**. Customers see **Cart** with the item count. Everyone logged in sees their name, role and a **Log out** button. ### Admin Navigation Admins see an **Admin** link instead of the cart. The admin page lists products with a price box. Changing a price updates the shop at once. ### Cart Management `StoreContext.tsx` holds the products and the cart (product id → quantity). It gives `addToCart`, `removeFromCart`, `cartCount` and `cartTotal`. The cart is emptied when the user logs out or changes, so one person's cart never shows for another. ### Conditional Rendering Based on Roles The shop page shows a different action on each product card: - Guest: **Log in to buy** - Customer: **Add to cart** - Admin: **Edit price** (a link to the admin page) Here is the complete system. Try it as a guest, then log in as the customer (asha@shop.com / asha123), add items and open the cart. Log out and log in as the admin (admin@shop.com / admin123), change a price, then try to open the cart.

} /> } /> } /> } /> } /> } />

); } `, "authService.ts": `export type Role = "customer" | "admin"; id: string; name: string; email: string; role: Role; exp: number; } interface Account { id: string; name: string; email: string; password: string; role: Role; } // Pretend database. A real server stores hashed passwords, never plain ones. const accounts: Account[] = [ { id: "1", name: "Ravi", email: "admin@shop.com", password: "admin123", role: "admin" }, { id: "2", name: "Asha", email: "asha@shop.com", password: "asha123", role: "customer" }, ]; const wait = (ms: number) => new Promise((r) => setTimeout(r, ms)); const encode = (part: object) => btoa(JSON.stringify(part)).replace(/=+$/, "").replace(/\\+/g, "-").replace(/\\//g, "_"); // The server signs a JWT. Here the signature is fake; a real server uses a secret key. function makeToken(a: Account): string { const payload = { sub: a.id, name: a.name, email: a.email, role: a.role, exp: Math.floor(Date.now() / 1000) + 3600 }; return encode({ alg: "HS256", typ: "JWT" }) + "." + encode(payload) + ".demo-signature"; } await wait(300); const cleanEmail = email.trim().toLowerCase(); if (name.trim().length < 2) throw new Error("Please enter your name."); if (!cleanEmail.includes("@")) throw new Error("Please enter a valid email."); if (password.length < 6) throw new Error("The password needs at least 6 characters."); if (accounts.some((a) => a.email === cleanEmail)) throw new Error("This email is already registered."); const account: Account = { id: String(accounts.length + 1), name: name.trim(), email: cleanEmail, password, role: "customer" }; accounts.push(account); console.log("[API] POST /register → 201 (new customer: " + account.email + ")"); return makeToken(account); } await wait(300); const account = accounts.find((a) => a.email === email.trim().toLowerCase() && a.password === password); console.log("[API] POST /login → " + (account ? 200 : 401)); if (!account) throw new Error("Wrong email or password."); return makeToken(account); } // Read the user from the token's payload (the middle part) const p = JSON.parse(atob(token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))); return { id: p.sub, name: p.name, email: p.email, role: p.role, exp: p.exp }; } return user.exp * 1000 < Date.now(); } // RBAC: what each role may do const permissions: Record = { customer: ["shop", "use-cart"], admin: ["shop", "manage-products"], }; return permissions[role].includes(action); } `, "AuthContext.tsx": `import { createContext, useContext, useState, type ReactNode } from "react"; interface AuthValue { user: User | null; token: string | null; login: (email: string, password: string) => Promise; register: (name: string, email: string, password: string) => Promise; logout: () => void; } const AuthContext = createContext(null); const [token, setToken] = useState(null); // The user comes from the token. An expired token means "logged out". const decoded = token ? authService.readUser(token) : null; const user = decoded && !authService.isExpired(decoded) ? decoded : null; const value: AuthValue = { user, token, login: async (email, password) => setToken(await authService.login(email, password)), register: async (name, email, password) => setToken(await authService.register(name, email, password)), logout: () => setToken(null), }; return {children}; } const value = useContext(AuthContext); if (!value) throw new Error("useAuth must be used inside "); return value; } `, "StoreContext.tsx": `import { createContext, useContext, useEffect, useState, type ReactNode } from "react"; interface StoreValue { products: Product[]; updatePrice: (id: number, price: number) => void; cart: Record; // product id -> quantity addToCart: (id: number) => void; removeFromCart: (id: number) => void; cartCount: number; cartTotal: number; } const StoreContext = createContext(null); const { user } = useAuth(); const [products, setProducts] = useState(startProducts); const [cart, setCart] = useState>({}); // Each user has their own cart: empty it when the user changes or logs out useEffect(() => { setCart({}); }, [user?.id]); const cartCount = Object.values(cart).reduce((sum: number, q) => sum + Number(q), 0); const cartTotal = Object.entries(cart).reduce( (sum: number, [id, q]) => sum + (products.find((p) => p.id === Number(id))?.price ?? 0) * Number(q), 0, ); const value: StoreValue = { products, updatePrice: (id, price) => setProducts((list) => list.map((p) => (p.id === id ? { ...p, price } : p))), cart, addToCart: (id) => setCart((c) => ({ ...c, [id]: (c[id] ?? 0) + 1 })), removeFromCart: (id) => setCart((c) => { const next = { ...c }; delete next[id]; return next; }), cartCount, cartTotal, }; return {children}; } const value = useContext(StoreContext); if (!value) throw new Error("useStore must be used inside "); return value; } `, "Guards.tsx": `import { Navigate, useLocation } from "react-router-dom"; // Logged-in users only. Others go to /login, and come back after logging in. const { user } = useAuth(); const location = useLocation(); if (!user) return ; return <>{children}; } // Only roles that may do this action. Others see a "no access" page. const { user } = useAuth(); if (!user) return ; if (!can(user.role, action)) return ; return <>{children}; } `, "NavBar.tsx": `import { NavLink, useNavigate } from "react-router-dom"; // The links depend on who is logged in const { user, logout } = useAuth(); const { cartCount } = useStore(); const navigate = useNavigate(); return ( ); } `, "pages.tsx": `import { useState, type FormEvent } from "react"; const { user } = useAuth(); const { products, addToCart } = useStore(); return (

Shop

{products.map((p) => (

{p.name} ₹{p.price} {!user && Log in to buy} {user?.role === "customer" && } {user?.role === "admin" && Edit price}

))}

); } const { products, cart, removeFromCart, cartTotal } = useStore(); const lines = Object.entries(cart).map(([id, qty]) => ({ product: products.find((p) => p.id === Number(id))!, qty: Number(qty) })); if (lines.length === 0) return

Your cart is empty. Go shopping

; return (

Your cart

{product.name} × {qty} = ₹{product.price * qty}{" "}

Total: ₹{cartTotal}

); } const { products, updatePrice } = useStore(); return (

Admin: products

{products.map((p) => ( ))}

{p.name}

₹ updatePrice(p.id, Number(e.target.value))} />

Price changes show at once in the shop.

); } const { login } = useAuth(); const navigate = useNavigate(); const location = useLocation(); const [email, setEmail] = useState("asha@shop.com"); const [password, setPassword] = useState("asha123"); const [error, setError] = useState(""); const [busy, setBusy] = useState(false); async function handleSubmit(e: FormEvent) { e.preventDefault(); setError(""); setBusy(true); try { await login(email, password); const from = (location.state as { from?: string } | null)?.from ?? "/"; navigate(from, { replace: true }); } catch (err) { setError((err as Error).message); setBusy(false); } } return ( ); } const { register } = useAuth(); const navigate = useNavigate(); const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const [busy, setBusy] = useState(false); async function handleSubmit(e: FormEvent) { e.preventDefault(); setError(""); setBusy(true); try { await register(name, email, password); // new accounts are customers navigate("/", { replace: true }); } catch (err) { setError((err as Error).message); setBusy(false); } } return ( ); } return (

Sorry, your role does not have access to this page. Back to the shop

); } `, "products.ts": `export interface Product { id: number; name: string; price: number; } { id: 1, name: "The Alchemist", price: 299 }, { id: 2, name: "Wings of Fire", price: 350 }, { id: 3, name: "Gel Pen Set", price: 120 }, { id: 4, name: "Canvas Tote Bag", price: 399 }, ]; `, "styles.css": `.shop { font-family: sans-serif; max-width: 560px; } .nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 2px solid #2b59c3; padding-bottom: 6px; margin-bottom: 10px; } .nav a { color: #2b59c3; text-decoration: none; padding: 3px 8px; border-radius: 6px; } .nav a.active { background: #2b59c3; color: white; } .who { margin-left: auto; font-size: 13px; color: #444; } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .card { display: grid; gap: 4px; border: 1px solid #ddd; border-radius: 8px; padding: 8px; } .form { display: grid; gap: 8px; max-width: 300px; } .form input { padding: 6px; } .error { color: #b42318; margin: 0; } .muted { color: #777; font-size: 12px; } .lines { padding-left: 18px; } .total { font-weight: bold; } .table td { padding: 4px 8px; } .table input { width: 80px; } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> Hiding a link is not security. The real protection is on the server: it must check the JWT and the role on **every** API request, for example "only admins may change prices". The downloadable project below does exactly that. ### Download Project Files #### JWT Authentication Project Source Code The complete shop is ready as a real project: a **Vite + React + TypeScript** front end and a small **Express** API that signs real JWTs with `jsonwebtoken`, stores hashed passwords with `bcryptjs`, and checks the token and role on every protected request. Download JWT Authentication Project: [Download E-Commerce Access Management Project](/downloads/react/jwt-ecommerce-access.zip) ``` ecommerce-access/ package.json scripts for the web app and the API .env.example JWT_SECRET and token lifetime server/ index.js Express API: register, login, products, cart, admin auth.js sign and verify JWTs, requireAuth and requireRole middleware db.js JSON file storage (users, products, carts) data/ users.json, products.json, carts.json src/ main.tsx, App.tsx providers and routes api/client.ts fetch helper that adds "Authorization: Bearer " context/ AuthContext (token + user), CartContext auth/ permissions (RBAC), ProtectedRoute, RoleRoute components/ NavBar, ProductCard pages/ Shop, Login, Register, Cart, Admin, NoAccess, NotFound ``` #### Project Setup Instructions 1. Install **Node.js** 18 or newer from nodejs.org, if you do not have it. 2. Download the ZIP with the link above, and unzip it. You get a folder called `ecommerce-access`. 3. Open a terminal in that folder (in VS Code: File, Open Folder, then Terminal, New Terminal). 4. Install the packages and start both the API and the web app: ```bash npm install npm run dev ``` Open `http://localhost:5173`. Log in as **asha@shop.com / asha123** (customer) or **admin@shop.com / admin123** (admin), or register a new customer. The API runs at `http://localhost:3001`. Press `Ctrl + C` to stop both. ## Common mistakes

| Mistake | What you see | Fix | |---|---|---| | Hiding the Admin link but not guarding `/admin` | Anyone who types `/admin` sees the page | Wrap the route in a guard, and check on the server | | Putting a password in the JWT payload | Anyone with the token can read the password | Only put non-secret details like id, name and role | | Not checking `exp` | Users stay "logged in" with an expired token | Treat an expired token as logged out | | Forgetting `replace` on the login redirect | Back button returns to the blocked page, and redirects again | Use `` | | Checking user names instead of roles | Code breaks when users change | Check roles or permissions with a `can()` function | | Using `useAuth` outside `AuthProvider` | Error: useAuth must be used inside AuthProvider | Wrap the app in `` | | Not sending the user back after login | They land on the home page and must find their page again | Save `from` in the redirect, and navigate there after login |

## Check Yourself ## Exercises ## What to Remember - Authentication checks **who** the user is. Authorization checks **what** they may do. Authentication comes first. - After login, the server gives a JWT. The app keeps it, reads the user from its payload, and sends it with each request. - Keep the user in an auth context, protect routes with guards, check roles with a `can()` function, and always check again on the server. Next: Client-Side Rendering

Your orders: #1021 Atomic Habits

Log in

Shop

Your cart

Admin: products

Log in

Create an account