Feature/pre authorization implementation #1002

yimyitbarek · 2026-01-29T18:16:40Z

Summary

This PR implements pre authorization work flow in the wallet side. This feature allows wallet holders to get a credential from a QR offered by the issuer with out authenticating them self to the issuer.

The flow is implemented as per https://openid.net/specs/openid-4-verifiable-credential-issuance-1_0.html#name-pre-authorized-code-flow

Type of change

Related issues / tickets

Changes

From QR to Wallet login
No login page on the issuer service

Architecture decisions

...

Screenshots / recordings (if UI changes)

...

How to test

Get QR from issuer_url/offer/pid:sd_jwt_dc
Login to the wallet
Access the credential

Checklist

[ x] I self-reviewed my changes
I added/updated tests (or explained why not)
I updated documentation (if needed)
[ x] I ran the relevant checks locally (lint/unit/integration)
I verified backward compatibility / migration notes (if needed)
I added monitoring/logging (if needed)

Notes for reviewers

To test this, you should first have a QR offer from the issuer (e.g., a bus ticket as a QR code). Then, when you click Proceed, the credential will be automatically issued to the wallet.

jessevanmuijden · 2026-01-30T01:07:04Z

src/components/Auth/PrivateRoute.tsx

 import SessionContext from '@/context/SessionContext';

-const PrivateRoute = ({ children }: { children?: React.ReactNode }): React.ReactElement => {
+const PrivateRoute = ({ children }) => {


I would not remove typing

jessevanmuijden · 2026-01-30T01:10:12Z

src/pages/Login/LoginState.jsx

-			</ul>
-			{error && <div className="text-lm-red dark:text-dm-red pt-2">{error}</div>}
-		</>
+		<div className='flex flex-row gap-4 justify-center'>


you removed quite a bit of styling/layout here, why?

jessevanmuijden · 2026-01-30T01:13:05Z

src/pages/Login/LoginState.jsx

-		return <Navigate to={`/${window.location.search}`} replace />;
+	const user = queryParams.get('user');
+	const state = queryParams.get('state');
+	let filteredUser = null;


move this back into a function, but add early returns to make the logical flow easier to follow.

jessevanmuijden · 2026-01-30T01:14:52Z

src/pages/Login/LoginState.jsx

-				<h1 className="pt-4 text-xl font-bold leading-tight tracking-tight text-dm-gray-900 md:text-2xl text-center dark:text-white">
+		<LoginPageLayout heading={<Trans i18nKey="loginState.welcomeBackMessage" components={{ highlight: <span className="text-primary" /> }} />}>
+			<div className="relative p-8 bg-white dark:bg-dm-gray-800 rounded-lg shadow text-center space-y-6">
+				<h1 className="text-xl font-bold dark:text-white">


why more styling changes and how is this relevant to the pre-authorized_code flow implementation? For clarity, please make a separate PR with the styling, layout and code formatting changes.

jessevanmuijden · 2026-01-30T01:20:47Z

src/pages/PreAuth/PreAuth.jsx

+							{error}
+						</p>
+						<Button onClick={() => window.location.reload()} variant="primary" additionalClassName="w-full">
+							Try Again


move hardcoded strings to translations

jessevanmuijden · 2026-01-30T01:21:33Z

src/pages/PreAuth/PreAuth.jsx

+					body: new URLSearchParams({
+						"response_type": "code", "client_id": client_id, "redirect_uri": REDIRECT_URI,
+						"scope": "pid:sd_jwt_dc", "issuer_state": issuerState,
+						"code_challenge": "n4bQgYhMfWWaL-qgxVrQFaO_TxsrC4Is0V1sFbDwCgg", "code_challenge_method": "S256"


should the code_challenge be hardcoded here?

jessevanmuijden · 2026-01-30T01:23:35Z

src/pages/PreAuth/PreAuth.jsx

+				};
+
+				// 1. Pushed Authorization Request
+				const parData = await safeFetchJson(`${BASE_URL}/pushed-authorization-request`, {


parData 🏌️ is confusing. There is no shame in pushedAuthorizationRequestData. That reduces the need for the comment above to clarify the code.

jessevanmuijden · 2026-01-30T01:24:36Z

src/pages/PreAuth/PreAuth.jsx

+import PopupLayout from '../../components/Popups/PopupLayout';
+import Button from '../../components/Buttons/Button';
+import { H1 } from '../../components/Shared/Heading';
+const BASE_URL = import.meta.env.VITE_WALLET_BACKEND_URL;


why does this file have so little formatting? Like, a new line after the imports would be nice.

jessevanmuijden · 2026-01-30T01:27:29Z

src/pages/Login/LoginState.jsx

-				navigate(`?${params.toString()}`, { replace: true });
-
+				const queryParams = new URLSearchParams(location.search);
+				const targetPath = queryParams.has('qrcodeurl') ? '/pre-auth' : '/';


handling a credential offer (uri) does not require its own page. It can be done on the homepage where the credentials are listed. Also, introducing a query parameter qrcodeurl seems incorrect. The wallet can receive a credential offer or credential offer uri, right? In the full desktop flow there is no qrcode at play at all, so the naming is invalid.

jessevanmuijden · 2026-01-30T01:31:19Z

src/pages/PreAuth/PreAuth.jsx

+	}, [api, keystore, navigate, preAuthCode, issuerState]);
+
+	return (
+		<PopupLayout


If you handle everything in a popup, you don't need a separate /preauth page, but you can process the credential on any page, right?

jessevanmuijden · 2026-01-30T01:33:57Z

src/pages/PreAuth/PreAuth.jsx

+import Button from '../../components/Buttons/Button';
+import { H1 } from '../../components/Shared/Heading';
+const BASE_URL = import.meta.env.VITE_WALLET_BACKEND_URL;
+const REDIRECT_URI = "http://localhost:3000";


this will not work everywhere

jessevanmuijden · 2026-01-30T01:34:10Z

src/pages/PreAuth/PreAuth.jsx

+import { H1 } from '../../components/Shared/Heading';
+const BASE_URL = import.meta.env.VITE_WALLET_BACKEND_URL;
+const REDIRECT_URI = "http://localhost:3000";
+const client_id = "CLIENT123";


this will not work everywhere

jessevanmuijden · 2026-01-30T01:35:07Z

src/pages/PreAuth/PreAuth.jsx

+const BASE_URL = import.meta.env.VITE_WALLET_BACKEND_URL;
+const REDIRECT_URI = "http://localhost:3000";
+const client_id = "CLIENT123";
+const b64UrlEncode = (data) => {


These and the next functions are generic and some may already exist in the project. They belong in a lib for better reusability.

jessevanmuijden · 2026-01-30T01:37:21Z

src/pages/PreAuth/PreAuth.jsx

+		const qrcodeurl = searchParams.get('qrcodeurl') || "";
+		const decodedOffer = decodeURIComponent(qrcodeurl);
+		const stateMatch = decodedOffer.match(/issuer_state["%22]*[:%3A]*\s*["%22]*([^"%&]+)/);
+		const codeMatch = decodedOffer.match(/pre-authorized_code["%22]*[:%3A]*\s*["%22]*([^"%&]+)/);
+		return {
+			preAuthCode: searchParams.get('pre_auth_code') || (codeMatch ? codeMatch[1] : "N/A"),
+			issuerState: stateMatch ? stateMatch[1] : null
+		};


this code is difficult to read and looks brittle

jessevanmuijden · 2026-01-30T01:38:22Z

src/pages/PreAuth/PreAuth.jsx

+				{isSuccess ? (
+					<div className="animate-in fade-in zoom-in duration-500">
+						<div className="flex items-center justify-center w-16 h-16 rounded-full bg-green-500/20 text-green-500 mb-4 mx-auto">
+							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor" className="w-8 h-8">


maybe put raw svg content in an icon component instead of straight in a page layout.

jessevanmuijden · 2026-01-30T01:45:20Z

src/pages/PreAuth/PreAuth.jsx

+				// 1. Pushed Authorization Request
+				const parData = await safeFetchJson(`${BASE_URL}/pushed-authorization-request`, {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/x-www-form-urlencoded' },


a page component should not be concerned with http request content type headers. you could abstract these details away into a client.

jessevanmuijden · 2026-01-30T01:49:46Z

src/pages/PreAuth/PreAuth.jsx

+						credentialIssuerIdentifier: BASE_URL,
+						batchId: Date.now(),
+						instanceId: 0,
+						claims: {


this looks unfinished

jessevanmuijden · 2026-01-30T01:50:48Z

src/pages/PreAuth/PreAuth.jsx

+	}, [searchParams]);
+
+	useEffect(() => {
+		const handleClaim = async () => {


this function is very long, which is error prone. It also needs to be split up, because somewhere along the way you may need to prompt the user to enter a pin.

yimyitbarek added 4 commits January 27, 2026 21:13

Add private routing to the pre-authorization code flow

15415a5

Add full pre-authorization credential workflow

aeaa039

remove unnecessary semicolon

ae270c7

remove unused routes

17933ea

yimyitbarek requested a review from a team as a code owner January 29, 2026 18:16

jessevanmuijden reviewed Jan 30, 2026

View reviewed changes

Feature/pre authorization implementation #1002

Are you sure you want to change the base?

Feature/pre authorization implementation #1002

Uh oh!

Conversation

yimyitbarek commented Jan 29, 2026

Summary

Type of change

Related issues / tickets

Changes

Architecture decisions

Screenshots / recordings (if UI changes)

How to test

Checklist

Notes for reviewers

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jessevanmuijden Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jessevanmuijden Jan 30, 2026 •

edited

Loading