# oauth2-jwt-angular

**Repository Path**: mirrors_tomitribe/oauth2-jwt-angular

## Basic Information

- **Project Name**: oauth2-jwt-angular
- **Description**: OAuth 2.0 JWT with Angular 8
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-26
- **Last Updated**: 2026-02-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Microprofile JWT Movie Chat

This web application shows how to use Microprofile JWT to secure your microservices.
It uses Apache TomEE as the default Microprofile implementation.

# OAuth2 + JWT (STS)

In order to work, this application requires an STS capable of generating signed JWT tokens.
We use Tribestream API Gateway as it's a complete Security Token Service.
It's also capable of doing routing and while enforcing permissions.
If you want to know more, check out the website at https://tribestream.io

To start the Tribestream API Gateway on a terminal execute the following command:

    mvn tag:run

The following message indicates the Tribestream API Gateway is up and running:

    [INFO] Tribestream started http://localhost:8080/tag/

You can login now using on a browser the following URL: http://localhost:8080/tag/ using `admin` for both the username and password.

# Start the movie chat application

On a new terminal execute the following command:


    mvn clean install -DskipTests tomee:run

The following message indicates the application is up and running:

    08-Mar-2019 11:34:07.760 INFO [main] sun.reflect.NativeMethodAccessorImpl.invoke Starting ProtocolHandler ["http-nio-8181"]
    08-Mar-2019 11:34:07.765 INFO [main] sun.reflect.NativeMethodAccessorImpl.invoke Starting ProtocolHandler ["ajp-nio-8010"]
    08-Mar-2019 11:34:07.767 INFO [main] sun.reflect.NativeMethodAccessorImpl.invoke Server startup in 6786 ms


You can login now using on a browser the following URL: http://localhost:8080/movies

You can test any of the following accounts:
- Account `alex` with password `password` with create, update and delete role.
- Account `john` with password `password` with just comments add role.

For deeper exaplanation of Microprofile JWT using this application access: https://tribestream.io/guide/en/api-gateway/microservice-security-microprofile-jwt/current/

# Angular Http Interceptors

## Simple Example
For your project to sign a request you might need only one interceptor or header inject.
```typescript
@Injectable()
export class AuthHeaderInterceptor implements HttpInterceptor {
  constructor(private $auth: AuthService) { }
  intercept(req: RetryHttpRequest, next: HttpHandler): Observable<any> {
    return next.handle(req.clone({
      headers:
        req.headers.set(this.$auth.authHeader,
          `${this.$auth.authPrefix} ${this.$auth.authToken}`)
    }));
  }
}
```

## Usage
For this example we added three interceptors that are injected into angular 8 project into root module providers.

```typescript
import { HeaderInterceptors } from './services/header.interceptor';

...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    ...
    HeaderInterceptors
  ],
  bootstrap: [...]
})
export class AppModule { }
```

# Our interceptors usage

Check our interceptors https://github.com/tomitribe/oauth2-jwt-angular/blob/master/src/main/angular-app/src/app/services/header.interceptor.ts[source] and their https://github.com/tomitribe/oauth2-jwt-angular/blob/master/src/main/angular-app/src/app/app.module.ts#L52[usage]:

First interceptor https://github.com/tomitribe/oauth2-jwt-angular/blob/master/src/main/angular-app/src/app/services/header.interceptor.ts#L13[NoAuthHeaderInterceptor] adds `$$noAuth` property to a request for any request that should not be signed/authorised.
```typescript
@Injectable()
export class NoAuthHeaderInterceptor implements HttpInterceptor {
  constructor(private $auth: AuthService) { }
  intercept(req: RetryHttpRequest, next: HttpHandler): Observable<any> {
    if (...) {
      req.$$noAuth = true;
      return next.handle(req);
    }

    return next.handle(req);
  }
}
```
Second interceptor https://github.com/tomitribe/oauth2-jwt-angular/blob/master/src/main/angular-app/src/app/services/header.interceptor.ts#L27[OauthHeaderInterceptor] adds Authorization header to a request.
```typescript
@Injectable()
export class OauthHeaderInterceptor implements HttpInterceptor {
  constructor(private $auth: AuthService) { }
  signRequest(req) {
    return req.clone({
      headers:
        req.headers.set(this.$auth.authHeader,
          `${this.$auth.authPrefix} ${this.$auth.authToken}`)
    });
  }
  intercept(req: RetryHttpRequest, next: HttpHandler): Observable<any> {
    if (req.$$noAuth) {
      return next.handle(req);
    }

    return next.handle(this.signRequest(req));
  }
}
```

Third interceptor https://github.com/tomitribe/oauth2-jwt-angular/blob/master/src/main/angular-app/src/app/services/header.interceptor.ts#L46[RetryHeaderInterceptor] checks for 401 errors and handles refresh/retry of request.

```typescript
@Injectable()
export class RetryHeaderInterceptor implements HttpInterceptor {
  constructor(private $auth: AuthService) { }
  intercept(req: RetryHttpRequest, next: HttpHandler): Observable<any> {
    if (req.$$retry) {
      req.$$retry = false;
      return next.handle(req);
    }

    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        ...
        if (error.status === 401) {
          return this.$auth.refresh()
            .pipe(
              filter(auth => !!auth),
              switchMap((auth) => {
                const headers = req.headers
                  .set(this.$auth.authHeader,
                    `${this.$auth.authPrefix} ${this.$auth.authToken}`);
                const clone = req.clone({ headers }) as RetryHttpRequest;
                clone.$$retry = true;
                clone.$$noAuth = true;
                return next.handle(clone);
              })
            );
        } else {
          ...
        }
      })
    );
  }
}
```