Add initial implementation of app login with qr code

RADAR-base · Sep 18, 2024 · 6e31c8d · 6e31c8d
1 parent 5c3b64f
commit 6e31c8d
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "next": "12.1.6",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-qr-code": "^2.0.15",
     "react-toastify": "^8.0.3",
     "styled-components": "^5.3.1",
     "typescript": "^4.4.2"

diff --git a/pages/apps.tsx b/pages/apps.tsx
@@ -0,0 +1,78 @@
+import {
+  SettingsFlow,
+  UiNode,
+  UiNodeInputAttributes,
+  UpdateSettingsFlowBody,
+} from "@ory/client"
+import { AxiosError } from "axios"
+import type { NextPage } from "next"
+import Head from "next/head"
+import Link from "next/link"
+import { useRouter } from "next/router"
+import { ReactNode, useEffect, useState } from "react"
+import QRCode from "react-qr-code"
+
+import { profileQuestions } from "../data/profile-questionnaire"
+import {
+  ActionCard,
+  CenterLink,
+  Flow,
+  Messages,
+  Methods,
+  CardTitle,
+  InnerCard,
+} from "../pkg"
+import { handleFlowError } from "../pkg/errors"
+import ory from "../pkg/sdk"
+import { H3 } from "@ory/themes"
+
+interface Props {
+  flow?: SettingsFlow
+  only?: Methods
+}
+
+function ProfileCard({ children }: Props & { children: ReactNode }) {
+  return (
+    <ActionCard wide className="cardMargin">
+      {children}
+    </ActionCard>
+  )
+}
+
+const Apps: NextPage = () => {
+  const [flow, setFlow] = useState<SettingsFlow>()
+
+  // Get ?flow=... from the URL
+  const router = useRouter()
+  const DefaultHydraUrl = "http://localhost:4444"
+
+  useEffect(() => {
+    // If the router is not ready yet, or we already have a flow, do nothing.
+    if (!router.isReady) {
+      return
+    }
+  }, [])
+
+  return (
+    <>
+      <Head>
+        <title>App Login</title>
+        <meta name="description" content="NextJS + React + Vercel + Ory" />
+      </Head>
+      <ProfileCard>
+        <CardTitle>App Login</CardTitle>
+        <div className="center">
+          <p>Scan the QR code below with your app.</p>
+          <QRCode value={DefaultHydraUrl} size={140} />
+        </div>
+      </ProfileCard>
+      <ActionCard wide>
+        <Link href="/" passHref>
+          <CenterLink>Go back</CenterLink>
+        </Link>
+      </ActionCard>
+    </>
+  )
+}
+
+export default Apps
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -99,6 +99,12 @@ const Home: NextPage = () => {
                   title="Study Consent"
                   disabled={!hasSession}
                 />
+                <DocsButton
+                  testid="apps"
+                  href="/apps"
+                  title="Apps"
+                  disabled={!hasSession}
+                />
                 <DocsButton
                   testid="profile"
                   href="/profile"