Merge pull request #1937 from timdeschryver/signals

feat: add authenticated and userData signals

Author: FabianGosebrink

.github/workflows/build.yml

@@ -263,43 +263,3 @@ jobs:
  - name: Build Angular Application
  working-directory: ./angular-auth-oidc-client-test
  run: sudo npm run build
-
- LibWithAngularV15:
- needs: build_job
- runs-on: ubuntu-latest
- name: Angular V15
- steps:
- - name: Setup Node.js
- uses: actions/setup-node@v2
- with:
- node-version: 16
-
- - name: Download Artefact
- uses: actions/download-artifact@v2
- with:
- name: angular_auth_oidc_client_artefact
- path: angular-auth-oidc-client-artefact
-
- - name: Install AngularCLI globally
- run: sudo npm install -g @angular/cli@15
-
- - name: Show ng Version
- run: ng version
-
- - name: Create Angular Project
- run: sudo ng new angular-auth-oidc-client-test --skip-git
-
- - name: Npm Install & Install Library from local artefact
- run: |
- sudo cp -R angular-auth-oidc-client-artefact angular-auth-oidc-client-test/
- cd angular-auth-oidc-client-test
- sudo npm install --unsafe-perm=true
- sudo ng add ./angular-auth-oidc-client-artefact --authority-url-or-tenant-id "my-authority-url" --flow-type "OIDC Code Flow PKCE using refresh tokens" --use-local-package=true --skip-confirmation
-
- - name: Test Angular Application
- working-directory: ./angular-auth-oidc-client-test
- run: npm test -- --watch=false --browsers=ChromeHeadless
-
- - name: Build Angular Application
- working-directory: ./angular-auth-oidc-client-test
- run: sudo npm run build

projects/angular-auth-oidc-client/src/lib/oidc.security.service.spec.ts

@@ -1,7 +1,6 @@
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { Observable, of } from 'rxjs';
 import { mockProvider } from '../test/auto-mock';
-import { AuthenticatedResult } from './auth-state/auth-result';
 import { AuthStateService } from './auth-state/auth-state.service';
 import { CheckAuthService } from './auth-state/check-auth.service';
 import { CallbackService } from './callback/callback.service';
@@ -15,7 +14,6 @@ import { LoginService } from './login/login.service';
 import { LogoffRevocationService } from './logoff-revoke/logoff-revocation.service';
 import { OidcSecurityService } from './oidc.security.service';
 import { UserService } from './user-data/user.service';
-import { UserDataResult } from './user-data/userdata-result';
 import { TokenHelperService } from './utils/tokenHelper/token-helper.service';
 import { UrlService } from './utils/url/url.service';
 
@@ -34,6 +32,8 @@ describe('OidcSecurityService', () => {
  let userService: UserService;
  let urlService: UrlService;
  let callbackService: CallbackService;
+ let authenticatedSpy: jasmine.Spy;
+ let userDataSpy: jasmine.Spy;
 
  beforeEach(() => {
  TestBed.configureTestingModule({
@@ -58,10 +58,9 @@ describe('OidcSecurityService', () => {
  });
 
  beforeEach(() => {
- oidcSecurityService = TestBed.inject(OidcSecurityService);
+ authStateService = TestBed.inject(AuthStateService);
  tokenHelperService = TestBed.inject(TokenHelperService);
  configurationService = TestBed.inject(ConfigurationService);
- authStateService = TestBed.inject(AuthStateService);
  flowsDataService = TestBed.inject(FlowsDataService);
  logoffRevocationService = TestBed.inject(LogoffRevocationService);
  loginService = TestBed.inject(LoginService);
@@ -72,6 +71,11 @@ describe('OidcSecurityService', () => {
  authWellKnownService = TestBed.inject(AuthWellKnownService);
  checkSessionService = TestBed.inject(CheckSessionService);
  callbackService = TestBed.inject(CallbackService);
+
+ // this is required because these methods will be invoked by the signal properties when the service is created
+ authenticatedSpy = spyOnProperty(authStateService, 'authenticated$').and.returnValue(of({ isAuthenticated: false, allConfigsAuthenticated: [] }));
+ userDataSpy = spyOnProperty(userService, 'userData$').and.returnValue(of({ userData: null, allUserData: [] }));
+ oidcSecurityService = TestBed.inject(OidcSecurityService);
  });
 
  it('should create', () => {
@@ -80,29 +84,40 @@ describe('OidcSecurityService', () => {
 
  describe('userData$', () => {
  it('calls userService.userData$', waitForAsync(() => {
- const spy = spyOnProperty(userService, 'userData$').and.returnValue(
- of({} as UserDataResult)
- );
-
  oidcSecurityService.userData$.subscribe(() => {
- expect(spy).toHaveBeenCalledTimes(1);
+ // 1x from this subscribe
+ // 1x by the signal property
+ expect(userDataSpy).toHaveBeenCalledTimes(2);
  });
  }));
  });
 
+ describe('userData', () => {
+ it('calls userService.userData$', waitForAsync(() => {
+ const _userdata = oidcSecurityService.userData();
+
+ expect(userDataSpy).toHaveBeenCalledTimes(1);
+ }));
+ });
+
  describe('isAuthenticated$', () => {
  it('calls authStateService.isAuthenticated$', waitForAsync(() => {
- const spy = spyOnProperty(
- authStateService,
- 'authenticated$'
- ).and.returnValue(of({} as AuthenticatedResult));
-
  oidcSecurityService.isAuthenticated$.subscribe(() => {
- expect(spy).toHaveBeenCalledTimes(1);
+ // 1x from this subscribe
+ // 1x by the signal property
+ expect(authenticatedSpy).toHaveBeenCalledTimes(2);
  });
  }));
  });
 
+ describe('authenticated', () => {
+ it('calls authStateService.isAuthenticated$', waitForAsync(() => {
+ const _authenticated = oidcSecurityService.authenticated();
+
+ expect(authenticatedSpy).toHaveBeenCalledTimes(1);
+ }));
+ });
+
  describe('checkSessionChanged$', () => {
  it('calls checkSessionService.checkSessionChanged$', waitForAsync(() => {
  const spy = spyOnProperty(

projects/angular-auth-oidc-client/src/lib/oidc.security.service.ts

@@ -22,6 +22,7 @@ import { UserService } from './user-data/user.service';
 import { UserDataResult } from './user-data/userdata-result';
 import { TokenHelperService } from './utils/tokenHelper/token-helper.service';
 import { UrlService } from './utils/url/url.service';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Injectable({ providedIn: 'root' })
 export class OidcSecurityService {
@@ -61,6 +62,15 @@ export class OidcSecurityService {
  return this.userService.userData$;
  }
 
+ /**
+ * Provides information about the user after they have logged in.
+ *
+ * @returns Returns an object containing either the user data directly (single config) or
+ * the user data per config in case you are running with multiple configs
+ */
+ userData = toSignal(this.userData$, {requireSync: true});
+
+
  /**
  * Emits each time an authorization event occurs.
  *
@@ -74,6 +84,17 @@ export class OidcSecurityService {
  return this.authStateService.authenticated$;
  }
 
+ /**
+ * Emits each time an authorization event occurs.
+ *
+ * @returns Returns an object containing if you are authenticated or not.
+ * Single Config: true if config is authenticated, false if not.
+ * Multiple Configs: true is all configs are authenticated, false if only one of them is not
+ *
+ * The `allConfigsAuthenticated` property contains the auth information _per config_.
+ */
+ authenticated = toSignal(this.isAuthenticated$, {requireSync: true});
+
  /**
  * Emits each time the server sends a CheckSession event and the value changed. This property will always return
  * true.

projects/sample-code-flow-standalone/src/app/forbidden/forbidden.component.html

@@ -1,3 +1,3 @@
 <div>
- Normally you should not see this, authenticated == {{ isAuthenticated }}
+ Normally you should not see this, authenticated == {{ authenticated().isAuthenticated }}
 </div>

projects/sample-code-flow-standalone/src/app/forbidden/forbidden.component.ts

@@ -1,23 +1,12 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
 
 @Component({
  selector: 'app-forbidden',
  templateUrl: 'forbidden.component.html',
  standalone: true,
 })
-export class ForbiddenComponent implements OnInit {
+export class ForbiddenComponent {
  private readonly oidcSecurityService = inject(OidcSecurityService);
-
- public isAuthenticated = false;
-
- ngOnInit(): void {
- this.oidcSecurityService.isAuthenticated$.subscribe(
- ({ isAuthenticated }) => {
- this.isAuthenticated = isAuthenticated;
-
- console.warn('authenticated: ', isAuthenticated);
- }
- );
- }
+ protected readonly authenticated = this.oidcSecurityService.authenticated;
 }

projects/sample-code-flow-standalone/src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <div>Welcome to home Route</div>
 
 <br />
-Is Authenticated: {{ isAuthenticated }}
-<pre>{{ userData$ | async | json }}</pre>
+Is Authenticated: {{ authenticated().isAuthenticated }}
+<pre>{{ userData() | json }}</pre>

projects/sample-code-flow-standalone/src/app/home/home.component.ts

@@ -1,27 +1,15 @@
-import { AsyncPipe, JsonPipe } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
 
 @Component({
  selector: 'app-home',
  templateUrl: 'home.component.html',
  standalone: true,
- imports: [AsyncPipe, JsonPipe],
+ imports: [JsonPipe],
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent {
  private readonly oidcSecurityService = inject(OidcSecurityService);
-
- userData$ = this.oidcSecurityService.userData$;
-
- isAuthenticated = false;
-
- ngOnInit(): void {
- this.oidcSecurityService.isAuthenticated$.subscribe(
- ({ isAuthenticated }) => {
- this.isAuthenticated = isAuthenticated;
-
- console.warn('authenticated: ', isAuthenticated);
- }
- );
- }
+ protected readonly userData = this.oidcSecurityService.userData;
+ protected readonly authenticated = this.oidcSecurityService.authenticated;
 }

projects/sample-code-flow-standalone/src/app/navigation/navigation.component.html

@@ -16,35 +16,35 @@
  <div class="collapse navbar-collapse" id="topNavbarCollapse">
  <ul class="mr-auto navbar-nav">
  <li class="nav-item">
- <a class="nav-link" *ngIf="isAuthenticated" [routerLink]="['home']"
+ <a class="nav-link" *ngIf="authenticated().isAuthenticated" [routerLink]="['home']"
  >home</a
  >
  </li>
  <li class="nav-item">
- <a class="nav-link" *ngIf="isAuthenticated" [routerLink]="['protected']"
+ <a class="nav-link" *ngIf="authenticated().isAuthenticated" [routerLink]="['protected']"
  >protected</a
  >
  </li>
  <li class="nav-item">
- <a class="nav-link" *ngIf="isAuthenticated" [routerLink]="['forbidden']"
+ <a class="nav-link" *ngIf="authenticated().isAuthenticated" [routerLink]="['forbidden']"
  >forbidden</a
  >
  </li>
  <li class="nav-item">
- <a class="nav-link" *ngIf="isAuthenticated" [routerLink]="['customers']"
+ <a class="nav-link" *ngIf="authenticated().isAuthenticated" [routerLink]="['customers']"
  >lazy customers</a
  >
  </li>
  <li class="nav-item">
  <a
  class="nav-link"
- *ngIf="!isAuthenticated"
+ *ngIf="!authenticated().isAuthenticated"
  [routerLink]="['protected']"
  >Route to 'protected' Route & Auto Login</a
  >
  </li>
  <li class="nav-item">
- <a class="nav-link" *ngIf="isAuthenticated" (click)="logout()"
+ <a class="nav-link" *ngIf="authenticated().isAuthenticated" (click)="logout()"
  >Logout</a
  >
  </li>

projects/sample-code-flow-standalone/src/app/navigation/navigation.component.ts

@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
 
@@ -10,20 +10,9 @@ import { OidcSecurityService } from 'angular-auth-oidc-client';
  standalone: true,
  imports: [RouterLink, NgIf],
 })
-export class NavigationComponent implements OnInit {
+export class NavigationComponent {
  private readonly oidcSecurityService = inject(OidcSecurityService);
-
- isAuthenticated = false;
-
- ngOnInit(): void {
- this.oidcSecurityService.isAuthenticated$.subscribe(
- ({ isAuthenticated }) => {
- this.isAuthenticated = isAuthenticated;
-
- console.warn('authenticated: ', isAuthenticated);
- }
- );
- }
+ protected readonly authenticated = this.oidcSecurityService.authenticated;
 
  login(): void {
  this.oidcSecurityService.authorize();