feat: handle credential offer deep links

android/app/src/main/AndroidManifest.xml

@@ -6,6 +6,12 @@
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
+            <intent-filter android:autoVerify="true">
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="openid4vp" />
+            </intent-filter>
         </activity>
         <provider android:authorities="${applicationId}.fileprovider" android:exported="false" android:grantUriPermissions="true" android:name="androidx.core.content.FileProvider">
             <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />

android/app/src/main/res/values/strings.xml

@@ -3,5 +3,4 @@
     <string name="app_name">DIDroom Wallet</string>
     <string name="title_activity_main">DIDroom Wallet</string>
     <string name="package_name">com.didroom.wallet</string>
-    <string name="custom_url_scheme">openid-credential-offer</string>
 </resources>

ios/App/App/Info.plist

@@ -46,5 +46,16 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<true/>
+	<key>CFBundleURLTypes</key>
+	<array>
+	<dict>
+		<key>CFBundleURLName</key>
+		<string>com.getcapacitor.capacitor</string>
+		<key>CFBundleURLSchemes</key>
+		<array>
+		<string>openid4vp</string>
+		</array>
+	</dict>
+	</array>
 </dict>
 </plist>

src/lib/components/organisms/scanner/tools.ts

@@ -8,8 +8,13 @@ import { http } from '@slangroom/http';
 import verQrToInfo from '$lib/mobile_zencode/wallet/ver_qr_to_info.zen?raw';
 import verQrToInfoKeys from '$lib/mobile_zencode/wallet/ver_qr_to_info.keys.json?raw';
 import { log } from '$lib/log';
+import { goto } from '$app/navigation';
+import { verificationStore } from '$lib/verificationStore';
+import { credentialOfferStore } from '$lib/credentialOfferStore';
+import type { Feedback } from '$lib/utils/types';
+import { m } from '$lib/i18n';
+import { verificationResultsStore } from '$lib/verificationResultsStore';
 
-//@ts-expect-error something is wrong in Slangroom types
 const slangroom = new Slangroom(helpers, zencode, pocketbase, http);
 
 export type QrToInfoResults = {
@@ -43,17 +48,11 @@ export type Body = {
 	vp: string;
 };
 
-export type ParseQrResults =
-	| {
-			result: 'error';
-			message: string;
-	  }
-	| {
-			result: 'ok';
-			data: Data;
-	  };
+export type ParseQrError = {
+	message: string;
+};
 
-const credentialSchema = z.object({
+export const credentialSchema = z.object({
 	rp: z.string().url(),
 	t: z.string(),
 	m: z.literal('f'),
@@ -63,7 +62,7 @@ const credentialSchema = z.object({
 	id: z.string()
 });
 
-const serviceSchema = z.object({
+export const serviceSchema = z.object({
 	credential_configuration_ids: z.array(z.string()),
 	credential_issuer: z.string().url()
 });
@@ -79,43 +78,6 @@ export type Data =
 			service: Service;
 	  };
 
-export const parseQr = async (value: string): Promise<ParseQrResults> => {
-	const notValidQr = 'not valid qr';
-	let parsedValue: Record<string, unknown>;
-	let type: 'credential' | 'service';
-	try {
-		parsedValue = JSON.parse(value);
-	} catch (e) {
-		return { result: 'error', message: notValidQr };
-	}
-	if (credentialSchema.safeParse(parsedValue).success) {
-		type = 'credential';
-		parsedValue.type = 'credential';
-	} else if (serviceSchema.safeParse(parsedValue).success) {
-		type = 'service';
-		parsedValue.type = 'service';
-	} else {
-		return { result: 'error', message: notValidQr };
-	}
-
-	// if (type == 'credential' && !isUrlAllowed(parsedValue.url as string)) {
-	// 	return { result: 'error', message: 'not allowed verifier url' };
-	// }
-
-	//todo: validate service urls
-	if (type == 'service') {
-		delete parsedValue.type;
-		return { result: 'ok', data: { type, service: parsedValue as Service } };
-	} else {
-		try {
-		const credential = await getCredentialQrInfo(parsedValue as Credential);
-		return { result: 'ok', data: { type, credential } };
-		} catch (err) {
-			return { result: 'error', message: `error getting credential info: ${err}` };
-		}
-	}
-};
-
 export const verifyCredential = async (post: Post) => {
 	const res = await slangroom.execute(
 		`Rule unknown ignore
@@ -137,13 +99,110 @@ export const getCredentialQrInfo = async (qrJSON: Credential) => {
 		...qrJSON,
 		credential_array: myCredentials
 	};
-	log(JSON.stringify(data))
+	log(JSON.stringify(data));
 	try {
-	const res = await slangroom.execute(verQrToInfo, { data, keys: JSON.parse(verQrToInfoKeys) });
-	log(JSON.stringify(res));
-	return res.result as QrToInfoResults;
+		const res = await slangroom.execute(verQrToInfo, { data, keys: JSON.parse(verQrToInfoKeys) });
+		log(JSON.stringify(res));
+		return res.result as QrToInfoResults;
 	} catch (err) {
 		log(JSON.stringify(err));
 		throw new Error(`error executing zencode: ${err}`);
 	}
 };
+
+const parseBarcodeErrors = (barcodeResultMessage?: string) => {
+	if (!barcodeResultMessage) return;
+	if (!(typeof barcodeResultMessage === 'string')) return;
+	if (barcodeResultMessage.includes('QR code is expired')) {
+		return m.QR_code_is_expired();
+	}
+	if (
+		barcodeResultMessage.includes(
+			'no_signed_selective_disclosure_found_that_matched_the_requested_claims'
+		)
+	) {
+		return m.You_have_no_signed_selective_disclosure_that_matched_the_requested_claims_or_your_credential_is_expired();
+	}
+	return barcodeResultMessage;
+};
+
+const infoFromVerificationData = async (
+	data: Credential
+): Promise<
+	| {
+			success: true;
+			info: QrToInfoResults;
+	  }
+	| {
+			success: false;
+			feedback: Feedback;
+	  }
+> => {
+	try {
+		const credential = await getCredentialQrInfo(data);
+		verificationStore.set(credential);
+		return {
+			success: true,
+			info: credential
+		};
+	} catch (err: { message: unknown }) {
+		return {
+			success: false,
+			feedback: {
+				type: 'error',
+				feedback: 'Verification failed',
+				message: parseBarcodeErrors(err.message)
+			}
+		};
+	}
+};
+
+export const gotoQrResult = async (url: string) => {
+	const urlParams = new URLSearchParams(url.split('://?')[1]);
+	const getUrlParams = (params: (string | [string, 'number' | 'array'])[]) =>
+		params.reduce((object, value) => {
+			const isValueString = typeof value === 'string';
+			const key = isValueString ? value : value[0];
+			const type = isValueString ? 'string' : value[1];
+
+			return {
+				...object,
+				[key]:
+					type === 'string'
+						? urlParams.get(key)?.trim()
+						: type === 'array'
+							? [urlParams.get(key)]
+							: Number(urlParams.get(key)?.trim())
+			};
+		}, {});
+
+	const parsedVerification = credentialSchema.safeParse(
+		getUrlParams(['rp', 't', 'm', ['exp', 'number'], 'ru', 'sid', 'id'])
+	);
+
+	if (parsedVerification.success) {
+		const info = await infoFromVerificationData(parsedVerification.data);
+		if (info.success) {
+			verificationStore.set(info.info);
+			return await goto('/verification');
+		} else {
+			verificationResultsStore.set({
+				feedback: info.feedback,
+				date: new Date().toISOString(),
+				id: parsedVerification.data.sid,
+				success: false
+			});
+			return await goto('/verification/results');
+		}
+	}
+
+	const parsedService = serviceSchema.safeParse(
+		getUrlParams([['credential_configuration_ids', 'array'], 'credential_issuer'])
+	);
+
+	if (parsedService.success) {
+		credentialOfferStore.set(parsedService.data);
+		return await goto('/credential-offer');
+	}
+	return await goto('/unlock');
+};

src/lib/verificationResultsStore.ts

@@ -0,0 +1,11 @@
+import type { Feedback } from './utils/types';
+import { writable } from 'svelte/store';
+
+export type VerificationResults = {
+	feedback: Feedback;
+	date: string;
+	id: string;
+	success: boolean;
+};
+
+export const verificationResultsStore = writable<VerificationResults>();

src/routes/+layout.svelte

@@ -15,7 +15,9 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { navigating } from '$app/stores';
 	import { App } from '@capacitor/app';
+	import { gotoQrResult } from '$lib/components/organisms/scanner/tools';
 	import FingerPrint from '$lib/assets/lottieFingerPrint/FingerPrint.svelte';
+
 	const controller = new AbortController();
 	const signal = controller.signal;
 
@@ -36,6 +38,10 @@
 			},
 			{ signal }
 		);
+
+		App.addListener('appUrlOpen', async (data) => {
+			await gotoQrResult(data.url);
+		});
 	});
 	onDestroy(() => {
 		controller.abort();
@@ -48,7 +54,7 @@
 		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
 	/>
 	<!-- uncomment to test didroom-components locally -->
-	 <!-- <script 
+	<!-- <script 
 	 	type="module" 
 	 	src="http://localhost:3333/build/didroom-components.esm.js" 
 	 ></script> 

src/routes/[[lang]]/(protected)/+layout.svelte

@@ -5,13 +5,11 @@
 	import { goto, m } from '$lib/i18n';
 	import { onDestroy, onMount } from 'svelte';
 	import type { PluginListenerHandle } from '@capacitor/core';
-	import { getHomeFeedbackPreference } from '$lib/homeFeedbackPreferences.js';
 
 	export let data;
 	const { notReadedActivities, hasHomeFeedback } = data;
 	let appStateChange: PluginListenerHandle;
 
-
 	//
 
 	onMount(async () => {
@@ -23,7 +21,7 @@
 	});
 
 	onDestroy(() => {
-		appStateChange.remove();
+		if (appStateChange) appStateChange?.remove();
 	});
 
 	let tabs: TabProps[] = [

src/routes/[[lang]]/(protected)/scan/+page.svelte

@@ -1,32 +1,14 @@
 <script lang="ts">
 	import Modal from '$lib/components/molecules/Modal.svelte';
 	import Scanner from '$lib/components/organisms/scanner/Scanner.svelte';
-	import { parseQr, type ParseQrResults } from '$lib/components/organisms/scanner/tools';
-	import { credentialOfferStore } from '$lib/credentialOfferStore';
-	import { goto, m } from '$lib/i18n';
-	import { verificationStore } from '$lib/verificationStore';
+	import { gotoQrResult, type ParseQrError } from '$lib/components/organisms/scanner/tools';
 	import { Capacitor } from '@capacitor/core';
 	import { pushState } from '$app/navigation';
 	import { page } from '$app/stores';
 
-	let barcodeResult: ParseQrResults;
-	let isModalOpen: boolean;
+	let barcodeResult: ParseQrError | void;
 	const isWeb = Capacitor.getPlatform() == 'web';
 
-	const parseBareCodeResultErrors = (barcodeResultMessage: string) => {
-		console.log(barcodeResultMessage);
-		if (barcodeResultMessage.includes('QR code is expired')) {
-			return m.QR_code_is_expired();
-		}
-		if (
-			barcodeResultMessage.includes(
-				'no_signed_selective_disclosure_found_that_matched_the_requested_claims'
-			)
-		) {
-			return m.You_have_no_signed_selective_disclosure_that_matched_the_requested_claims_or_your_credential_is_expired();
-		}
-		return barcodeResultMessage;
-	};
 	function showModal() {
 		pushState('', {
 			isModalOpen: true
@@ -37,17 +19,13 @@
 <Scanner
 	let:scan
 	on:success={async (e) => {
-		barcodeResult = await parseQr(e.detail.qr);
-		if (barcodeResult.result === 'ok' && barcodeResult.data.type === 'service') {
-			credentialOfferStore.set(barcodeResult.data.service);
-			return await goto('/credential-offer');
-		}
-		if (barcodeResult.result === 'ok' && barcodeResult.data.type === 'credential') {
-			verificationStore.set(barcodeResult.data.credential);
-			return await goto('/verification');
+		const qr = e.detail.qr;
+		if (!qr.startsWith('openid4vp://')) {
+			console.log('failed:', e.detail.qr);
+			showModal();
+			return;
 		}
-		showModal();
-		return (isModalOpen = true);
+		return await gotoQrResult(qr);
 	}}
 >
 	<Modal
@@ -58,8 +36,6 @@
 		}}
 		textToCopy={barcodeResult?.message}
 	>
-		{#if !(barcodeResult?.result === 'ok')}
-			<d-text size="m">{parseBareCodeResultErrors(barcodeResult?.message || 'error')}</d-text>
-		{/if}
+		<d-text size="m">{barcodeResult?.message || 'error'}</d-text>
 	</Modal>
 </Scanner>

src/routes/[[lang]]/(protected)/verification/results/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { m } from '$lib/i18n';
+	import HeaderWithBackButton from '$lib/components/molecules/HeaderWithBackButton.svelte';
+	import { verificationResultsStore } from '$lib/verificationResultsStore';
+
+	const { feedback, date, id, success } = $verificationResultsStore;
+</script>
+
+<HeaderWithBackButton>
+	{success ? 'verification started' : 'verification failed'}
+</HeaderWithBackButton>
+
+<ion-content fullscreen class="ion-padding">
+	<d-feedback {...feedback} class="break-all" />
+
+	<div class="flex w-full justify-around">
+		<d-session-card sid={id} {date} {success} />
+	</div>
+</ion-content>