bastian/listify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

logout

Browse Source
This commit is contained in:
Bastian Wagner
2026-07-17 15:32:01 +02:00
parent fadb5dd049
commit 4a6e0f3b0f
13 changed files with 110 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
listify-api/.env.docker.example
View File

@@ -23,7 +23,7 @@ OIDC_CLIENT_ID=listify
OIDC_CLIENT_SECRET=
OIDC_SCOPES=openid profile email groups
OIDC_REDIRECT_URI=http://localhost:8080/auth/sso/callback
OIDC_POST_LOGOUT_REDIRECT_URI=http://localhost:8080/login
OIDC_POST_LOGOUT_REDIRECT_URI=http://localhost:8080/auth/sso/logout-callback
MISTRAL_API_KEY=
MISTRAL_AGENT_ID=

2
listify-api/.env.example
View File

@@ -20,7 +20,7 @@ OIDC_CLIENT_ID=listify
OIDC_CLIENT_SECRET=
OIDC_SCOPES=openid profile email groups
OIDC_REDIRECT_URI=http://localhost:4200/auth/sso/callback
OIDC_POST_LOGOUT_REDIRECT_URI=http://localhost:4200/login
OIDC_POST_LOGOUT_REDIRECT_URI=http://localhost:4200/auth/sso/logout-callback
MCP_ACCESS_TOKEN=

12
listify-api/README.md
View File

@@ -91,13 +91,19 @@ In Produktion muss hier die oeffentlich erreichbare Listify-URL stehen, z. B. `h
6. Post-Logout Redirect URI registrieren:
```text
http://localhost:4200/login
http://localhost:4200/auth/sso/logout-callback
```
Bei Docker/Reverse Proxy:
```text
http://localhost:8080/login
http://localhost:8080/auth/sso/logout-callback
```
Für das produktive Listify-Deployment muss im OIDC-Client exakt diese Logout Redirect URI hinterlegt sein:
```text
https://listify.forgecore.work/auth/sso/logout-callback
```
### Listify Environment
@@ -108,7 +114,7 @@ OIDC_CLIENT_ID=<client-id-aus-admin-oidc-clients>
OIDC_CLIENT_SECRET=<client-secret-aus-admin-oidc-clients>
OIDC_SCOPES=openid profile email groups
OIDC_REDIRECT_URI=http://localhost:4200/auth/sso/callback
OIDC_POST_LOGOUT_REDIRECT_URI=http://localhost:4200/login
OIDC_POST_LOGOUT_REDIRECT_URI=http://localhost:4200/auth/sso/logout-callback
CLIENT_URL=http://localhost:4200
```

7
listify-api/src/auth/auth.service.spec.ts
View File

@@ -28,7 +28,7 @@ class FakeOidcService {
);
exchangeCallback = jest.fn(() => Promise.resolve(this.profile));
createLogoutUrl = jest.fn(() =>
Promise.resolve('https://sso.example.test/logout'),
Promise.resolve('https://sso.example.test/logout?state=logout-state'),
);
}
@@ -183,7 +183,10 @@ describe('AuthService', () => {
idTokenHint: loginResponse.idToken,
});
expect(logoutResponse.logoutUrl).toBe('https://sso.example.test/logout');
expect(logoutResponse.logoutUrl).toBe(
'https://sso.example.test/logout?state=logout-state',
);
expect(logoutResponse.logoutState).toBe('logout-state');
expect(oidcService.createLogoutUrl).toHaveBeenCalledWith('id-token');
await expect(
authService.refresh({ refreshToken: loginResponse.refreshToken }),

10
listify-api/src/auth/auth.service.ts
View File

@@ -143,8 +143,16 @@ export class AuthService {
): Promise<AuthLogoutResponse> {
await this.revokeRefreshToken(body.refreshToken);
const logoutUrl = await this.oidcService.createLogoutUrl(body.idTokenHint);
const logoutState = new URL(logoutUrl).searchParams.get('state');
if (!logoutState) {
throw new BadRequestException('OIDC logout state is missing.');
}
return {
logoutUrl: await this.oidcService.createLogoutUrl(body.idTokenHint),
logoutUrl,
logoutState,
};
}

1
listify-api/src/auth/auth.types.ts
View File

@@ -13,6 +13,7 @@ export interface AuthTokenResponse extends AuthTokens {
export interface AuthLogoutResponse {
logoutUrl: string;
logoutState: string;
}
export interface JwtTokenPayload {

4
listify-api/src/auth/oidc.service.spec.ts
View File

@@ -11,7 +11,8 @@ describe('OidcService', () => {
const issuer = 'https://id.example.test';
const clientId = 'listify';
const redirectUri = 'http://localhost:4200/auth/sso/callback';
const postLogoutRedirectUri = 'http://localhost:4200/login';
const postLogoutRedirectUri =
'http://localhost:4200/auth/sso/logout-callback';
const idToken = 'id-token';
const accessToken = 'access-token';
const idTokenHint = 'id-token-hint';
@@ -154,6 +155,7 @@ describe('OidcService', () => {
expect(logoutUrl.searchParams.get('post_logout_redirect_uri')).toBe(
postLogoutRedirectUri,
);
expect(logoutUrl.searchParams.get('state')).toMatch(/^[A-Za-z0-9_-]{43}$/);
});
function mockDiscovery(): void {

9
listify-api/src/auth/oidc.service.ts
View File

@@ -180,6 +180,7 @@ export class OidcService {
async createLogoutUrl(idTokenHint?: string): Promise<string> {
const config = this.getConfig();
const discovery = await this.getDiscovery(config);
const state = this.createOpaqueToken();
const logoutUrl = new URL(
discovery.end_session_endpoint ??
`${config.issuer.replace(/\/$/, '')}/oidc/session/end`,
@@ -196,6 +197,8 @@ export class OidcService {
);
}
logoutUrl.searchParams.set('state', state);
return logoutUrl.toString();
}
@@ -337,6 +340,10 @@ export class OidcService {
);
}
const postLogoutRedirectUri =
process.env.OIDC_POST_LOGOUT_REDIRECT_URI?.trim() ||
new URL('/auth/sso/logout-callback', redirectUri).toString();
return {
issuer,
discoveryUrl: `${issuer}/.well-known/openid-configuration`,
@@ -344,7 +351,7 @@ export class OidcService {
redirectUri,
clientSecret: process.env.OIDC_CLIENT_SECRET,
scopes: process.env.OIDC_SCOPES ?? 'openid profile email groups',
postLogoutRedirectUri: process.env.OIDC_POST_LOGOUT_REDIRECT_URI,
postLogoutRedirectUri,
accessTokenAudience: process.env.OIDC_ACCESS_TOKEN_AUDIENCE ?? clientId,
groupsClaim: process.env.OIDC_GROUPS_CLAIM ?? 'groups',
};

2
listify-client/src/app/app.routes.ts
View File

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
import { authGuard } from './auth/auth.guard';
import { unauthGuard } from './auth/unauth.guard';
import { LoginComponent } from './auth/login/login.component';
import { LogoutCallbackComponent } from './auth/logout-callback/logout-callback.component';
import { SsoCallbackComponent } from './auth/sso-callback/sso-callback.component';
import { ListDetailComponent } from './lists/list-detail/list-detail.component';
import { ListsComponent } from './lists/lists.component';
@@ -12,6 +13,7 @@ export const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'dashboard' },
{ path: 'login', component: LoginComponent, canActivate: [unauthGuard] },
{ path: 'auth/sso/callback', component: SsoCallbackComponent },
{ path: 'auth/sso/logout-callback', component: LogoutCallbackComponent },
{
path: 'dashboard',
loadComponent: () =>

1
listify-client/src/app/auth/auth.models.ts
View File

@@ -26,6 +26,7 @@ export interface AuthTokenResponse {
export interface AuthLogoutResponse {
logoutUrl: string;
logoutState: string;
}
export interface RegisterResponse {

17
listify-client/src/app/auth/auth.service.ts
View File

@@ -16,6 +16,7 @@ const ACCESS_TOKEN_KEY = 'listify.accessToken';
const REFRESH_TOKEN_KEY = 'listify.refreshToken';
const ID_TOKEN_KEY = 'listify.idToken';
const USER_KEY = 'listify.user';
const LOGOUT_STATE_KEY = 'listify.logoutState';
@Injectable({ providedIn: 'root' })
export class AuthService {
@@ -128,6 +129,7 @@ export class AuthService {
this.http.post<AuthLogoutResponse>(`${this.apiUrl}/logout`, payload).subscribe({
next: (response) => {
this.sessionStorage?.setItem(LOGOUT_STATE_KEY, response.logoutState);
this.clearSession();
window.location.href = response.logoutUrl;
},
@@ -138,6 +140,15 @@ export class AuthService {
});
}
completeProviderLogout(state: string | null): boolean {
const expectedState = this.sessionStorage?.getItem(LOGOUT_STATE_KEY) ?? null;
this.sessionStorage?.removeItem(LOGOUT_STATE_KEY);
this.clearSession();
return Boolean(state && expectedState && state === expectedState);
}
private clearSession(): void {
this.storage?.removeItem(ACCESS_TOKEN_KEY);
this.storage?.removeItem(REFRESH_TOKEN_KEY);
@@ -151,8 +162,6 @@ export class AuthService {
this.storage?.setItem(REFRESH_TOKEN_KEY, response.refreshToken);
if (response.idToken) {
this.storage?.setItem(ID_TOKEN_KEY, response.idToken);
} else {
this.storage?.removeItem(ID_TOKEN_KEY);
}
this.storeUser(response.user);
}
@@ -190,4 +199,8 @@ export class AuthService {
private get storage(): Storage | null {
return typeof window === 'undefined' ? null : window.localStorage;
}
private get sessionStorage(): Storage | null {
return typeof window === 'undefined' ? null : window.sessionStorage;
}
}

34
listify-client/src/app/auth/logout-callback/logout-callback.component.html Normal file
View File

@@ -0,0 +1,34 @@
<section class="auth-page">
<mat-card class="auth-card verify-card">
<div class="auth-logo">
<mat-icon>{{ stateIsValid ? 'logout' : 'warning' }}</mat-icon>
</div>
<mat-card-header>
<mat-card-title>Ausgeloggt</mat-card-title>
<mat-card-subtitle>
@if (stateIsValid) {
Sie wurden sicher von Listify und Ihrem SSO-Konto abgemeldet.
} @else {
Die Rückleitung vom SSO-Anbieter konnte nicht bestätigt werden.
}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div class="verification-state" [class.success]="stateIsValid" [class.error]="!stateIsValid">
<mat-icon class="state-icon">{{ stateIsValid ? 'check_circle' : 'error' }}</mat-icon>
<p>
@if (stateIsValid) {
Ihre lokale Sitzung wurde beendet. Sie können dieses Fenster schließen oder sich erneut anmelden.
} @else {
Ihre lokale Sitzung wurde vorsorglich beendet. Starten Sie eine neue Anmeldung, wenn Sie Listify weiter nutzen möchten.
}
</p>
<a mat-flat-button color="primary" routerLink="/login">
<mat-icon aria-hidden="true">login</mat-icon>
Erneut anmelden
</a>
</div>
</mat-card-content>
</mat-card>
</section>

21
listify-client/src/app/auth/logout-callback/logout-callback.component.ts Normal file
View File

@@ -0,0 +1,21 @@
import { Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-logout-callback',
imports: [MatButtonModule, MatCardModule, MatIconModule, RouterLink],
templateUrl: './logout-callback.component.html',
styleUrl: '../auth-page.scss',
})
export class LogoutCallbackComponent {
private readonly route = inject(ActivatedRoute);
private readonly auth = inject(AuthService);
protected readonly stateIsValid = this.auth.completeProviderLogout(
this.route.snapshot.queryParamMap.get('state'),
);
}