|
| 1 | +--- |
| 2 | +Title: Front Channel Logout component |
| 3 | +Added: v1.0.0 |
| 4 | +Status: Active |
| 5 | +Last reviewed: 2025-10-24 |
| 6 | +--- |
| 7 | + |
| 8 | +# [Front Channel Logout component](../../../lib/core/src/lib/auth/oidc/front-channel-logout.component.ts "Defined in front-channel-logout.component.ts") |
| 9 | + |
| 10 | +Handles an OpenID Connect (OIDC) Front-Channel Logout request by validating issuer and session identifiers and triggering a local logout when they match. |
| 11 | + |
| 12 | +## Contents |
| 13 | + |
| 14 | +- [Basic usage](#basic-usage) |
| 15 | +- [Details](#details) |
| 16 | + - [What is Front-Channel Logout?](#what-is-front-channel-logout) |
| 17 | + - [How matching works](#how-matching-works) |
| 18 | + - [Security considerations](#security-considerations) |
| 19 | + - [Logout scenarios](#logout-scenarios) |
| 20 | +- [See also](#see-also) |
| 21 | + |
| 22 | +## Basic usage |
| 23 | + |
| 24 | +This component has no UI; it performs logic on init. Add a route that points to it so that your Identity Provider (IdP) can call your application during a front-channel logout. |
| 25 | + |
| 26 | +```ts |
| 27 | +import { Routes } from '@angular/router'; |
| 28 | +import { FrontChannelLogoutComponent } from '@adf/core'; |
| 29 | + |
| 30 | +export const routes: Routes = [ |
| 31 | + { path: 'oidc/front-channel-logout', component: FrontChannelLogoutComponent } |
| 32 | +]; |
| 33 | +``` |
| 34 | + |
| 35 | +When the IdP performs a front-channel logout it will iframe / redirect the user's browser to a URL like: |
| 36 | + |
| 37 | +```text |
| 38 | +/oidc/frontchannel_logout?iss=https://issuer.example.com&sid=abc123-session-id |
| 39 | +``` |
| 40 | + |
| 41 | +On initialisation the component compares those query parameters with locally stored values provided by `AuthService` and calls `logout()` if both match. |
| 42 | + |
| 43 | +## Details |
| 44 | + |
| 45 | +### What is Front-Channel Logout? |
| 46 | + |
| 47 | +Front-Channel Logout is part of the OIDC specification. The Identity Provider notifies relying parties (your SPA) of a logout by issuing an HTTP(S) request (often via an iframe). The client application must validate the request and clear its own session. |
| 48 | + |
| 49 | +### How matching works |
| 50 | + |
| 51 | +Inside `ngOnInit` the component: |
| 52 | + |
| 53 | +1. Reads `iss` and `sid` from `ActivatedRoute.snapshot.queryParamMap`. |
| 54 | +2. Retrieves the stored issuer and session id via `AuthService.getStoredIssuer()` and `AuthService.getStoredSessionId()`. |
| 55 | +3. Compares both pairs. Logout is executed only if: |
| 56 | + - storedIssuer === issuerParam AND |
| 57 | + - storedSessionId === sessionIdParam (and none are falsy). |
| 58 | + |
| 59 | +```ts |
| 60 | +const storedIssuerMatches = storedIssuer && issuerParam && storedIssuer === issuerParam; |
| 61 | +const storedSessionMatches = storedSessionId && sessionIdParam && storedSessionId === sessionIdParam; |
| 62 | +if (storedIssuerMatches && storedSessionMatches) { |
| 63 | + authService.logout(); |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +If either value is missing or does not match, nothing happens. |
| 68 | + |
| 69 | +### Security considerations |
| 70 | + |
| 71 | +- The component performs strict equality checks; no partial matching. |
| 72 | +- Both parameters must be present and match; a single match will not trigger logout. |
| 73 | +- Avoid exposing sensitive data in query parameters beyond issuer (`iss`) and session identifier (`sid`). |
| 74 | + |
| 75 | +### Logout scenarios |
| 76 | + |
| 77 | +These scenarios outline when a logout is triggered or suppressed. |
| 78 | + |
| 79 | +Key scenarios: |
| 80 | + |
| 81 | +| Scenario | Stored Issuer | URL Issuer | Stored SID | URL SID | Outcome | |
| 82 | +|----------|---------------|-----------|------------|---------|---------| |
| 83 | +| Full match | A | A | 123 | 123 | logout called | |
| 84 | +| Issuer mismatch | A | B | 123 | 123 | no logout | |
| 85 | +| SID mismatch | A | A | 123 | 999 | no logout | |
| 86 | +| Both mismatch | A | B | 123 | 999 | no logout | |
| 87 | +| Missing issuer | null | A | 123 | 123 | no logout | |
| 88 | +| Missing SID | A | A | null | 123 | no logout | |
| 89 | +| Missing URL issuer | A | null | 123 | 123 | no logout | |
| 90 | +| Missing URL SID | A | A | 123 | null | no logout | |
| 91 | + |
| 92 | +### See also |
| 93 | + |
| 94 | +- [OIDC Session Management / Front-Channel Logout specification](https://openid.net/specs/openid-connect-frontchannel-1_0.html#ExampleFrontchannel) |
| 95 | +- [Login component](login.component.md) |
| 96 | +- [Login Dialog component](login-dialog.component.md) |
0 commit comments