.NET Identity with Angular (JWT, Email Confirmation, MFA)

Create an asp.net core web api project in Visual Studio, configure nullable and implicit usings, remove weather forecast, test with Postman, and push to GitHub with a dotnet gitignore.

Install key NuGet packages for JWT bearer, EF Core Identity, SQL Server, and EF Core tools, then create an API utility class library and wire a project reference.

Derive AppUser from identity user and AppRole from identity role with integer keys, add created at and is active properties, and implement a code-first bridge table for many-to-many user roles.

Create and apply the first migration for identity tables by configuring the db context with sql server, setting the default connection in appsettings.json, and updating the database to generate identity tables.

Create an account controller with a register endpoint that accepts a register dto containing username, email, and password, and enforces validation with data annotations and regex.

Extend the web app startup with application and authentication services to wire Identity using app user and role, and set password length to six with no digit requirement.

Learn how to implement the register endpoint for .NET Identity with Angular, validating unique email and username, creating the user with password, and returning bad request responses.

Implement a login endpoint that authenticates users by username or email, validates the password with sign in manager, and returns a JWT created by the token service using app settings.

Build the jwt flow by constructing user claims (id, username, email), sign with hmac sha512, set 60-day expiry, inject the token service, and store the jwt in a server-side cookie.

Store the JWT in a secure server-side cookie during login by configuring cookie options (essential, HttpOnly, secure, expires, SameSite none) and appending it to the response.

Configure JWT bearer authentication with cookie support and token validation parameters, and implement an authentication pipeline and auth-status endpoint to verify user authentication via cookies.

Implement a secured logout endpoint that clears the JWT cookie and a refresh app user endpoint that issues a new JWT from claims via claims principal extensions and a DTO.

Prepare the api side by adding a name property to app users, apply migrations on startup, and seed the database with John, Peter, Tom, and Barb using 123456.

Refine registration by using name instead of username, enforce a new name regex, and add name-taken and email-taken endpoints with query parameters to validate availability.

Authorize the play controller by enriching the user dto and claims with name, and expose a get players endpoint that returns data only to authenticated users, returning 401 when unauthenticated.

Create a standardized API response model with status code, title, details, errors, and data. Implement default title and message logic for statuses to ensure consistent error handling and toaster display.

Implement a consistent API response using an API response class and return 400, 401, and 200 with clear messages, extracting model state errors for the Angular site.

Demonstrates implementing account lockout after three failed logins, returning a 401 with a clear 'account is temporarily locked' message and a computed unlock countdown for Angular clients.

Derive api controllers from ApiCoreController and configure dependency injection for context, IConfiguration, and token service, then implement a cors policy with the Angular client URL to enable credentials.

Install angular 20 on windows with npm and nvm, then generate localhost ssl using make cert and enable ssl in angular.json to run ng serve over https.

Open Visual Studio Code, edit app.html to display a basic identity app, then install ng bootstrap 19 for Angular 20, install Bootstrap icons, Bootswatch Terra, and nginx toaster.

Organize an Angular project by creating core and shared folders, generating login and register components, and adding an account service, with routes and a core module featuring navbar and footer.

An angular routing tutorial demonstrates implementing account routes, login/register navigation, not-found handling, a responsive navbar and footer with router links, active states, and a collapsible menu.

Create angular models mirroring the backend dto, including login, register, user, and auth status, plus a generic api response wrapper with html and a validation message, and a notification modal.

Configure angular dependencies by adding provide animations, toaster with a 3-second timeout and top-right position, and http client with interceptors; install angular animations version 20 to resolve errors.

Explain the Angular login component: wire HttpClient and router, post login data with credentials, and validate a reactive username and password form while handling cookies and errors.

Implement a login flow in Angular using signal for user state, update the user with map and pipe, and show an authenticated navbar with the username and logout.

Persist login by checking auth status and refreshing the user via account service, handle logout, and initialize the app with credentials.

Configure interceptors and guards in the core folder to manage authentication. Use a credential interceptor to attach with credentials and an auth guard with canActivate to verify account service user.

Implement an Angular error interceptor that handles HTTP errors via RxJS catchError, routing, and toasts for 400–500 status codes, including logout on 403 and not-found page.

Learn to build a robust angular register component with reactive forms, client-side validation, async checks for name and email availability, password confirmation, and integration with the account service for signup.

Builds a registration form with name, email, password, and confirm password, featuring validation states, real-time availability checks (name taken, email taken), and a 500 ms debounce API call.

Demonstrate the play component by fetching players via an authorized API with play service, display the response message on init, and commit login and guard setup.

Set up Zoho-based email service with smtp, implement email send dto, and create a service unit of work to manage email confirmation and password reset in .NET identity with Angular.

Demonstrates testing an email service via a test endpoint with Postman, sending emails through a configured mail server, validating delivery to inbox or spam, and securing credentials with user secrets.

Configure email confirmation by sending a time-limited app user token to the registrant, extend identity user tokens with expires, and apply an entity framework migration to persist tokens.

Implement email confirmation during registration by sending a six-character token, storing it as an app user token named EC with an expiry, and handling success or failure responses.

This section demonstrates implementing email verification by using HTML email templates, generating and validating tokens with expiry, and a confirm email endpoint to activate user accounts.

Explore how to implement a resend confirmation email endpoint in .NET Identity with Angular, including an email DTO, secure fake success messaging, and a delayed response to conceal user existence.

Explain the forgot username or password flow: an http post validates the email, validates confirmation and activity, then sends a token email via a private method and stores 60-minute token.

Learn to implement forgot username or password with a reset password email template, route, and verification code, while considering security implications of exposing registered emails.

Implement a token-based reset password flow by validating email and token and setting a new password. Explain token validation, old password removal, and testing with forgot password and expiry checks.

Develop client-side authentication components in Angular: create confirm email and reset password models, build a code input component, integrate account service, and configure routes for confirm, send, and reset password.

Implement email confirmation in an Angular app with .NET identity by routing to a confirm-email page, passing the email via query params, and validating a six-character code.

Resend a confirmation email and handle forgot username or password flows using the send email component, with form validation, mode routing, and API calls.

Implement forgot username or password flow with email sending and mode handling, and enable a secure reset password process using Angular components, form validation, and API calls.

Demonstrates the reset password process: enter the code, then enter a new password and confirmation with validation (required, min 6, max 15, matching), and navigate reset/forgot and email confirmation flows.

Refactors the api layer by injecting user manager, moving private methods to a shared api core, and implementing a robust password validation flow with lockout handling and JWT cookie management.

Create an authorized profile controller with get and put endpoints to fetch the user profile and change password, using my profile and change password DTOs and validating the current password.

Build and test a delete account API in a .NET Identity with Angular project, validating username, password, and a confirmation box, then remove the JWT cookie after permanent deletion.

Implement edit profile api using a derived edit profile dto and http put. Change email triggers confirmation, resets jwt, and returns app user dto.

Builds a client-side profile experience by creating my profile components and services, wiring routes for edit profile, change password, delete account, and MFA setup with auth guard and responsive navigation.

illustrates building a my profile navigation with multiple items—change password, MFA setup, and delete account—using bootstrap icons, router links, and responsive grid styling.

Implement change password, delete account, and edit profile features through the my profile service, wiring API calls, models, and DTOs in Angular.

Create a reusable Angular form input component using control value accessor to render label, input, and validation messages, with minlength, maxlength checks, password toggle, error handling, and shared notifications.

Design and validate a change password component in Angular, using a form input, with current, new, and confirm password fields, password visibility toggles, length validations, mismatch checks, and toaster notifications.

Builds a delete account flow in Angular by validating current username and password with a confirmation, then calls profile.deleteAccount via the account service and signs out the user.

Enable and edit user profiles in an Angular app: load profile, initialize a validated form for name and email, toggle edit mode, handle email change via confirmation, save and notify.

Implement a confirm box modal for edit profile changes, pass the message, return a boolean via an observable, and guide email changes, logout, and email confirmation using ng bootstrap.

Implement multi-factor authentication by adding the otp.net NuGet package, expose MFA status and QR code endpoints, and generate a secret and OTP URL for Google Authenticator.

Enable and disable multi-factor authentication in .NET identity by using MFA enable and disable endpoints, validating secret and code with OTP, and updating two-factor tokens.

Enable authentication and generate an MFA token as a JWT containing username, then extract the username from the MFA token and verify with an MFA key expiring in 15 minutes.

Implement multi factor authentication in a .NET identity app by posting MFA tokens to a verify endpoint, validating codes, and issuing a JWT upon successful login.

Implement multi-factor authentication in an Angular app by installing angular x qr code, retrieving MFA status, displaying a QR code, and enabling MFA via API.

Enable and disable multi-factor authentication in an Angular app by scanning a QR code, entering a six-character code and current password, with validation and status refresh.

Link the login flow to multi-factor authentication by extracting the MFA token, routing to an MFA verify component, and validating a six-digit code from an authenticator app to complete sign-in.

Learn to implement a self-serve MFA deactivation flow by sending a disable MFA email, verifying a token, and updating user MFA status via dedicated endpoints.