The following is a custom JWT authentication example and tutorial showing how to setup a simple login page in Angular 10.

For an extended example that includes the use of refresh tokens see Angular 10 - JWT Authentication with Refresh Tokens.

The angular app runs with a fake backend by default to enable it to run completely in the browser without a real backend api (backend-less), to switch to a real api you just have to remove or comment out the line below the comment // provider used to create fake backend located in the app module (/src/app/app.module.ts). You can build your own api or hook it up with the ASP.NET Core api or Node.js api available (instructions below).

Styling of the example app is all done with Bootstrap 4.5 CSS, for more info about Bootstrap see https://getbootstrap.com/docs/4.5/getting-started/introduction/.

The example project is available on GitHub at https://github.com/cornflourblue/angular-10-jwt-authentication-example.

Here it is in action:

(See on StackBlitz at https://stackblitz.com/edit/angular-10-jwt-authentication-example)

Running the Angular 10 JWT Auth Example Locally

1. Install NodeJS and NPM from https://nodejs.org.
2. Download or clone the Angular project source code from https://github.com/cornflourblue/angular-10-jwt-authentication-example
3. Install all required npm packages by running npm install or npm i from the command line in the project root folder (where the package.json is located).
4. Start the app by running npm start from the command line in the project root folder, this will compile the Angular app and automatically launch it in the browser on the URL http://localhost:4200.

NOTE: You can also start the app with the Angular CLI command ng serve --open. To do this first install the Angular CLI globally on your system with the command npm install -g @angular/cli.

For more info on setting up an Angular development environment see Angular - Setup Development Environment.

#angular 10 #jwt authentication #github #angular cli #node.js api