Skip to content

feat(reference-app): collapse the code and token values behind disclosures #193

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.

Sign up for GitHub

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

Merged
ardetrick merged 3 commits into from
Jul 26, 2026
Merged

feat(reference-app): collapse the code and token values behind disclosures #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9509f12
feat(reference-app): adopt Pico CSS for the login, logout, and landin…
ardetrick Jul 26, 2026
b257e1c
feat(reference-app): collapse the code and token values behind disclo…
ardetrick Jul 26, 2026
4e5104f
Merge branch 'main' into feat/reference-app-collapse-content
ardetrick Jul 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 21 additions & 10 deletions reference-app/src/main/resources/templates/callback.ftlh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,43 @@
<head>
<meta charset="UTF-8">
<title>Callback</title>
<link rel="stylesheet" href="/pico.min.css">
</head>
<body>
<main class="container"><article>
<h1>Callback</h1>

<#if error??>
<p>Hydra redirected back with an OAuth error instead of a code:</p>
<pre>${error}<#if errorDescription??>: ${errorDescription}</#if></pre>
<a href="/">Back to start</a>
<#else>
<p>Hydra redirected back with an authorization code:</p>
<pre>${code!""}</pre>

<p>Exchange it for tokens. The client fields are pre-filled for the seeded demo client; change
them if you started the flow with a different client.</p>
<p>Hydra redirected back with an authorization code. Exchange it for tokens to finish the flow.</p>
<p><small>In a real app your server makes this exchange automatically, without the browser ever
seeing the code. Here you click it so you can watch the step happen.</small></p>

<form action="/callback/exchange" method="post">
<input type="hidden" name="code" value="${code!""}" />
<input type="hidden" name="redirectUri" value="${redirectUri}" />

<label for="clientId">Client ID:</label>
<input type="text" id="clientId" name="clientId" value="demo-client" size="40" /><br>
<label for="clientSecret">Client secret:</label>
<input type="text" id="clientSecret" name="clientSecret" value="omit-for-random-secret-1" size="40" /><br>

<input type="submit" id="exchange" name="submit" value="Exchange code for tokens" />

<details>
<summary>View raw code</summary>
<pre>${code!""}</pre>
</details>

<details>
<summary>Client credentials</summary>
<p><small>Pre-filled for the seeded demo client; change them if you started the flow with a
different client.</small></p>
<label for="clientId">Client ID</label>
<input type="text" id="clientId" name="clientId" value="demo-client" />
<label for="clientSecret">Client secret</label>
<input type="text" id="clientSecret" name="clientSecret" value="omit-for-random-secret-1" />
</details>
</form>
</#if>
</article></main>
</body>
</html>
21 changes: 15 additions & 6 deletions reference-app/src/main/resources/templates/tokens.ftlh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,29 @@
<head>
<meta charset="UTF-8">
<title>Token Response</title>
<link rel="stylesheet" href="/pico.min.css">
</head>
<body>
<main class="container"><article>
<h1>Token Response</h1>
<p>Success — Hydra exchanged the code for a real access token, ID token, and refresh token.</p>

<p>The raw response from Hydra's token endpoint:</p>
<pre>${tokenResponse}</pre>
<details>
<summary>Raw token response</summary>
<p><small>The raw JSON from Hydra's token endpoint.</small></p>
<pre>${tokenResponse}</pre>
</details>

<#if idTokenClaims??>
<h2>Decoded id_token claims</h2>
<p>The payload of the id_token JWT (signature not verified here — that is the client's job,
against <code>/.well-known/jwks.json</code>):</p>
<details>
<summary>Decoded id_token claims</summary>
<p><small>The payload of the id_token JWT (signature not verified here — that is the client's
job, against <code>/.well-known/jwks.json</code>).</small></p>
<pre>${idTokenClaims}</pre>
</details>
</#if>

<a href="/">Back to start</a>
<p><a href="/">Back to start</a></p>
</article></main>
</body>
</html>
5 changes: 3 additions & 2 deletions ...est/java/com/ardetrick/oryhydrareference/OryHydraReferenceApplicationFunctionalTests.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -624,8 +624,9 @@ public void quickStartFromLandingPageExchangesTokensInBrowser() {
page.screenshot(screenshotPathProducer.screenshotOptionsForStepName("callback-page"));
assertThat(page.url()).contains("/callback?code=");

// The form pre-fills the seeded demo client's values; this test's client is unique, so
// overwrite them.
// The credentials are tucked behind a disclosure and pre-filled for the seeded demo client;
// this test's client is unique, so expand the section and overwrite them.
page.locator("summary:has-text('Client credentials')").click();
page.locator("input[id=clientId]").fill(clientId);
page.locator("input[id=clientSecret]").fill(clientSecret);
page.locator("input[id=exchange]").click();
Expand Down