The Ultimate Authentication Course with C# and VueJS

Set up a new ASP.NET Core Web API project in Visual Studio 2022 with C# and .NET 6, install EF Core packages, configure port 8000, and remove weather forecast files.

Set up the database with Microsoft SQL Server and SQL Server Management Studio. Connect to the database and add the connection string in the app settings dot json.

Create a register api endpoint with an api controller at api. Post to /api/register using Postman, and define a dto for first name, last name, email, password, and password confirm.

Implement user registration by serializing DTO data, validating password confirmation, returning unauthorized on mismatch, saving the user with the application db context, and testing the endpoint with Postman.

Apply a json ignore attribute to prevent the password from returning to the front end. Hash the password with sha-256 and store the hash in the database, replacing plain value.

Create a login controller and login detail DTO with email and password, validate credentials, return user data on success, and test the endpoint before adding JWT.

Create a JWT (JSON Web Token) with user id, creation date, and expiry, generating access and refresh tokens signed with secret keys and stored as http-only cookies during login.

Enable cross-origin resource sharing to address same-origin policy by adding middleware to the http request pipeline, allowing credentials and any header or method from ports 3000, 8080, and 4200.

Refresh the access token with a refresh token in a cookie, decode it to obtain user id, verify expiry, and issue a new access token to keep the user authenticated.

The lecture implements a logout controller as a post request that reads the refresh token from the cookie, handles the logout case, deletes the cookie, and returns an okay status.

We implement a secure refresh token flow by adding a user tokens table. Validate refresh tokens in the database on request and delete them on logout.

Implement forgot and reset password controllers and a reset token model with email and token, saving tokens to the database. Generate tokens and prepare for sending reset links by email.

Wire the forgot controller to a mail service to send a reset token via smtp and mail hog for local testing, asynchronously, then verify receipt.

Launch a reset flow with a reset dto, verify password match, validate the reset token, update the user password after hashing, and send a token link via email.

Create a vue project with the vue cli, selecting features like typescript, router, and vuex, then run a local server on localhost:8080 and customize a sign-in form with bootstrap styles.

Learn to build a navigation header with a reusable nav component in a Vue.js app, implement routing for login, register, and home, and wire navigation links with router link.

Implement a register form with vue 3 composition api and reactive data for user details, bind inputs with v-model, submit via axios, and redirect to login on success.

Master a login flow in a vuejs component using reactive email and password, post with axios, manage access and http-only refresh tokens, set bearer auth header, and redirect on success.

Fetch the authenticated user with an access token using a ref in a mounted component, display the user name, and plan a refresh token flow.

Implement axios interceptors to refresh access tokens on 401 errors, calling the refresh endpoint with credentials, updating the authorization header, and retrying the original request.

Implement a logout flow in a Vue.js app with Axios, managing authentication state via ref, handling 401 errors with an interceptor, and preventing multiple refresh attempts.

Learn to manage authentication across components with Vuex, using actions and mutations to toggle the auth state on login and logout, syncing home and nav views.

Implement a forgot password flow in a vue app by wiring a link to a forgot component with an email field, post via axios to trigger success or error notifications.

Create a reset password flow by building a reset component, using a token from the URL, posting the password and password confirm with axios, and redirecting to login after success.

Implement two factor authentication by adding a secret field to the user model, generate base32 secret and otp url for Google Authenticator, and create a two factor controller with migrations.

Implement a two factor authentication flow by adding a two factor DTO with id, validating the code with Google Authenticator, saving secret when needed, and issuing access and refresh tokens.

Split the login flow into a dedicated login form component, emit login data via setup context, and prepare for the TypeScript-based authenticator form in the next tutorial.

Build an authenticator form connected to the login flow, with a six-digit code input bound to a ref, posting to two factor with credentials to obtain access token and redirect.

Learn to generate and display a qr code for two-factor authentication by rendering a data url from the otp url after installing the qr code package.

Implement Google authentication in an ASP.NET Core app by configuring Google credentials, installing Google APIs, and creating a Google auth controller to validate tokens and manage users.

add google authentication on the frontend by placing a login with google button, installing vue three google auth, and exchanging the id token with the backend.