feat: Add new auth system to fullstack example

examples/fullstack/contact-forms/src/components/pageLayout.tsx

@@ -151,6 +151,14 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
                         {identity.proof.slice(43)}
                       </Text>
                     </MenuItem>
+                    <MenuItem
+                      as={NextLink}
+                      display="block"
+                      href="/enroll-new-device"
+                      passHref
+                    >
+                      Enroll new device
+                    </MenuItem>
                     <MenuItem
                       icon={<FiLogOut />}
                       color="red.500"

examples/fullstack/contact-forms/src/pages/enroll-new-device.tsx

@@ -0,0 +1,55 @@
+import {
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Heading,
+  Input,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+import { useE2ESDKClient } from '@socialgouv/e2esdk-react'
+import type { NextPage } from 'next'
+import React from 'react'
+
+const EnrollDevicePage: NextPage = () => {
+  const [label, setLabel] = React.useState<string | undefined>()
+  const [uri, setUri] = React.useState<string | undefined>()
+  const client = useE2ESDKClient()
+  const enroll = React.useCallback(async () => {
+    const uri = await client.enrollNewDevice(label)
+    setUri(uri)
+  }, [label, client])
+
+  return (
+    <>
+      <Heading as="h1">Enroll new device</Heading>
+      <Stack spacing={4} mt={8}>
+        {Boolean(uri) ? (
+          <Text fontFamily="mono" fontSize="xs">
+            {uri}
+          </Text>
+        ) : (
+          <>
+            <FormControl>
+              <FormLabel>Device label</FormLabel>
+              <Input
+                fontFamily="mono"
+                value={label}
+                onChange={e => setLabel(e.target.value)}
+              />
+              <FormHelperText>
+                What shall we call the new device?
+              </FormHelperText>
+            </FormControl>
+            <Button type="submit" onClick={enroll}>
+              Enroll new device
+            </Button>
+          </>
+        )}
+      </Stack>
+    </>
+  )
+}
+
+export default EnrollDevicePage

examples/fullstack/contact-forms/src/pages/login.tsx

@@ -1,10 +1,12 @@
 import {
   Button,
+  Divider,
   FormControl,
   FormLabel,
   Heading,
   Input,
   Stack,
+  Text,
 } from '@chakra-ui/react'
 import { useE2ESDKClient } from '@socialgouv/e2esdk-react'
 import type { NextPage } from 'next'
@@ -13,13 +15,22 @@ import React from 'react'
 
 const LoginPage: NextPage = () => {
   const [userId, setUserId] = React.useState('')
-  const [mainKey, setMainKey] = React.useState('')
+  const [deviceRegistrationURI, setDeviceRegistrationURI] = React.useState('')
   const router = useRouter()
   const client = useE2ESDKClient()
   const login = React.useCallback(async () => {
-    await client.login(userId, client.decode(mainKey))
+    if (deviceRegistrationURI) {
+      const identity = await client.registerEnrolledDevice(
+        deviceRegistrationURI
+      )
+      if (!identity) {
+        throw new Error('Failed to login')
+      }
+    } else {
+      await client.login(userId)
+    }
     await router.push('/app/contact-forms')
-  }, [userId, mainKey, client, router])
+  }, [userId, deviceRegistrationURI, client, router])
 
   return (
     <>
@@ -33,15 +44,16 @@ const LoginPage: NextPage = () => {
             onChange={e => setUserId(e.target.value)}
           />
         </FormControl>
+        <Text>---- OR ----</Text>
         <FormControl>
-          <FormLabel>Main Key</FormLabel>
+          <FormLabel>Device registration URI</FormLabel>
           <Input
-            value={mainKey}
-            onChange={e => setMainKey(e.target.value)}
-            type="password"
-            pattern="[\w-]{43}"
+            fontFamily="mono"
+            value={deviceRegistrationURI}
+            onChange={e => setDeviceRegistrationURI(e.target.value)}
           />
         </FormControl>
+        <Divider />
         <Button type="submit" onClick={login}>
           Log in
         </Button>

examples/fullstack/contact-forms/src/pages/signup.tsx

@@ -0,0 +1,43 @@
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Stack,
+} from '@chakra-ui/react'
+import { useE2ESDKClient } from '@socialgouv/e2esdk-react'
+import type { NextPage } from 'next'
+import { useRouter } from 'next/router'
+import React from 'react'
+
+const SignupPage: NextPage = () => {
+  const [userId, setUserId] = React.useState('')
+  const router = useRouter()
+  const client = useE2ESDKClient()
+  const signup = React.useCallback(async () => {
+    await client.signup(userId)
+    await router.push('/app/contact-forms')
+  }, [userId, client, router])
+
+  return (
+    <>
+      <Heading as="h1">Sign up</Heading>
+      <Stack spacing={4} mt={8}>
+        <FormControl>
+          <FormLabel>User ID</FormLabel>
+          <Input
+            fontFamily="mono"
+            value={userId}
+            onChange={e => setUserId(e.target.value)}
+          />
+        </FormControl>
+        <Button type="submit" onClick={signup}>
+          Sign up
+        </Button>
+      </Stack>
+    </>
+  )
+}
+
+export default SignupPage