https://github.com/dotnet-labs/jwtauthdemo

ASP.NET Core + Angular JWT auth demo; integration tests; login, logout, refresh token, impersonation, authentication, authorization; run on Docker Compose.
https://github.com/dotnet-labs/jwtauthdemo

angular api asp-net-core aspnetcore authentication authorization docker docker-compose impersonation integration-testing json-web-token jwt jwt-auth jwt-token login logout refresh-token

Last synced: about 1 month ago
JSON representation

ASP.NET Core + Angular JWT auth demo; integration tests; login, logout, refresh token, impersonation, authentication, authorization; run on Docker Compose.

• Host: GitHub
• URL: https://github.com/dotnet-labs/jwtauthdemo
• Owner: dotnet-labs
• License: mit
• Created: 2020-07-17T15:10:51.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-12-18T14:52:35.000Z (over 1 year ago)
• Last Synced: 2025-03-29T09:09:26.852Z (about 1 month ago)
• Topics: angular, api, asp-net-core, aspnetcore, authentication, authorization, docker, docker-compose, impersonation, integration-testing, json-web-token, jwt, jwt-auth, jwt-token, login, logout, refresh-token
• Language: C#
• Homepage:
• Size: 954 KB
• Stars: 410
• Watchers: 19
• Forks: 143
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# JWT Auth Demo (Angular + ASP.NET Core / ASP.NET 8)



This repository demos an Angular SPA and an ASP.NET Core web API application using JWT auth, and an integration testing project for a set of actions including login, logout, refresh token, impersonation, authentication, and authorization.

## Medium Articles

1. [JWT Auth in ASP.NET Core](https://codeburst.io/jwt-auth-in-asp-net-core-148fb72bed03)

   In this article, I will show you how to implement an ASP.NET Core web API application using JWT authentication and authorization.

1. [JWT Authentication in Angular](https://codeburst.io/jwt-authentication-in-angular-48cfa882832c)

   In this article, we will build a simple app using Angular. We will implement an `AuthService` class to handle login, logout, and refresh token processes, as well as operations for localStorage key-value pairs. We will create a `JwtInterceptor` class to add JWT Bearer token to the HTTP request headers, and an `UnauthorizedInterceptor` class to redirect the user to the login page if an HTTP status code 401 is received. We will use an `AuthGuard` to prevent unauthenticated user from visiting the application pages.

## Demo

![jwt demo](./jwt-angular-app.gif)

## Solution Structure

This repository includes two applications: an Angular SPA in the `angular` folder, and an ASP.NET Core web API app in the `webapi` folder. The SPA makes HTTP requests to the server side (the `webapi` app) using an API BaseURL `https://localhost:5001`. The API BaseURL is set in the `environment.ts` file and the `environment.prod.ts` file, which can be modified based on your situation.

- `angular`

  The SPA is served using NGINX on Docker. The application demonstrates JWT authorization in the front-end.

- `webapi`

  The ASP.NET Core web API app is served by Kestrel on Docker. This app has implemented HTTPS support.

## Usage

The demo is configured to run by Docker Compose. The services are listed in the `docker-compose.yml` file. You can launch the demo by the following command.

```bash

docker-compose up --build --remove-orphans

```

Then visit [http://localhost:8080](http://localhost:8080) for the app, and [https://localhost:5001](https://localhost:5001) for Swagger document for the web API project.

**NOTE:** You can also move the folders around to consolidate the solution as one ASP.NET Core web app using the SPA service.

## Screenshots

- **Front-end** ([http://localhost:8080](http://localhost:8080))

  ![angular app](./localhost_8080.png)

- **Back-end** ([https://localhost:5001](https://localhost:5001))

  ![web api](./localhost_5001.png)

## License

Feel free to use the code in this repository as it is under MIT license.