
Master authentication with NodeJS and VueJS, implementing access and refresh tokens and two-factor authentication. Explore registration, login, Google account sign-in, and forgot password workflows with email verification and password reset.
Set up a Node.js project by installing Node.js, creating a directory, initializing npm, adding index.js with a hello log, using nodemon and Visual Studio Code for live reload.
Install TypeScript globally and as a dev dependency, initialize a tsconfig.json, and configure a watch mode to monitor JavaScript files, then run npm start.
Install express and types express, create an express app with a json parser, define a get route that returns hello, and listen on port eight thousand.
Install MySQL and connect to a local database using MySQL Workbench, create a schema, test the connection, and plan to build a users table in the next tutorial.
Connect your express app to a database with TypeORM by configuring host, port, username, password, and database; create a connection and map entities to tables.
Create a user entity with id, first name, last name, email, and password using decorators, ensure a unique email, and synchronize to auto-create the user table on port 8000.
Create a register endpoint in a TypeScript Express app, wiring routes to a controller, validating passwords, hashing with bcrypt, and saving the user via a repository for testing with Postman.
Implement a login flow in NodeJS and VueJS, handling post requests to /login, validating email, comparing hashed passwords, and returning invalid credentials when login fails.
Generate a jwt using sign to create access and refresh tokens with distinct secrets and expiry, store them in cookies, and explain why shorter access tokens enhance security.
Enable cross origin resource sharing with cors, configure origins and credentials to allow cookies from frontends on ports 3000 and 4200, and load secrets via dotenv.
Fetch the authenticated user by reading the access token from cookies, verify the JWT payload, and return the user data without the password.
Post refresh requests to API /refresh to verify the refresh token and issue a new access token for the user, expiring in 30 seconds and stored in a cookie.
Learn how to log out by invalidating cookies: set the access and refresh token cookies to empty with max age zero, return a success message, and require reauthentication.
Develop forgot password flow by creating a forgot controller that handles post /api/forgot with the user email, generates a random unique token, and stores it in a reset entity.
Install mail hook to test sending emails, configure a transporter with host and port, generate the reset URL, and send a password reset email containing a clickable link.
Implement forgot and reset password flows with a post request to the API, validate token, ensure passwords match, find the user by email, and update a hashed password.
Enhance token security by returning access tokens instead of cookies and using bearer tokens via the authorization header, with refresh tokens stored in a database token entity for logout revocation.
Set up a new Vue project with TypeScript and Vuex, run the dev server on port 88, and customize by removing boilerplate and integrating bootstrap to refine the sign-in form.
Set up navigation using a rotor view and rotor links to login, register, and home components, moving forms into views and wiring URL paths for dynamic routing.
Register a user with the Vue 3 composition API by managing reactive inputs via v-model, then post data with an access package and redirect to login on success.
Log in by posting credentials to the login API, manage access and refresh tokens via cookies, set the bearer token in headers, and redirect to the main page.
Fetch the authenticated user with the access token via an axios request to localhost:8000/api/user, and update the message using ref on mounted.
Implement interceptors to refresh expired access tokens using a refresh token and retry the original request, updating the bearer token in the authorization header to keep the user authenticated.
Implement a header logo button and handle logout by posting to the backend with credentials while managing isAuthenticated, then refresh the token once to avoid infinite loops.
Learn to manage authentication with Vuex: define default state, create actions and mutations, commit state immutably, and use computed properties to reflect login status across components.
Implement a forgot password flow with an email input and submit function in a forgot component, and show a reactive alert after posting to the mail hook.
Build a reset password view in VueJS, copy the register code, implement password and password confirm inputs, read the token from the route, post to reset, then redirect to login.
Implement two factor authentication by adding a secret field, generating a speakeasy secret and QR code when missing, and securing login with token-based and two-factor checks.
Explore implementing two-factor authentication with nodejs and vuejs by generating and scanning a qr code, verifying authenticator codes, and securely storing the user secret.
Learn how to implement two factor authentication on the frontend by refactoring the logging feature into a logging form component and emitting login data to an authenticator form.
Build and wire an authenticator form within a login flow, passing login data to an authenticator component, handling code entry, and posting two-factor data with credentials.
Explains implementing a QR code based two-factor authentication by showing a QR when needed, installing a QR code package, and handling login success and state updates.
Set up google cloud credentials and obtain an oauth client id for a web app; verify the frontend token on the server with the google health library and issue tokens.
Add a google login button in the VueJS frontend, configure the google oauth client, and sign in to obtain an id token for backend authentication.
Welcome to this course where you will learn everything you need to know to secure your VueJS and NodeJS app.
In NodeJS you will learn:
Use NodeJS with Typescript
Use TypeORM with MySQL
Use Access & Refresh Tokens
Use HttpOnly Cookies
Send Emails
Login using 2 Factor Authentication (2FA) with Google Authenticator
Social Authentication using your Google Account
In Vue you will learn:
Use Composition API
Create components and routes
Consume API calls
Use Vuex
Create QRCodes
Social Authentication using your Google Account
If these are what you are looking for then this course is for you.
I'm a FullStack Developer with 10+ years of experience. I'm obsessed with clean code and I try my best that my courses have the cleanest code possible.
My teaching style is very straightforward, I will not waste too much time explaining all the ways you can create something or other unnecessary information to increase the length of my lectures. If you want to learn things rapidly then this course is for you.
I also update my courses regularly over time because I don't want them to get outdated. So you can expect more content over time from just one course with better video and audio quality.
If you have any coding problems I will offer my support within 12 hours when you post the question. I'm very active when trying to help my students.
So what are you waiting for, give this course a try and you won't get disappointed.