wip: pre-authorized_code flow #375

jessevanmuijden · 2024-10-22T20:52:35Z

The intention of this draft PR is to provide a basis for collecting feedback on how to fit the pre-authorized_code flow implementation into the existing architecture of wwwallet. I have commented on the challenges I faced on the files of the PR and summarized my challenges below the video. Some refactoring of the wwwallet architecture may be needed to support pre-authorized_code flow. It is probably best to split the problem up into smaller problems that are easy to solve separately. I may have broken the existing flows in this draft, which needs to be addressed.

Feature

As Martin Jørgensen from MBO Beek
I want to save an Academic Base Credential into my wwWallet
In order to prove my affiliation with MBO Beek to other organizations

Given I am logged in as Martin Jørgensen to my Eduwallet account on https://mbob.idp.dev.eduwallet.nl/simplesaml/module.php/profile on my desktop
And I am logged in to my wwWallet account on my smartphone
When I scan the QR code on my Eduwallet profile page with the wwWallet
Then my Academic Base Credential issued by MBO Beek appears in my wwWallet

Demo of feature in action

pre-authorized_code.mov

Challenges

useCheckUrl.ts acts like a router and contains quite a bit of logic. The pre-authorized_code flow may be easier to integrate if some of the logic is moved to a functional component.
The application now errors if the credential does not contain a credentialImageSvgTemplateURL or a credentialImageURL, or has no credentialImage at all. Also, the credentialImage can reside under credential.vc.credentialImage if the VC has a different format. More flexibility in retrieving the credentialImage as well as a fallback image would be helpful.
The credential fields to render in the credential info is hardcoded. While it is fine to have hard-baked templates for some credentials, it would be nice to have a default rendering method for any other credentials based on the credential definition that can be found here: https://agent.dev.eduwallet.nl/mbob/.well-known/openid-credential-issuer, e.g. parsedCredential?.vc?.credentialSubject
The credentialParserRegistry now only has a parser for the vc+sd-jwt format. It should intelligently parse the jwt_vc_json format if applicable.
Somehow, credentialConfigurationId and credentialIssuerIdentifier fields are not stored in the IndexedDB, while they are stored on demo.wwwallet.org. Having the credentialIssuerIdentifier would be very helpful for displaying the credential based on credential configuration fetched from the issuer's configuration endpoint.
With pre-authorized-code flow, the credential can be issued to wwwallet in a simple procedure, with zero configuration, as is required for the other example issuers. This allows us to experiment with any issuer, even when their configuration is not stored in the database of the wallet-backend-server. I don't know how to marry this with the current application architecture for authorization code flow that calls handleCredentialOffer, which is strongly designed toward Authorization, on openID4VCIClients from the container that are constructed based on configured issuers fetched from the database, while I would like to use some of the dependencies that these clients are composed with.
The subsequent fetches in the pre-authorized code flow implementation can be abstracted out to an OpenId4VC client, but we already have one, so adding more methods to that interface may get confusing. We could refactor to separate clients for pre-authorized code flow and authorization code flow.
credential_configurations_supported is an array of one or more supported formats. A chain pattern may be appropriate for deciding which supported format to use, since this affects subsequent processing of the credential.
The cryptographic_binding_methods_supported of the issuer https://agent.dev.eduwallet.nl/mbob/.well-known/openid-credential-issuer are ["did:jwk", "did:key"], so the credential only considered the jwt verified with a kid header with the did as a value. This means that we should have different ways to construct jwts depending on the cryptographic_binding_methods_supported of the issuer.

Additional notes

After scanning the QR code the wwWallet React app flashes 5 times. This UX can be improved by refactoring the components such that fewer re-renders are triggered
When the URL contains a credential offer, the issuer configuration of all configured issuers are fetched. It could be more efficient to fetch only the issuer configuration from the /well-known/ endpoint of the issuer in the credential offer.
Indenting with spaces instead of tabs would make the PRs on GitHub easier to read. Github displays tabs as 8 spaces.

jessevanmuijden · 2024-10-22T20:58:54Z

src/components/Credentials/CredentialImage.js

-			) : parsedCredential && parsedCredential.credentialImage.credentialImageURL && (
-				<img src={parsedCredential.credentialImage.credentialImageURL} alt={"Credential"} className={className} onClick={onClick} />
+			) : (
+				<img src={parsedCredential?.credentialImage?.credentialImageURL || 'https://picsum.photos/300/200' } alt={"Credential"} className={className} onClick={onClick} />


The application now errors if the credential does not contain a credentialImageSvgTemplateURL or a credentialImageURL, or has no credentialImage at all. Also, the credentialImage can reside under credential.vc.credentialImage if the VC has a different format. More flexibility in retrieving the credentialImage as well as a fallback image would be helpful.

jessevanmuijden · 2024-10-22T21:03:29Z

src/components/Credentials/CredentialInfo.js

@@ -86,6 +86,11 @@ const CredentialInfo = ({ credential, mainClassName = "text-sm lg:text-base w-fu
 							{renderRow('grade', 'Grade', parsedCredential?.grade, screenType)}
 							{renderRow('id', 'Social Security Number', parsedCredential?.ssn, screenType)}
 							{renderRow('id', 'Document Number', parsedCredential?.document_number, screenType)}
+


The credential fields to render in the credential info is hardcoded. While it is fine to have hard-baked templates for some credentials, it would be nice to have a default rendering method for any other credentials based on the credential definition that can be found here: https://agent.dev.eduwallet.nl/mbob/.well-known/openid-credential-issuer. Also, the credential format needs to be taken into account, e.g. parsedCredential?.vc?.credentialSubject

jessevanmuijden · 2024-10-22T21:11:15Z

src/components/Credentials/CredentialJson.js

@@ -10,7 +10,7 @@ const CredentialJson = ({ credential, textAreaRows='10' }) => {

 	useEffect(() => {
 		if (container) {
-			container.credentialParserRegistry.parse(credential).then((c) => {
+			container.credentialParserRegistry.parse(credential.vc || credential).then((c) => {


The credentialParserRegistry now only has a parser for the vc+sd-jwt format. It should intelligently parse the jwt_vc_json format if applicable.

jessevanmuijden · 2024-10-22T21:13:11Z

src/functions/parseSdJwtCredential.ts

@@ -32,6 +42,10 @@ export const parseSdJwtCredential = async (credential: string | object): Promise
 				}

 			}
+
+			return {
+				beautifiedForm: parseJwt(credential),


This should probably be moved to a separate parser for the jwt_vc_json format, please advise.

jessevanmuijden · 2024-10-22T21:17:48Z

src/hooks/useCheckURL.ts

+			const credential = await credentialResponse.json();
+
+			await storeCredential({
+				credentialConfigurationId: did.id,


Somehow, credentialConfigurationId and credentialIssuerIdentifier fields are not stored in the IndexedDB, while they are stored on demo.wwwallet.org. Having the credentialIssuerIdentifier would be very helpful for displaying the credential based on credential configuration fetched from the issuer's configuration endpoint.

jessevanmuijden · 2024-10-22T21:21:57Z

src/hooks/useCheckURL.ts

@@ -41,7 +44,88 @@ function useCheckURL(urlToCheck: string): {
 			throw new Error("User handle could not be extracted from keystore");
 		}
 		const u = new URL(urlToCheck);
-		if (u.protocol === 'openid-credential-offer' || u.searchParams.get('credential_offer') || u.searchParams.get('credential_offer_uri') ) {
+		if (u.searchParams.get('credential_offer_uri') ) {


This if-statement breaks the existing implementation, but I used it to finalize the implementation in its purest form following the path of least resistance. This helps to demonstrate that with pre-authorized-code flow, the credential can be issued to wwwallet in a simple procedure, with zero configuration, as is required for the other example issuers.

jessevanmuijden · 2024-10-22T21:33:31Z

src/hooks/useCheckURL.ts

+				},
+			});
+			const openIdCredentialIssuer = await openIdCredentialIssuerResponse.json();
+			// const metadata = OpenidCredentialIssuerMetadataSchema.parse(openIdCredentialIssuer);


The schema parser cannot parse the jwt_vc_json format. We could make the parser more flexible or use different schema parsers depending on the format.

jessevanmuijden · 2024-10-22T21:35:30Z

src/hooks/useCheckURL.ts

+			const credentailOfferResponse = await fetch(u.searchParams.get('credential_offer_uri'));
+			const credentialOffer = await credentailOfferResponse.json();


This and subsequent fetches can be abstracted out to an OpenId4VC client, but we already have one, so adding more methods to that interface may get confusing. We could refactor to separate clients for pre-authorized code flow and authorization code flow.

jessevanmuijden · 2024-10-22T21:38:29Z

src/hooks/useCheckURL.ts

+			// const metadata = OpenidCredentialIssuerMetadataSchema.parse(openIdCredentialIssuer);
+			const metadata = openIdCredentialIssuer; // @todo: investigate schema errors
+
+			const generateNonceProof = async (cNonce: string, audience: string, clientId: string): Promise<{ jws: string }> => {


This is copy-pasted from an injected dependency. It would be better to inject the same dependency into some sort of PreAuthorizedCodeFlowClient.

jessevanmuijden · 2024-10-22T21:38:39Z

src/hooks/useCheckURL.ts

+				return { jws: proof_jwt };
+			};
+
+			const storeCredential = async (c: StorableCredential) => {


This is also copy-pasted from an injected dependency. It would be better to inject the same dependency into some sort of PreAuthorizedCodeFlowClient.

jessevanmuijden · 2024-10-22T21:40:47Z

src/hooks/useCheckURL.ts

+					'proof_type': 'jwt',
+					'jwt': jws,
+				},
+				format: VerifiableCredentialFormat.JWT_VC_JSON, // @todo: retrieve from credential_configurations_supported


credential_configurations_supported is an array of one or more supported formats. A chain pattern may be appropriate for deciding which supported format to use, since this affects subsequent processing of the credential.

jessevanmuijden · 2024-10-22T21:44:34Z

src/hooks/useCheckURL.ts

+					'jwt': jws,
+				},
+				format: VerifiableCredentialFormat.JWT_VC_JSON, // @todo: retrieve from credential_configurations_supported
+				...(metadata.credential_configurations_supported.AcademicBaseCredential), // @todo: retrieve from credential_configurations_supported


This should be fetched dynamically, but is now hardcoded for the demo.

jessevanmuijden · 2024-10-22T21:45:31Z

src/hooks/useContainer.ts


-					if (!credentialImageURL) { // prrovide fallback method through the OpenID credential issuer metadata
+					if (!credentialImageURL) { // provide fallback method through the OpenID credential issuer metadata


This fallback breaks if the issuer is not pre-configured in the database of the wallet-backend-server.

jessevanmuijden · 2024-10-22T21:46:28Z

src/lib/types/StorableCredential.ts

@@ -4,4 +4,6 @@ export type StorableCredential = {
 	credentialIdentifier: string;
 	format: VerifiableCredentialFormat;
 	credential: string;
+	credentialIssuerIdentifier?: string;


Why is this not needed to store these fields on demo.wwwallet.org?

jessevanmuijden · 2024-10-22T21:47:09Z

src/lib/services/OpenID4VCIHelper.ts

@@ -37,7 +37,7 @@ export class OpenID4VCIHelper implements IOpenID4VCIHelper {
 		}
 		catch(err) {
 			console.error(err);
-			throw new Error("Couldn't get Credential Issuer Metadata");
+			// throw new Error("Couldn't get Credential Issuer Metadata");


Otherwise, the application breaks when the issuer is not pre-configured in the database of the wallet-backend-server.

jessevanmuijden · 2024-10-22T21:52:19Z

src/services/keystore.ts

 	})
 		.setProtectedHeader({
 			alg: keypair.alg,
 			typ: "openid4vci-proof+jwt",
-			jwk: { ...keypair.publicKey, key_ops: ['verify'] } as JWK,
+			// jwk: { ...keypair.publicKey, key_ops: ['verify'] } as JWK,
+			kid: did,


The cryptographic_binding_methods_supported of the issuer https://agent.dev.eduwallet.nl/mbob/.well-known/openid-credential-issuer are ["did:jwk", "did:key"], so the credential only considered the jwt verified with a kid header with the did as a value. This means that we should have different ways to construct jwts depending on the cryptographic_binding_methods_supported of the issuer.

wip: pre-authorized_code flow

e54a5ee

jessevanmuijden commented Oct 22, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

wip: pre-authorized_code flow #375

wip: pre-authorized_code flow #375

jessevanmuijden commented Oct 22, 2024 •

edited

Loading

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024 •

edited

Loading

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024 •

edited

Loading

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

jessevanmuijden Oct 22, 2024

		const credentailOfferResponse = await fetch(u.searchParams.get('credential_offer_uri'));
		const credentialOffer = await credentailOfferResponse.json();


		if (!credentialImageURL) { // prrovide fallback method through the OpenID credential issuer metadata
		if (!credentialImageURL) { // provide fallback method through the OpenID credential issuer metadata

wip: pre-authorized_code flow #375

Are you sure you want to change the base?

wip: pre-authorized_code flow #375

Conversation

jessevanmuijden commented Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

jessevanmuijden Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jessevanmuijden Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jessevanmuijden commented Oct 22, 2024 •

edited

Loading

jessevanmuijden Oct 22, 2024 •

edited

Loading

jessevanmuijden Oct 22, 2024 •

edited

Loading