Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Moving to inject function #1917

Merged
merged 10 commits into from Mar 23, 2024
4 changes: 2 additions & 2 deletions README.md
Expand Up @@ -112,14 +112,14 @@ export class AppModule {}
And call the method `checkAuth()` from your `app.component.ts`. The method `checkAuth()` is needed to process the redirect from your Security Token Service and set the correct states. This method must be used to ensure the correct functioning of the library.

```ts
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, inject } from '@angular/core';
import { OidcSecurityService } from 'angular-auth-oidc-client';

@Component({
/*...*/
})
export class AppComponent implements OnInit {
constructor(public oidcSecurityService: OidcSecurityService) {}
private readonly oidcSecurityService = inject(OidcSecurityService);

ngOnInit() {
this.oidcSecurityService
Expand Down
Expand Up @@ -27,10 +27,15 @@ import { AutoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', component: HomeComponent },
{ path: 'protected', component: ProtectedComponent, canActivate: [AutoLoginPartialRoutesGuard] },
{
path: 'protected',
component: ProtectedComponent,
canActivate: [AutoLoginPartialRoutesGuard],
},
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then((m) => m.CustomersModule),
loadChildren: () =>
import('./customers/customers.module').then((m) => m.CustomersModule),
canLoad: [AutoLoginPartialRoutesGuard],
},
{ path: 'unauthorized', component: UnauthorizedComponent },
Expand All @@ -42,12 +47,14 @@ Please make sure to call `checkAuth()` like normal in your `app.component.ts`.

```ts
export class AppComponent implements OnInit {
constructor(private oidcSecurityService: OidcSecurityService) {}
private readonly oidcSecurityService = inject(OidcSecurityService);

ngOnInit() {
this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData, accessToken }) => {
// ...
});
this.oidcSecurityService
.checkAuth()
.subscribe(({ isAuthenticated, userData, accessToken }) => {
// ...
});
}
}
```
Expand All @@ -69,20 +76,31 @@ import { AutoLoginPartialRoutesGuard } from 'angular-auth-oidc-client';

const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', component: HomeComponent, canActivate: [AutoLoginPartialRoutesGuard] },
{
path: 'home',
component: HomeComponent,
canActivate: [AutoLoginPartialRoutesGuard],
},
{ path: 'callback', component: CallbackComponent }, // does nothing but setting up auth
];
```

### Custom Params for the guard

If you need to pass custom params to the login request you can simply use the [data](https://angular.io/api/router/Route#data) attribute of the route.
If you need to pass custom params to the login request you can simply use the [data](https://angular.io/api/router/Route#data) attribute of the route.
These parameters will then be appended to the login request

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

const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', component: HomeComponent, canActivate: [AutoLoginPartialRoutesGuard], data:{custom:'param'} },
{
path: 'home',
component: HomeComponent,
canActivate: [AutoLoginPartialRoutesGuard],
data: { custom: 'param' },
},
{ path: 'callback', component: CallbackComponent }, // does nothing but setting up auth
];
```
16 changes: 13 additions & 3 deletions docs/site/angular-auth-oidc-client/docs/documentation/guards.md
Expand Up @@ -13,16 +13,26 @@ Please refer to the auto-login guard in this repo as a reference. It is importan

```ts
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import {
ActivatedRouteSnapshot,
CanActivate,
Router,
RouterStateSnapshot,
UrlTree,
} from '@angular/router';
import { OidcSecurityService } from 'angular-auth-oidc-client';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthorizationGuard implements CanActivate {
constructor(private oidcSecurityService: OidcSecurityService, private router: Router) {}
private readonly oidcSecurityService = inject(OidcSecurityService);
private readonly router = inject(Router);

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean | UrlTree> {
return this.oidcSecurityService.isAuthenticated$.pipe(
take(1),
map(({ isAuthenticated }) => {
Expand Down
Expand Up @@ -10,7 +10,7 @@ sidebar_position: 3
For logging in a user you can call the `authorize()` method:

```ts
constructor(private oidcSecurityService: OidcSecurityService) {}
private readonly oidcSecurityService = inject(OidcSecurityService);

// ...
this.oidcSecurityService.authorize();
Expand Down Expand Up @@ -126,7 +126,8 @@ A simplified page (instead of the application url) can be used. Here's an exampl
</script>
</head>
<body onload="sendMessage()">
Transmitting authentication result ... (this popup will be closed automatically).
Transmitting authentication result ... (this popup will be closed
automatically).
</body>
</html>
```
Expand Down
Expand Up @@ -37,7 +37,9 @@ Using the `filter` operator from RxJS you can decide which events you are intere
```ts
import { PublicEventsService } from 'angular-auth-oidc-client';

constructor(private eventService: PublicEventsService) {
private readonly eventService = inject(PublicEventsService);

ngOnInit() {
this.eventService
.registerForEvents()
.pipe(filter((notification) => notification.type === EventTypes.CheckSessionReceived))
Expand Down
2 changes: 1 addition & 1 deletion docs/site/angular-auth-oidc-client/docs/intro.md
Expand Up @@ -72,7 +72,7 @@ import { OidcSecurityService } from 'angular-auth-oidc-client';
/* ... */
})
export class AppComponent implements OnInit {
constructor(public oidcSecurityService: OidcSecurityService) {}
private readonly oidcSecurityService = inject(OidcSecurityService);

ngOnInit() {
this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData}) => /* ... */);
Expand Down
@@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
import { OpenIdConfiguration } from '../config/openid-configuration';
Expand All @@ -18,6 +18,16 @@ const DEFAULT_AUTHRESULT = {

@Injectable({ providedIn: 'root' })
export class AuthStateService {
private readonly storagePersistenceService = inject(
StoragePersistenceService
);

private readonly loggerService = inject(LoggerService);

private readonly publicEventsService = inject(PublicEventsService);

private readonly tokenValidationService = inject(TokenValidationService);

private readonly authenticatedInternal$ =
new BehaviorSubject<AuthenticatedResult>(DEFAULT_AUTHRESULT);

Expand All @@ -27,13 +37,6 @@ export class AuthStateService {
.pipe(distinctUntilChanged());
}

constructor(
private readonly storagePersistenceService: StoragePersistenceService,
private readonly loggerService: LoggerService,
private readonly publicEventsService: PublicEventsService,
private readonly tokenValidationService: TokenValidationService
) {}

setAuthenticatedAndFireEvent(allConfigs: OpenIdConfiguration[]): void {
const result = this.composeAuthenticatedResult(allConfigs);

Expand Down
@@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { inject, Injectable } from '@angular/core';
import { forkJoin, Observable, of, throwError } from 'rxjs';
import { catchError, map, switchMap, tap } from 'rxjs/operators';
import { AutoLoginService } from '../auto-login/auto-login.service';
Expand All @@ -20,21 +20,35 @@ import { AuthStateService } from './auth-state.service';

@Injectable({ providedIn: 'root' })
export class CheckAuthService {
constructor(
private readonly checkSessionService: CheckSessionService,
private readonly currentUrlService: CurrentUrlService,
private readonly silentRenewService: SilentRenewService,
private readonly userService: UserService,
private readonly loggerService: LoggerService,
private readonly authStateService: AuthStateService,
private readonly callbackService: CallbackService,
private readonly refreshSessionService: RefreshSessionService,
private readonly periodicallyTokenCheckService: PeriodicallyTokenCheckService,
private readonly popupService: PopUpService,
private readonly autoLoginService: AutoLoginService,
private readonly storagePersistenceService: StoragePersistenceService,
private readonly publicEventsService: PublicEventsService
) {}
private readonly checkSessionService = inject(CheckSessionService);

private readonly currentUrlService = inject(CurrentUrlService);

private readonly silentRenewService = inject(SilentRenewService);

private readonly userService = inject(UserService);

private readonly loggerService = inject(LoggerService);

private readonly authStateService = inject(AuthStateService);

private readonly callbackService = inject(CallbackService);

private readonly refreshSessionService = inject(RefreshSessionService);

private readonly periodicallyTokenCheckService = inject(
PeriodicallyTokenCheckService
);

private readonly popupService = inject(PopUpService);

private readonly autoLoginService = inject(AutoLoginService);

private readonly storagePersistenceService = inject(
StoragePersistenceService
);

private readonly publicEventsService = inject(PublicEventsService);

private getConfig(
configuration: OpenIdConfiguration,
Expand Down
@@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import {
ActivatedRouteSnapshot,
Router,
Expand All @@ -17,13 +17,15 @@ import { AutoLoginService } from './auto-login.service';
*/
@Injectable({ providedIn: 'root' })
export class AutoLoginAllRoutesGuard {
constructor(
private readonly autoLoginService: AutoLoginService,
private readonly checkAuthService: CheckAuthService,
private readonly loginService: LoginService,
private readonly configurationService: ConfigurationService,
private readonly router: Router
) {}
private readonly autoLoginService = inject(AutoLoginService);

private readonly checkAuthService = inject(CheckAuthService);

private readonly loginService = inject(LoginService);

private readonly configurationService = inject(ConfigurationService);

private readonly router = inject(Router);

canLoad(): Observable<boolean> {
const url =
Expand Down
Expand Up @@ -14,13 +14,15 @@ import { AutoLoginService } from './auto-login.service';

@Injectable({ providedIn: 'root' })
export class AutoLoginPartialRoutesGuard {
constructor(
private readonly autoLoginService: AutoLoginService,
private readonly authStateService: AuthStateService,
private readonly loginService: LoginService,
private readonly configurationService: ConfigurationService,
private readonly router: Router
) {}
private readonly autoLoginService = inject(AutoLoginService);

private readonly authStateService = inject(AuthStateService);

private readonly loginService = inject(LoginService);

private readonly configurationService = inject(ConfigurationService);

private readonly router = inject(Router);

canLoad(): Observable<boolean> {
const url =
Expand Down
@@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { Router } from '@angular/router';
import { OpenIdConfiguration } from '../config/openid-configuration';
import { StoragePersistenceService } from '../storage/storage-persistence.service';
Expand All @@ -7,10 +7,9 @@ const STORAGE_KEY = 'redirect';

@Injectable({ providedIn: 'root' })
export class AutoLoginService {
constructor(
private readonly storageService: StoragePersistenceService,
private readonly router: Router
) {}
private readonly storageService = inject(StoragePersistenceService);

private readonly router = inject(Router);

checkSavedRedirectRouteAndNavigate(config: OpenIdConfiguration | null): void {
if (!config) {
Expand Down
@@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { tap } from 'rxjs/operators';
import { OpenIdConfiguration } from '../config/openid-configuration';
Expand All @@ -10,19 +10,22 @@ import { ImplicitFlowCallbackService } from './implicit-flow-callback.service';

@Injectable({ providedIn: 'root' })
export class CallbackService {
private readonly urlService = inject(UrlService);

private readonly flowHelper = inject(FlowHelper);

private readonly implicitFlowCallbackService = inject(
ImplicitFlowCallbackService
);

private readonly codeFlowCallbackService = inject(CodeFlowCallbackService);

private readonly stsCallbackInternal$ = new Subject<void>();

get stsCallback$(): Observable<void> {
return this.stsCallbackInternal$.asObservable();
}

constructor(
private readonly urlService: UrlService,
private readonly flowHelper: FlowHelper,
private readonly implicitFlowCallbackService: ImplicitFlowCallbackService,
private readonly codeFlowCallbackService: CodeFlowCallbackService
) {}

isCallback(currentUrl: string): boolean {
if (!currentUrl) {
return false;
Expand Down
@@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { Injectable, inject } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
Expand All @@ -10,12 +10,13 @@ import { IntervalService } from './interval.service';

@Injectable({ providedIn: 'root' })
export class CodeFlowCallbackService {
constructor(
private readonly flowsService: FlowsService,
private readonly flowsDataService: FlowsDataService,
private readonly intervalService: IntervalService,
private readonly router: Router
) {}
private readonly flowsService = inject(FlowsService);

private readonly router = inject(Router);

private readonly flowsDataService = inject(FlowsDataService);

private readonly intervalService = inject(IntervalService);

authenticatedCallbackWithCode(
urlToCheck: string,
Expand Down