Support for same-device flow

Signed-off-by: Felix Hoops <9974641+jfelixh@users.noreply.github.com>

README.md

@@ -3,17 +3,14 @@
 ![jest workflow](https://github.com/GAIA-X4PLC-AAD/ssi-to-oidc-bridge/actions/workflows/node.js.yml/badge.svg)
 ![playwright workflow](https://github.com/GAIA-X4PLC-AAD/ssi-to-oidc-bridge/actions/workflows/playwright.yml/badge.svg)
 
-> [!WARNING]
-> This repository is intended for prototyping and as a reference
+> [!WARNING] This repository is intended for prototyping and as a reference
 > implementation. At this time, no security guarantees can be given.
 
-> [!NOTE]
-> A preprint of our paper providing more background information is
+> [!NOTE] A preprint of our paper providing more background information is
 > available [on arXiv](https://arxiv.org/abs/2401.09488). While it is slightly
 > outdated now, it provides a good introduction.
 
-> [!NOTE]
-> This software artifact was originally intended to support only Gaia-X
+> [!NOTE] This software artifact was originally intended to support only Gaia-X
 > Participant Credentials. It has since evolved to be fully configurable for
 > almost any Verifiable Credential, almost any wallet application, and almost
 > any current OIDC client.
@@ -151,8 +148,7 @@ prototyping an OIDC client service you are developing. Note that running a full
 deployment requires the same steps, but instead of using a tool like `ngrok`, a
 proper domain has to be set up.
 
-> [!IMPORTANT]
-> You need to use a tool like ngrok for testing so your smartphone
+> [!IMPORTANT] You need to use a tool like ngrok for testing so your smartphone
 > wallet can access the vclogin backend. However, it can lead to issues with
 > `application/x-www-form-urlencoded` request bodies used in the flow
 > (<https://ngrok.com/docs/ngrok-agent/changelog/#changes-in-22>). But you can
@@ -178,8 +174,7 @@ proper domain has to be set up.
 
 To validate the running bridge with a simple OIDC client:
 
-> [!NOTE]
-> You might run into a "Permisson denied" issue when running the shell
+> [!NOTE] You might run into a "Permisson denied" issue when running the shell
 > script `./test_client.sh`. You need to mark the file as executable using
 > `chmod +x ./test_client.sh`.
 
@@ -196,8 +191,7 @@ To validate the running bridge with a simple OIDC client:
 9. end up at `http://localhost:9010/callback` with metadata about the login
    being displayed
 
-> [!TIP]
-> If you want to understand what the wallet is doing in the exchange, go
+> [!TIP] If you want to understand what the wallet is doing in the exchange, go
 > to settings and toggle on "Developer Mode". After scanning a QR code, the
 > wallet will now give you the option to see or save the interaction data. If
 > you just want to continue the sign-in, tap "skip".

vclogin/package.json

@@ -30,6 +30,7 @@
     "pino-http": "^10.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "ua-parser-js": "^1.0.38",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -41,6 +42,7 @@
     "@types/node": "^18.15.13",
     "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
+    "@types/ua-parser-js": "^0.7.39",
     "@types/uuid": "^9.0.1",
     "@vitest/coverage-v8": "^1.6.0",
     "@wasm-tool/wasm-pack-plugin": "^1.7.0",

vclogin/pages/login.tsx

@@ -9,10 +9,14 @@ import { useQRCode } from "next-qrcode";
 import { useEffect } from "react";
 import { keyToDID } from "@spruceid/didkit-wasm-node";
 import { redisGet, redisSet } from "@/config/redis";
+import parser from "ua-parser-js";
 
 export default function Login(props: any) {
   const router = useRouter();
   const { Canvas } = useQRCode();
+  const uaparser = new parser.UAParser();
+  const agent = uaparser.getDevice();
+  const agentIsMobile = agent.type === "mobile" || agent.type === "tablet";
 
   const refreshData = () => {
     return router.replace(router.asPath);
@@ -51,22 +55,33 @@ export default function Login(props: any) {
         </div>
         <div className="flex flex-col bg-gxblue aspect-square w-full pb-14 px-14 rounded-b-3xl min-w-fit">
           <h2 className="text-white place-self-center">
-            Scan the code to sign in!
+            {!agentIsMobile
+              ? "Scan the code to sign in!"
+              : "Click the link to your wallet!"}
           </h2>
-          <div className="grid grid-cols-1 flex-grow place-items-center bg-white rounded-2xl aspect-square p-6 min-w-fit">
-            <Canvas
-              text={getWalletUrl()}
-              options={{
-                errorCorrectionLevel: "M",
-                margin: 3,
-                scale: 4,
-                width: 400,
-                color: {
-                  dark: "#000000FF",
-                  light: "#FFFFFFFF",
-                },
-              }}
-            />
+          <div className="grid grid-cols-1 flex-grow place-items-center bg-white rounded-2xl aspect-square p-4 min-w-fit">
+            {!agentIsMobile ? (
+              <Canvas
+                text={getWalletUrl()}
+                options={{
+                  errorCorrectionLevel: "M",
+                  margin: 3,
+                  scale: 3,
+                  width: 300,
+                  color: {
+                    dark: "#000000FF",
+                    light: "#FFFFFFFF",
+                  },
+                }}
+              />
+            ) : (
+              <a
+                href={getWalletUrl()}
+                className="text-gxblue text-2xl border-gxblue border-solid border-4 rounded-full p-4"
+              >
+                Authenticate
+              </a>
+            )}
           </div>
         </div>
         <div className="text-sm pt-2">