Frontend Authentication with JWT in Nuxt | Full-Stack Web Dev #11 скачать в хорошем качестве

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