Angular 14 Authentication with .NET 6.0 (ASP.NET Core) JWT API
In this tutorial we'll go through how to implement authentication with an Angular front-end app and .NET (ASP.NET Core) back-end API
The result is a simple full-stack login application with the front-end built with Angular 14 and the back-end built with .NET 6.0.
Tutorial Contents
- Angular App Overview
- ASP.NET Core API Overview
- Download and Start the Angular App
- Download and Start the ASP.NET Core API
- Connect the Front-End to the Back-End
Angular 14 Front-End App Overview
Front-end authentication app built with Angular 14.2.10
The Angular app is pretty minimal and contains just 2 pages to demonstrate JWT authentication:
/login- public login page with username and password fields, on submit the page sends a POST request to the API to authenticate user credentials, on success the API returns a JWT token to make authenticated requests to secure API routes./- secure home page that displays a list of users fetched from a secure API endpoint using the JWT token received after successful login.
Complete documentation is available at Angular 14 - JWT Authentication Example & Tutorial.
ASP.NET Core Back-End API Overview
Authentication API built with .NET 6.0
The ASP.NET Core API has just two endpoints/routes to demonstrate authentication with JWT and accessing a restricted route with JWT:
/users/authenticate- public route that accepts HTTP POST requests containing the username and password in the body. If the username and password are correct then a JWT authentication token and the user details are returned./users- secure route that accepts HTTP GET requests and returns a list of all the users in the application if the HTTP Authorization header contains a valid JWT token. If there is no auth token or the token is invalid then a 401 Unauthorized response is returned.
Complete documentation is available at .NET 6.0 - JWT Authentication Tutorial with Example API.
Download and Start the Angular Auth App
Follow these steps to run the Angular 14 front-end authentication app:
- Install Node.js and npm from https://nodejs.org.
- Download or clone the Angular project source code from https://github.com/cornflourblue/angular-14-jwt-authentication-example
- Install all required npm packages by running
npm installornpm ifrom the command line in the project root folder (where the package.json is located). - Start the app by running
npm startfrom the command line in the project root folder, this will compile the Angular app and automatically launch it in the browser on the URLhttp://localhost:4200.
Fake backend API by default
The Angular app runs with a fake backend by default to enable it to run completely in the browser without a real API, we'll switch to connect to the ASP.NET Core API below once it's up and running.
Download and Start the ASP.NET Core Auth API
Follow these steps to run the .NET 6.0 backend API:
- Install the .NET SDK from https://dotnet.microsoft.com/download.
- Download or clone the project source code from https://github.com/cornflourblue/dotnet-6-jwt-authentication-api
- Start the api by running
dotnet runfrom the command line in the project root folder (where the WebApi.csproj file is located), you should see the messageNow listening on: http://localhost:4000.
Connect the Front-End with the Back-End
In the Angular app, remove or comment out the line below the comment // provider used to create fake backend located in the /src/app/app.module.ts file, then restart the Angular app and it will now send requests to the ASP.NET Core authentication API.
That's it! You now have a full stack Angular + ASP.NET Core application running.
Need Some Angular Help?
Search fiverr for freelance Angular developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!