Skip to main content

Version 15 to 16

TL;DR: Breaking Changes​

  • Dropped support for Angular 14
  • The guard AutoLoginAllRoutesGuard is deprecated in favor of AutoLoginPartialRoutesGuard

TL;DR: New Features​

  • Add new standalone/functional API's

Dropped support for Angular 14​

Angular 14 support is dropped because we want to introduce new standalone/functional methods to use this library (see below for more info).

The guard AutoLoginAllRoutesGuard is deprecated in favor of AutoLoginPartialRoutesGuard​

AutoLoginAllRoutesGuard is not recommended anymore and is marked as deprecated. The guard will be removed in a future version.

Instead, use the AutoLoginPartialRoutesGuard guard. For information see Why is AutoLoginAllRoutesGuard not recommended?.

Old:

import { AutoLoginAllRoutesGuard } from 'angular-auth-oidc-client';

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AutoLoginAllRoutesGuard], // ⚠️ Using the deprecated AutoLoginAllRoutesGuard guard
  },
];

New:

import { AutoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AutoLoginPartialRoutesGuard], // 👈 Using the recommended AutoLoginPartialRoutesGuard guards
  },
];

Add new standalone/functional API's​

This library still supports using Angular Modules, but we included new API's if you want to make use of the standalone/functional API's that were introduced in Angular.

To see this in action, you can also take a look at the demo standalone application.

Configuration​

Instead of using AuthModule.forRoot({}), you can now configure the auth module by using provideAuth.

import { NgModule } from '@angular/core';
import { AuthModule } from 'angular-auth-oidc-client';

@NgModule({
  imports: [
    AuthModule.forRoot({
      config: {
        /* Your config here */
      },
    }),
  ],
  exports: [AuthModule],
})
export class AuthConfigModule {}

Becomes:

import { ApplicationConfig } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth } from 'angular-auth-oidc-client';
import { AppComponent } from './app/app.component';

export const appConfig: ApplicationConfig = {
  providers: [
    // 👇 using provideAuth
    provideAuth({
      config: {
        /* Your config here */
      },
    }),
  ],
};

bootstrapApplication(AppComponent, appConfig);

HTTP Interceptor​

Instead of registering the AuthInterceptor using the HTTP_INTERCEPTORS injection token, you can configure the HTTP client by including the authInterceptor interceptor.

import { AuthInterceptor, AuthModule } from 'angular-auth-oidc-client';

@NgModule({
  // ...
  imports: [
    // ...
    AuthModule.forRoot(),
    HttpClientModule,
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    // ...
  ],
})
export class AppModule {}

Becomes:

import { ApplicationConfig } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideAuth, authInterceptor } from 'angular-auth-oidc-client';
import { AppComponent } from './app/app.component';

export const appConfig: ApplicationConfig = {
  providers: [
    // 👇 using authInterceptor
    provideHttpClient(withInterceptors([authInterceptor()])),
    provideAuth({
      config: {
        /* Your config here */
      },
    }),
  ],
};

bootstrapApplication(AppComponent, appConfig);

Guards​

Instead of protecting your routes using the class-based guard AutoLoginPartialRoutesGuard, you can now use the autoLoginPartialRoutesGuard functional guard.

Note there's no autoLoginAllRoutesGuard because its class-based version is deprecated.

import { RouterModule, Routes } from '@angular/router';
import { AutoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';
import { ProtectedComponent } from './protected/protected.component';

const appRoutes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AutoLoginPartialRoutesGuard],
  },
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then((m) => m.CustomersModule),
    canLoad: [AutoLoginPartialRoutesGuard],
  },
];

Becomes:

import { RouterModule, Routes } from '@angular/router';
import { AutoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';
import { ProtectedComponent } from './protected/protected.component';

const appRoutes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    // 👇 using autoLoginPartialRoutesGuard
    canActivate: [autoLoginPartialRoutesGuard],
  },
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.routes').then((m) => m.routes),
    // 👇 using autoLoginPartialRoutesGuard
    canMatch: [autoLoginPartialRoutesGuard],
  },
];