Integration with OIDC library - Feature Request

workcontrolgit commented 3 years ago

I'm submitting a...

[ ] Bug report
[X] Feature request
[X] Documentation issue or request
[X] Question

Current behavior

I have integrated OIDC client from damienbod/angular-auth-oidc-client to support the OpenID Connect Code Flow with PKCE. I need help to define the authentication interface within Ngx-Rocket to work with OIDC library so that it will minimize coding change when upgrading to a new version of ngx-rocket in the future.

Background

I forked the https://github.com/ngx-rocket/starter-kit to https://github.com/workcontrolgit/starter-kit. Then followed the integration instructions from damienbod/angular-auth-oidc-client to add the OIDC client library. At a high level, I made the following code changes

auth\login.component.* - replaced username/password login with redirect to Identity Provider (ex. IdentityServer4) to support login
auth\authentication.guard.ts - replaced isauthenticated with OIDC API method
shell\header\header.component.* - replaced the logout method with OIDC API method

I left the existing auth\authentication.service. and auth\credentials.service. in the code base despite they are no longer in use.

Expected behavior

Please consider creating the interface and abstract classes for Authentication and Credentials. The default implementation can be form-based. Additional identity providers can be added and be configurable.

Examples techniques for define interface and abstract classes: http://dotnetpattern.com/typescript-abstract-class

New set of code to integrate OIDC libary into ngx-rocket

Instead of using the code in ngx-rocket auth\authentication. and auth\credentials., below is a new set of code in auth.service.ts (https://github.com/workcontrolgit/starter-kit/blob/main/src/app/auth/auth.service.ts) referencing the OIDC library


import { Injectable } from '@angular/core';
import { of } from 'rxjs';
import { OidcSecurityService } from 'angular-auth-oidc-client';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private oidcSecurityService: OidcSecurityService) {}

  get isLoggedIn() {
    return this.oidcSecurityService.isAuthenticated$;
  }

  get token() {
    return this.oidcSecurityService.getToken();
  }

  get userData() {
    return this.oidcSecurityService.userData$;
  }

  checkAuth() {
    return this.oidcSecurityService.checkAuth();
  }

  doLogin() {
    return of(this.oidcSecurityService.authorize());
  }

  signOut() {
    this.oidcSecurityService.logoff();
  }
}

Minimal reproduction of the problem with instructions

Environment

Others:

workcontrolgit commented 3 years ago

I wrote a blog to show how to use Ngx-Rocket to create an Angular app and then install/configure OIDC client to support Code Flow PKCE. I thought to share it here.

Secure Angular 11 App with Code Flow PKCE and IdentityServer4

sinedied commented 3 years ago

It would be interesting to have such an integration as an option, if you're willing to work on it.

workcontrolgit commented 3 years ago

@sinedied - I will be happy to help. How can I contribute to your repo? I have evaluated and integrated two popular Angular OIDC libraries into your starter kit. IHMO, the angular-oauth2-oidc from manfredsteyer is more developer friendly. Below are links to the Angular OIDC libraries and the integration repo/blog I created.

sinedied commented 3 years ago

You can have a look at the contribution guide here: https://github.com/ngx-rocket/generator-ngx-rocket/blob/main/CONTRIBUTING.md

If there's not too many changes involved in the existing templates, you could probably add an OIDC option in the new features prompt: https://github.com/ngx-rocket/generator-ngx-rocket/blob/main/generators/app/prompts.js#L116-L152

Or if you think there would be too many changes involved, I was thinking of maybe adding a "recipes" section to this repo, where we could either link to your blog post and example repo or make a quick resume of the main steps involved for OIDC integration.

workcontrolgit commented 3 years ago

@sinedied - I like the idea to start with "recipes". There are numerous identity and access management products (ex. identity server, Azure, AWS, Google, Auth0, Okta, etc.) supporting OIDC. Some support authentication only and some support both authentication and authorization. Developers can contribute recipes for platforms they have worked with. The proven recipes can be refactored into extension to your starter kit later on.

sinedied commented 3 years ago

That's perfect then, I'll see to create a recipes folder and doc in the repo, so you can add it there.

ngx-rocket / generator-ngx-rocket