ReaganS94

Better Auth + React + Vite frontend guide

This guide shows how to build a small React frontend that talks to the Better Auth + Express + Mongoose backend from the previous guides.

The frontend will:

• Use the Better Auth React client to call the auth endpoints.
• Support email and password sign up and sign in.
• Optionally support social login (GitHub, Google, Facebook) if you configured them on the backend.
• Call /api/me to check who is logged in.

ReaganS94

Better Auth + Express + Mongoose backend guide (BE only)

This guide shows how to build a TypeScript backend that uses:

• Express for HTTP routes
• Mongoose for your own data (for example students)
• Better Auth for authentication
• MongoDB adapter for Better Auth, using the native mongodb driver

Assumption: you already have a basic MVC style project, or you are fine copying the structure from this guide.

ReaganS94

Auth tokens explained (access vs refresh)

Goal: to stop freakin' out and finally understand why we have 2 tokens (access + refresh), what each one does, and how the full login/refresh/logout cycle works.

We'll cover:

1. Why tokens exist at all
2. Access token (short-lived JWT)
3. Refresh token (long-lived random string)
4. Why we need BOTH, not just one

ReaganS94

Frontend auth integration guide

Goal: make the frontend react to login/register/logout in real time.

After doing this, you get:

• Navbar updates immediately after register or login
• Logout works and updates UI
• /register and /login are blocked when you're already logged in
• /create is blocked if you're not logged in

ReaganS94

Auth service complete guide (Express + TypeScript + MongoDB)

This guide walks you from an empty scaffold to a fully working cookie based auth service. It's the guide to successfully complete the exercise here -> https://github.com/WebDev-WBSCodingSchool/ts-auth-server-starter

It includes:

• password hashing with bcrypt
• JWT access tokens (short lived)
• opaque refresh tokens with rotation and TTL in Mongo
• secure httpOnly cookies for both tokens
• routes: register, login, me, refresh, logout

ReaganS94

1. Create the basic node scaffolding

2. Install the following packages: express, nodemon, cors, dotenv, mongoose

3. Create a dbinit.js file, a .env file, and a .gitignore file

4. In dbinit.js, create the mongo connection function and import it in your entry point file. Don't forget to also invoke the function

5. Paste you mongo URI in the .env file

ReaganS94

Refactoring the MVC Node + Express project to TypeScript

This guide converts your current Node + Express MVC starter from JavaScript to TypeScript with the fewest moving parts. It keeps CommonJS semantics, keeps your folder layout, and adds types where they help most.

What you start with

.
├── controllers
│ └── student_controller.js

ReaganS94

Third-party middleware exercises for the MVC starter

Context: you already have the MVC starter shown in the prompt. For these tasks you will add and use third‑party middleware. Keep changes minimal and focused on third‑party usage.

Prerequisites

Install the libraries first.

npm i morgan express-rate-limit

ReaganS94

Route-level middleware exercises for the MVC starter

Context: you already have the MVC starter shown in the prompt. For these tasks, make changes only in routes/student_routes.js. Do not modify controllers, schemas, or server.js. Keep changes minimal and focused on route-level middleware.

Ground rules

1. Do not remove existing functionality. You can change how routes are declared to attach middleware, but keep the same endpoints working.

2. Define new middleware functions inside routes/student_routes.js above the route registrations.

ReaganS94

App-level middleware exercises

Context: you already have the MVC starter shown above. Do not change controllers, schemas, or routes for these tasks.

Ground rules

1. Do not remove existing functionality. You can replace the placeholder app-level middleware if the task tells you to.

2. Put new app-level middleware above app.use("/api/students", student) and above the 404 handler.