Frontend Authentication with JWT in Nuxt | Full-Stack Web Dev #11

Описание: This is Episode #11 of my Nuxt Full-Stack Web Development series.

In the last video, we built backend authentication using bcrypt for password hashing and server routes for /register and /login.
Now, we’re taking the next big step: linking the frontend and backend together using JWT (JSON Web Tokens) for secure user authentication.

You’ll learn how to:
Generate and sign JWT tokens on the server
Store and access tokens securely in the browser (cookies)
Handle login state on the frontend

By the end of this video, your app will have full login persistence, users will be able to register, log in, and stay authenticated.

Subscribe to keep following the series as we continue building this full-stack project step by step.

00:00 – Intro & backend authentication recap
00:00:18 – Creating the Register page
00:02:00 – Building and styling the form with Tailwind
00:04:40 – Adding reactive state and v-model bindings
00:06:40 – Form validation and error display
00:08:30 – Submitting the form to the backend (/api/auth/register)
00:10:20 – Testing registration and handling responses
00:11:20 – Creating the Login page
00:13:30 – Handling login errors (401 Unauthorized)
00:15:00 – Introduction to JWTs (JSON Web Tokens)
00:16:10 – Installing and configuring jsonwebtoken
00:17:30 – Signing tokens and using environment secrets
00:18:40 – Testing and decoding JWTs (jwt.io demo)
00:20:10 – Saving JWTs as cookies with useCookie()
00:21:40 – Creating /api/auth/verifyToken for verification
00:23:00 – Validating tokens server-side & returning user data
00:24:00 – Updating Navbar to detect logged-in user
00:25:10 – Final test & full frontend-backend authentication
00:25:50 – Outro & what’s next