feat: authorization code flow ui (#194)

Signed-off-by: Jan <[email protected]> Signed-off-by: Timo Glastra <[email protected]> Co-authored-by: Timo Glastra <[email protected]>
animo · Nov 20, 2024 · 1eb9732 · 1eb9732
1 parent d51922e
commit 1eb9732
Show file tree

Hide file tree

Showing 48 changed files with 1,801 additions and 957 deletions.
diff --git a/apps/easypid/app.config.js b/apps/easypid/app.config.js
@@ -30,16 +30,18 @@ const invitationSchemes = [
   'openid-credential-offer',
   'openid-vc',
   'openid4vp',
-  'animo-easypid',
+  'id.animo.ausweis',
   'haip',
 ]
 
+const associatedDomains = ['funke.animo.id']
+
 /**
  * @type {import('@expo/config-types').ExpoConfig}
  */
 const config = {
   name: `EasyPID${variant.name}`,
-  scheme: 'animo-easypid',
+  scheme: 'id.animo.ausweis',
   slug: 'ausweis-wallet',
   owner: 'animo-id',
   version,
@@ -114,6 +116,7 @@ const config = {
         },
       ],
     },
+    associatedDomains: associatedDomains.map((host) => `applinks:${host}`),
   },
   android: {
     adaptiveIcon: {
@@ -129,6 +132,18 @@ const config = {
           scheme,
         },
       })),
+      ...associatedDomains.flatMap((host) =>
+        ['/invitation', '/wallet/redirect'].map((path) => ({
+          action: 'VIEW',
+          category: ['DEFAULT', 'BROWSABLE'],
+          autoVerify: true,
+          data: {
+            scheme: 'https',
+            host,
+            pathPrefix: path,
+          },
+        }))
+      ),
     ],
   },
   experiments: {

diff --git a/apps/easypid/package.json b/apps/easypid/package.json
@@ -48,8 +48,9 @@
 		"expo-status-bar": "~1.12.1",
 		"expo-system-ui": "~3.0.6",
 		"expo-updates": "~0.25.16",
-		"react": "18.2.0",
-		"react-native": "~0.74.5",
+		"expo-web-browser": "~13.0.3",
+		"react": "*",
+		"react-native": "*",
 		"react-native-argon2": "^2.0.1",
 		"react-native-fs": "^2.20.0",
 		"react-native-gesture-handler": "~2.16.2",

diff --git a/apps/easypid/src/app/(app)/activity/index.tsx b/apps/easypid/src/app/(app)/activity/index.tsx
@@ -2,7 +2,7 @@ import { FunkeActivityScreen } from '@easypid/features/activity/FunkeActivityScr
 import { useLocalSearchParams } from 'expo-router'
 
 export default function Screen() {
-  const { host, name } = useLocalSearchParams()
+  const { entityId } = useLocalSearchParams<{ entityId?: string }>()
 
-  return <FunkeActivityScreen host={host as string} name={name as string} />
+  return <FunkeActivityScreen entityId={entityId} />
 }
diff --git a/apps/easypid/src/app/(app)/notifications/openIdCredential.tsx b/apps/easypid/src/app/(app)/notifications/openIdCredential.tsx
@@ -1,5 +1,5 @@
-import { FunkeOpenIdCredentialNotificationScreen } from '@easypid/features/receive/FunkeOpenIdCredentialNotificationScreen'
+import { FunkeCredentialNotificationScreen } from '@easypid/features/receive/FunkeCredentialNotificationScreen'
 
 export default function Screen() {
-  return <FunkeOpenIdCredentialNotificationScreen />
+  return <FunkeCredentialNotificationScreen />
 }
diff --git a/apps/easypid/src/constants.ts b/apps/easypid/src/constants.ts
@@ -22,6 +22,7 @@ export const trustedX509Certificates = [
   animoFunkeRelyingPartyCertificate,
   ubiqueRootCertificate,
   oldAnimoFunkeRelyingPartyCertificate,
+  'MIIBKTCBz6ADAgECAhB6T2+09ZDXvmIu0tNzisQWMAoGCCqGSM49BAMCMA0xCzAJBgNVBAYTAk5MMB4XDTcwMDEwMTAwMDAwMFoXDTI1MTEyMjA4MjIxMlowDTELMAkGA1UEBhMCTkwwOTATBgcqhkjOPQIBBggqhkjOPQMBBwMiAALcD1XzKepFxWMAOqV+ln1fybBt7DRO5CV0f9A6mRp2xaMxMC8wLQYDVR0RBCYwJIIiMTkxYi0xMDktMzctMTQ4LTE0OC5uZ3Jvay1mcmVlLmFwcDAKBggqhkjOPQQDAgNJADBGAiEA5oy5/mmbcGuLRlDyXPPVecmrKAaoqDIARdwepx4dIj0CIQCdpXI7GbjIVun1unF4OIzA3IzingADBsjEQvQwuD9s0Q==',
 ]
 
 // https://gitlab.opencode.de/bmi/eudi-wallet/eidas-2.0-architekturkonzept/-/blob/main/architecture-proposal.md#pid-contents

diff --git a/apps/easypid/src/features/activity/FunkeActivityScreen.tsx b/apps/easypid/src/features/activity/FunkeActivityScreen.tsx
@@ -6,8 +6,8 @@ import React, { useMemo } from 'react'
 import { FadeInDown } from 'react-native-reanimated'
 import { useActivities } from './activityRecord'
 
-export function FunkeActivityScreen({ host, name }: { host?: string; name?: string }) {
-  const { activities, isLoading: isLoadingActivities } = useActivities({ filters: { host, name } })
+export function FunkeActivityScreen({ entityId }: { entityId?: string }) {
+  const { activities, isLoading: isLoadingActivities } = useActivities({ filters: { entityId } })
 
   const { handleScroll, isScrolledByOffset, scrollEventThrottle } = useScrollViewPosition()
 

diff --git a/apps/easypid/src/features/activity/activityRecord.ts b/apps/easypid/src/features/activity/activityRecord.ts
@@ -12,7 +12,9 @@ interface BaseActivity {
   status: ActivityStatus
   date: string
   entity: {
-    did: string
+    // entity id can either be: did or https url
+    id: string
+    did?: string
     host?: string
     name?: string
     logo?: DisplayImage
@@ -62,20 +64,16 @@ export const activityStorage = {
   },
 }
 
-export const useActivities = ({ filters }: { filters?: { host?: string; name?: string } } = {}) => {
+export const useActivities = ({ filters }: { filters?: { entityId?: string } } = {}) => {
   const { record, isLoading } = useWalletJsonRecord<ActivityRecord>(activityStorage.recordId)
 
   const activities = useMemo(() => {
     if (!record?.activities) return []
 
     return [...record.activities]
       .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
-      .filter((activity) => {
-        const hostMatch = !filters?.host || activity.entity.host === filters.host
-        const nameMatch = !filters?.name || activity.entity.name === filters.name
-        return hostMatch && nameMatch
-      })
-  }, [record?.activities, filters?.host, filters?.name])
+      .filter((activity) => activity.entity.id === filters?.entityId)
+  }, [record?.activities, filters?.entityId])
 
   return {
     activities,
@@ -86,6 +84,7 @@ export const useActivities = ({ filters }: { filters?: { host?: string; name?: s
 export const addReceivedActivity = async (
   agent: EasyPIDAppAgent,
   input: {
+    entityId: string
     name: string
     host?: string
     logo?: DisplayImage
@@ -113,6 +112,7 @@ export const addSharedActivity = async (
   input: {
     status: ActivityStatus
     entity: {
+      id: string
       host: string
       name?: string
       logo?: DisplayImage
@@ -135,6 +135,7 @@ export const addSharedActivity = async (
     type: 'shared',
     status: input.status,
     entity: {
+      id: input.entity.id,
       name: input.entity.name,
       host: input.entity.host,
       logo: input.entity.logo,

diff --git a/apps/easypid/src/features/onboarding/onboardingContext.tsx b/apps/easypid/src/features/onboarding/onboardingContext.tsx
@@ -547,6 +547,7 @@ export function OnboardingContextProvider({
           )
 
           await addReceivedActivity(secureUnlock.context.agent, {
+            entityId: receivePidUseCase.resolvedCredentialOffer.credentialOfferPayload.credential_issuer,
             host: getHostNameFromUrl(parsed.prettyClaims.iss) as string,
             name: pidDisplay?.issuer.name,
             logo: pidDisplay?.issuer.logo,

diff --git a/apps/easypid/src/features/pid/FunkePidSetupScreen.tsx b/apps/easypid/src/features/pid/FunkePidSetupScreen.tsx
@@ -275,6 +275,7 @@ export function FunkePidSetupScreen() {
 
     try {
       // Retrieve Credential
+
       const credentials = await receivePidUseCase.retrieveCredentials()
 
       for (const credential of credentials) {
@@ -289,6 +290,8 @@ export function FunkePidSetupScreen() {
           )
 
           await addReceivedActivity(secureUnlock.context.agent, {
+            // TODO: should host be entityId or the iss?
+            entityId: receivePidUseCase.resolvedCredentialOffer.credentialOfferPayload.credential_issuer,
             host: getHostNameFromUrl(parsed.prettyClaims.iss) as string,
             name: pidDisplay?.issuer.name,
             logo: pidDisplay?.issuer.logo,
@@ -325,12 +328,12 @@ export function FunkePidSetupScreen() {
         {
           step: 'id-card-start',
           progress: 20,
-          screen: <PidSetupStartSlide {...getPidSetupSlideContent('id-card-start')} />,
+          screen: () => <PidSetupStartSlide {...getPidSetupSlideContent('id-card-start')} />,
         },
         {
           step: 'id-card-pin',
           progress: 30,
-          screen: (
+          screen: () => (
             <PidWalletPinSlide
               title="Enter your app PIN code"
               subtitle="Enter the PIN code you use to unlock your wallet."
@@ -342,7 +345,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-requested-attributes',
           progress: 40,
           backIsCancel: true,
-          screen: (
+          screen: () => (
             <PidReviewRequestSlide
               {...getPidSetupSlideContent('id-card-requested-attributes')}
               requestedAttributes={eidCardRequestedAccessRights}
@@ -353,7 +356,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-pin',
           progress: 50,
           backIsCancel: true,
-          screen: (
+          screen: () => (
             <PidEidCardPinSlide
               {...getPidSetupSlideContent('id-card-pin')}
               onEnterPin={onIdCardPinReEnter ?? onIdCardPinEnter}
@@ -364,7 +367,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-start-scan',
           progress: 60,
           backIsCancel: true,
-          screen: (
+          screen: () => (
             <PidCardScanSlide
               {...getPidSetupSlideContent('id-card-start-scan')}
               progress={idCardScanningState.progress}
@@ -383,7 +386,7 @@ export function FunkePidSetupScreen() {
           step: 'id-card-fetch',
           progress: 80,
           backIsCancel: true,
-          screen: (
+          screen: () => (
             <PidIdCardFetchSlide
               {...getPidSetupSlideContent('id-card-fetch')}
               userName={userName}