Skip to content

Commit 2e3656d

Browse files
committed
Session Monitoring for RP test client
I couldn't get it to work with the test idp, so I added environment variables to allow overriding the options that were hard-coded.
1 parent 6c37d0c commit 2e3656d

File tree

5 files changed

+128
-76
lines changed

5 files changed

+128
-76
lines changed

tests/app/rp/.env.example

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# OAuth Configuration
2+
# OIDC Issuer URL (Identity Provider endpoint)
3+
PUBLIC_OIDC_ISSUER=http://localhost:8000/o
4+
5+
# OAuth Client ID
6+
PUBLIC_OAUTH_CLIENT_ID=2EIxgjlyy5VgCp2fjhEpKLyRtSMMPK0hZ0gBpNdm
7+
8+
# Redirect URI after authentication
9+
PUBLIC_OIDC_REDIRECT_URI=http://localhost:5173
10+
11+
# Post logout redirect URI
12+
PUBLIC_OIDC_POST_LOGOUT_REDIRECT_URI=http://localhost:5173
13+
14+
# Identity Provider base URL (for device authorization flow)
15+
PUBLIC_IDP_URL=http://127.0.0.1:8000
16+
17+
# Device authorization client ID (can be different from OIDC client ID)
18+
PUBLIC_DEVICE_CLIENT_ID=Qg8AaxKLs1c2W3PR70Sv5QxuSEREicKUlf83iGX3
19+
20+
# OIDC Discovery endpoint path (relative to IDP URL)
21+
PUBLIC_OIDC_DISCOVERY_PATH=/o/.well-known/openid-configuration
22+
23+
# Session monitoring client ID (can be same as OIDC client ID)
24+
PUBLIC_SESSION_CLIENT_ID=2EIxgjlyy5VgCp2fjhEpKLyRtSMMPK0hZ0gBpNdm

tests/app/rp/src/routes/+layout.svelte

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
11
<script>
2+
import { browser } from '$app/environment';
23
import { onMount } from 'svelte';
34
import { page } from '$app/stores';
5+
import { OidcContext } from '@dopry/svelte-oidc';
6+
import { env } from '$env/dynamic/public';
7+
8+
// OIDC Configuration
9+
const metadata = {};
410
511
// Materialize tabs initialization
612
onMount(() => {
713
if (typeof M !== 'undefined') {
814
const tabs = document.querySelectorAll('.tabs');
915
M.Tabs.init(tabs);
1016
}
17+
18+
// Debug: Log URL parameters on mount
19+
if (browser) {
20+
const params = new URLSearchParams(window.location.search);
21+
console.log('DEBUG Layout: URL params:', Object.fromEntries(params.entries()));
22+
if (params.has('session_state')) {
23+
console.log('DEBUG Layout: session_state in URL:', params.get('session_state'));
24+
} else {
25+
console.log('DEBUG Layout: NO session_state in URL');
26+
}
27+
}
1128
});
1229
</script>
1330

@@ -60,13 +77,37 @@
6077
>Device Authorization Flow</a
6178
>
6279
</li>
80+
<li class="tab">
81+
<a href="/session" class:active={$page.url.pathname === '/session'}
82+
>Session Management</a
83+
>
84+
</li>
6385
</ul>
6486
</div>
6587
</nav>
6688

67-
<div class="container">
68-
<slot />
69-
</div>
89+
{#if browser}
90+
<OidcContext
91+
issuer={env.PUBLIC_OIDC_ISSUER}
92+
client_id={env.PUBLIC_OAUTH_CLIENT_ID}
93+
redirect_uri={env.PUBLIC_OIDC_REDIRECT_URI}
94+
post_logout_redirect_uri={env.PUBLIC_OIDC_POST_LOGOUT_REDIRECT_URI}
95+
{metadata}
96+
scope="openid"
97+
extraOptions={{
98+
mergeClaims: true,
99+
monitorSession: true
100+
}}
101+
>
102+
<div class="container">
103+
<slot />
104+
</div>
105+
</OidcContext>
106+
{:else}
107+
<div class="container">
108+
<slot />
109+
</div>
110+
{/if}
70111

71112
<style>
72113
.tabs .tab a {
Lines changed: 46 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
<script>
2-
import { browser } from '$app/environment';
32
import {
43
EventLog,
54
LoginButton,
65
LogoutButton,
7-
OidcContext,
86
RefreshTokenButton,
97
accessToken,
108
authError,
@@ -13,72 +11,51 @@
1311
isLoading,
1412
userInfo
1513
} from '@dopry/svelte-oidc';
16-
17-
const metadata = {};
1814
</script>
1915

20-
{#if browser}
21-
<OidcContext
22-
issuer="http://localhost:8000/o"
23-
client_id="2EIxgjlyy5VgCp2fjhEpKLyRtSMMPK0hZ0gBpNdm"
24-
redirect_uri="http://localhost:5173"
25-
post_logout_redirect_uri="http://localhost:5173"
26-
{metadata}
27-
scope="openid"
28-
extraOptions={{
29-
mergeClaims: true
30-
}}
31-
>
32-
<div class="row">
33-
<div class="col s12">
34-
<LoginButton>Login</LoginButton>
35-
<LogoutButton>Logout</LogoutButton>
36-
<RefreshTokenButton>refreshToken</RefreshTokenButton>
37-
</div>
38-
</div>
39-
<div class="row">
40-
<div class="col s12">
41-
<table>
42-
<thead>
43-
<tr><th>isLoading</th><th>isAuthenticated</th><th>authError</th></tr>
44-
</thead>
45-
<tbody>
46-
<tr>
47-
<td>{$isLoading}</td>
48-
<td>{$isAuthenticated}</td>
49-
<td>{$authError || 'None'}</td>
50-
</tr>
51-
</tbody>
52-
</table>
53-
</div>
54-
</div>
55-
<div class="row">
56-
<div class="col s12">
57-
<table>
58-
<thead>
59-
<tr><th style="width: 20%;">store</th><th style="width: 80%;">value</th></tr
60-
>
61-
</thead>
62-
<tbody>
63-
<tr
64-
><td>userInfo</td><td
65-
><pre>{JSON.stringify($userInfo, null, 2) || ''}</pre></td
66-
></tr
67-
>
68-
<tr
69-
><td>accessToken</td><td style="word-break: break-all;"
70-
>{$accessToken}</td
71-
></tr
72-
>
73-
<tr><td>idToken</td><td style="word-break: break-all;">{$idToken}</td></tr>
74-
</tbody>
75-
</table>
76-
</div>
77-
</div>
78-
<div class="row">
79-
<div class="col s12">
80-
<EventLog />
81-
</div>
82-
</div>
83-
</OidcContext>
84-
{/if}
16+
<div class="row">
17+
<div class="col s12">
18+
<LoginButton>Login</LoginButton>
19+
<LogoutButton>Logout</LogoutButton>
20+
<RefreshTokenButton>refreshToken</RefreshTokenButton>
21+
</div>
22+
</div>
23+
<div class="row">
24+
<div class="col s12">
25+
<table>
26+
<thead>
27+
<tr><th>isLoading</th><th>isAuthenticated</th><th>authError</th></tr>
28+
</thead>
29+
<tbody>
30+
<tr>
31+
<td>{$isLoading}</td>
32+
<td>{$isAuthenticated}</td>
33+
<td>{$authError || 'None'}</td>
34+
</tr>
35+
</tbody>
36+
</table>
37+
</div>
38+
</div>
39+
<div class="row">
40+
<div class="col s12">
41+
<table>
42+
<thead>
43+
<tr><th style="width: 20%;">store</th><th style="width: 80%;">value</th></tr>
44+
</thead>
45+
<tbody>
46+
<tr
47+
><td>userInfo</td><td><pre>{JSON.stringify($userInfo, null, 2) || ''}</pre></td></tr
48+
>
49+
<tr
50+
><td>accessToken</td><td style="word-break: break-all;">{$accessToken}</td></tr
51+
>
52+
<tr><td>idToken</td><td style="word-break: break-all;">{$idToken}</td></tr>
53+
</tbody>
54+
</table>
55+
</div>
56+
</div>
57+
<div class="row">
58+
<div class="col s12">
59+
<EventLog />
60+
</div>
61+
</div>

tests/app/rp/src/routes/device/+page.svelte

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script>
22
import { browser } from '$app/environment';
33
import { onDestroy } from 'svelte';
4+
import { env } from '$env/dynamic/public';
45
56
// Configuration
6-
const IDP_URL = 'http://127.0.0.1:8000';
7-
const CLIENT_ID = 'Qg8AaxKLs1c2W3PR70Sv5QxuSEREicKUlf83iGX3';
7+
const IDP_URL = env.PUBLIC_IDP_URL;
8+
const CLIENT_ID = env.PUBLIC_DEVICE_CLIENT_ID;
89
const POLLING_INTERVAL = 5000; // 5 seconds
910
1011
// State variables
@@ -313,8 +314,8 @@
313314
and verification URI.
314315
</li>
315316
<li>
316-
<strong>User authorizes:</strong> The user visits the verification URI on another device
317-
(like a phone or computer), enters the user code, and approves the authorization.
317+
<strong>User authorizes:</strong> The user visits the verification URI on another device (like
318+
a phone or computer), enters the user code, and approves the authorization.
318319
</li>
319320
<li>
320321
<strong>Device polls for token:</strong> Meanwhile, the device polls the token endpoint using
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script>
2+
import SessionMonitor from '$lib/components/SessionMonitor.svelte';
3+
</script>
4+
5+
<svelte:head>
6+
<title>OIDC Session Management Test</title>
7+
</svelte:head>
8+
9+
<SessionMonitor />

0 commit comments

Comments
 (0)