feat: authenticated screens and pid receiving

apps/funke/agent/index.ts

@@ -0,0 +1,9 @@
+import { type FunkeAppAgent, useAgent } from '@package/agent'
+import { useSecureUnlock as _useSecureUnlock } from '@package/secure-store/secureUnlock'
+
+export { initializeAppAgent } from './initialize'
+
+export const useAppAgent = useAgent<FunkeAppAgent>
+export type AppAgent = FunkeAppAgent
+
+export const useSecureUnlock = () => _useSecureUnlock<{ agent?: AppAgent }>()

apps/funke/agent/initialize.ts

@@ -0,0 +1,12 @@
+import { initializeFunkeAgent } from '@package/agent'
+import { trustedCertificates } from '../constants'
+
+export function initializeAppAgent({ walletKey }: { walletKey: string }) {
+  return initializeFunkeAgent({
+    keyDerivation: 'raw',
+    walletId: 'funke-wallet',
+    walletKey: walletKey,
+    walletLabel: 'Funke Wallet',
+    trustedX509Certificates: trustedCertificates,
+  })
+}

apps/funke/app.config.js

@@ -6,23 +6,14 @@ const variants = {
   development: {
     bundle: '.dev',
     name: ' (Dev)',
-    trustedCertificates: [
-      // https://funke.animo.id
-      'MIIBAzCBq6ADAgECAhArxq0w60RTDK4WY9HzgcvBMAoGCCqGSM49BAMCMAAwIBcNNzAwMTAxMDAwMDAwWhgPMjI4NjExMjAxNzQ2NDBaMAAwOTATBgcqhkjOPQIBBggqhkjOPQMBBwMiAALcD1XzKepFxWMAOqV+ln1fybBt7DRO5CV0f9A6mRp2xaMlMCMwIQYDVR0RBBowGIYWaHR0cHM6Ly9mdW5rZS5hbmltby5pZDAKBggqhkjOPQQDAgNHADBEAiAfvGG6sqrvzIMWYpJB5VLloo9f51loYXSkKxJIOztlNwIgLLSvEl0Dmp5vtj2buZ2nXQ2RBKxiLbc5eYGeMeoUnjk=',
-    ],
   },
   preview: {
     bundle: '.preview',
     name: ' (Preview)',
-    trustedCertificates: [
-      // https://funke.animo.id
-      'MIIBAzCBq6ADAgECAhArxq0w60RTDK4WY9HzgcvBMAoGCCqGSM49BAMCMAAwIBcNNzAwMTAxMDAwMDAwWhgPMjI4NjExMjAxNzQ2NDBaMAAwOTATBgcqhkjOPQIBBggqhkjOPQMBBwMiAALcD1XzKepFxWMAOqV+ln1fybBt7DRO5CV0f9A6mRp2xaMlMCMwIQYDVR0RBBowGIYWaHR0cHM6Ly9mdW5rZS5hbmltby5pZDAKBggqhkjOPQQDAgNHADBEAiAfvGG6sqrvzIMWYpJB5VLloo9f51loYXSkKxJIOztlNwIgLLSvEl0Dmp5vtj2buZ2nXQ2RBKxiLbc5eYGeMeoUnjk=',
-    ],
   },
   production: {
     bundle: '',
     name: '',
-    trustedCertificates: [],
   },
 }
 
@@ -62,6 +53,7 @@ const config = {
     fallbackToCacheTimeout: 0,
   },
   plugins: [
+    '@animo-id/expo-ausweis-sdk',
     [
       'expo-font',
       {
@@ -111,11 +103,13 @@ const config = {
       })),
     ],
   },
+  experiments: {
+    tsconfigPaths: true,
+  },
   extra: {
     eas: {
-      projectId: 'b5f457fa-bcab-4c6e-8092-8cdf1239027a',
+      projectId: 'todo',
     },
-    trustedCertificates: variant.trustedCertificates,
   },
 }
 

apps/funke/app/(app)/_layout.tsx

@@ -0,0 +1,37 @@
+import { Redirect, Stack } from 'expo-router'
+import { Text } from 'react-native'
+
+import { useSecureUnlock } from '@/agent'
+import { AgentProvider } from '@package/agent'
+
+export default function AppLayout() {
+  const secureUnlock = useSecureUnlock()
+
+  // Wallet is not configured yet. Redirect to onboarding
+  if (secureUnlock.state === 'not-configured') {
+    return <Redirect href="/onboarding" />
+  }
+
+  // Wallet is locked. Redirect to authentication screen
+  if (secureUnlock.state === 'locked') {
+    return <Redirect href="/authenticate" />
+  }
+
+  // This should show the splash screen
+  if (secureUnlock.state === 'initializing') {
+    return <Text>Loading... initializing</Text>
+  }
+
+  if (!secureUnlock.context.agent) {
+    // TODO: what to do? Should be set by authentication or onboarding
+    // Probably authenticate again?
+    return <Text>Loading... missing agent</Text>
+  }
+
+  // Render the normal wallet, which is everything inside (app)
+  return (
+    <AgentProvider agent={secureUnlock.context.agent}>
+      <Stack />
+    </AgentProvider>
+  )
+}

apps/funke/app/(app)/index.tsx

@@ -0,0 +1,70 @@
+import { useAppAgent } from '@/agent'
+import { addMessageListener } from '@animo-id/expo-ausweis-sdk'
+import { Button, Paragraph, XStack, YStack } from '@package/ui'
+import { Stack } from 'expo-router'
+import { useEffect, useState } from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ReceivePidUseCase, type ReceivePidUseCaseState } from '../../use-cases/ReceivePidUseCase'
+
+export default function Screen() {
+  const { top } = useSafeAreaInsets()
+  // FIXME: should be useReceivePidUseCase as the state is now not updated....
+  const [receivePidUseCase, setReceivePidUseCase] = useState<ReceivePidUseCase>()
+  const [state, setState] = useState<ReceivePidUseCaseState | 'not-initialized'>('not-initialized')
+  const [credential, setCredential] = useState<string>()
+  const { agent } = useAppAgent()
+
+  useEffect(() => {
+    const { remove } = addMessageListener((message) => {
+      console.log('receive message', JSON.stringify(message, null, 2))
+    })
+
+    return () => remove()
+  }, [])
+
+  useEffect(() => {
+    ReceivePidUseCase.initialize({ agent, onStateChange: setState }).then((pidUseCase) => {
+      setReceivePidUseCase(pidUseCase)
+    })
+  }, [agent])
+
+  const nextStep = async () => {
+    if (!receivePidUseCase) return
+    if (state === 'error') return
+
+    if (state === 'acquire-access-token') return
+    if (state === 'id-card-auth') {
+      console.log('authenticate using id card')
+      await receivePidUseCase.authenticateUsingIdCard()
+      return
+    }
+    if (state === 'retrieve-credential') {
+      const credential = await receivePidUseCase.retrieveCredential()
+      setCredential(credential.compactSdJwtVc)
+    }
+  }
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerShown: true,
+          title: 'Home',
+          header: () => {
+            return <XStack h={top} bg="$background" />
+          },
+        }}
+      />
+      <YStack>
+        <Paragraph>State: {state}</Paragraph>
+        <Button.Solid disabled={state !== 'id-card-auth'} onPress={nextStep}>
+          ID Card Auth
+        </Button.Solid>
+        <Button.Solid disabled={state !== 'retrieve-credential'} onPress={nextStep}>
+          Retrieve credential
+        </Button.Solid>
+        <Paragraph>credential: {credential}</Paragraph>
+      </YStack>
+    </>
+  )
+}

apps/funke/app/_layout.tsx

@@ -1,160 +1,30 @@
-import type { OpenId4VcHolderAppAgent } from '@package/agent'
-
-import { AgentProvider } from '@package/agent'
-import {
-  DeeplinkHandler,
-  NoInternetToastProvider,
-  Provider,
-  isAndroid,
-  useTransparentNavigationBar,
-} from '@package/app'
-import { getLegacySecureWalletKey } from '@package/secure-store/legacyUnlock'
-import { Heading, Page, Paragraph, XStack, YStack, config, useToastController } from '@package/ui'
+import { NoInternetToastProvider, Provider, useTransparentNavigationBar } from '@package/app'
+import { SecureUnlockProvider } from '@package/secure-store/secureUnlock'
 import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
-import { Stack } from 'expo-router'
+import { Slot } from 'expo-router'
 import * as SplashScreen from 'expo-splash-screen'
-import { useEffect, useState } from 'react'
-import { GestureHandlerRootView } from 'react-native-gesture-handler'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
-import { initializeAppAgent } from '.'
 import tamaguiConfig from '../tamagui.config'
 
 void SplashScreen.preventAutoHideAsync()
 
 export const unstable_settings = {
   // Ensure any route can link back to `/`
-  initialRouteName: 'index',
+  initialRouteName: '(app)/index',
 }
 
-export default function HomeLayout() {
-  const [agent, setAgent] = useState<OpenId4VcHolderAppAgent>()
-
-  const [agentInitializationFailed, setAgentInitializationFailed] = useState(false)
-  const toast = useToastController()
-  const { top } = useSafeAreaInsets()
+export default function RootLayout() {
   useTransparentNavigationBar()
 
-  // Initialize agent
-  useEffect(() => {
-    if (agent) return
-
-    const startAgent = async () => {
-      const walletKey = await getLegacySecureWalletKey().catch(() => {
-        toast.show('Could not load wallet key from secure storage.')
-        setAgentInitializationFailed(true)
-      })
-      if (!walletKey) return
-
-      try {
-        const agent = await initializeAppAgent({
-          ...walletKey,
-          walletId: 'funke-wallet-secure',
-          walletLabel: 'funke-wallet',
-        })
-
-        setAgent(agent)
-      } catch {
-        setAgentInitializationFailed(true)
-        toast.show('Could not initialize agent.')
-      }
-      if (!agent) return
-    }
-
-    void startAgent()
-  }, [toast, agent])
-
-  // Hide splash screen when agent and fonts are loaded or agent could not be initialized
-  useEffect(() => {
-    if (agent || agentInitializationFailed) {
-      void SplashScreen.hideAsync()
-    }
-  }, [agent, agentInitializationFailed])
-
-  // Show error screen if agent could not be initialized
-  if (agentInitializationFailed) {
-    return (
-      <Provider config={tamaguiConfig}>
-        <Page jc="center" ai="center" g="md">
-          <YStack>
-            <Heading variant="h1">Error</Heading>
-            <Paragraph>Could not establish a secure environment. The current device could be not supported.</Paragraph>
-          </YStack>
-        </Page>
-      </Provider>
-    )
-  }
-
-  // The splash screen will be rendered on top of this
-  if (!agent) {
-    return null
-  }
-
-  // On Android, we push down the screen content when the presentation is a Modal
-  // This is because Android phones render Modals as full screen pages.
-  const headerModalOptions = isAndroid() && {
-    headerShown: true,
-    header: () => {
-      // Header is translucent by default. See configuration in app.json
-      return <XStack bg="$background" h={top} />
-    },
-  }
-
   return (
     <Provider config={tamaguiConfig}>
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <AgentProvider agent={agent}>
-          <ThemeProvider value={DefaultTheme}>
-            <NoInternetToastProvider>
-              <DeeplinkHandler>
-                <Stack initialRouteName="index" screenOptions={{ headerShown: false }}>
-                  <Stack.Screen
-                    options={{
-                      presentation: 'modal',
-                      // Extra modal options not needed for QR Scanner
-                    }}
-                    name="(home)/scan"
-                  />
-                  <Stack.Screen
-                    options={{ presentation: 'modal', ...headerModalOptions }}
-                    name="notifications/openIdCredential"
-                  />
-                  <Stack.Screen
-                    options={{ presentation: 'modal', ...headerModalOptions }}
-                    name="notifications/openIdPresentation"
-                  />
-                  <Stack.Screen
-                    options={{
-                      headerShown: true,
-                      headerStyle: {
-                        backgroundColor: config.tokens.color.background.val,
-                      },
-                      headerShadowVisible: false,
-                      headerTintColor: config.tokens.color['primary-500'].val,
-                      headerTitle: 'Inbox',
-                      headerTitleAlign: 'center',
-                      headerTitleStyle: {
-                        fontWeight: isAndroid() ? '700' : '500', // Match font weight on android to native back button style
-                        fontSize: 18,
-                      },
-                    }}
-                    name="notifications/inbox"
-                  />
-                  <Stack.Screen
-                    options={{
-                      headerShown: true,
-                      headerTransparent: true,
-                      headerTintColor: config.tokens.color['primary-500'].val,
-                      headerTitle: '',
-                    }}
-                    name="credentials/[id]"
-                  />
-                </Stack>
-              </DeeplinkHandler>
-            </NoInternetToastProvider>
-          </ThemeProvider>
-        </AgentProvider>
-      </GestureHandlerRootView>
+      <SecureUnlockProvider>
+        <ThemeProvider value={DefaultTheme}>
+          <NoInternetToastProvider>
+            <Slot />
+          </NoInternetToastProvider>
+        </ThemeProvider>
+      </SecureUnlockProvider>
     </Provider>
   )
 }