From 82507ddab666cfbc21fca8dd31f7efac16682ab3 Mon Sep 17 00:00:00 2001 From: Felix Hoops <9974641+jfelixh@users.noreply.github.com> Date: Thu, 27 Jun 2024 18:14:27 +0200 Subject: [PATCH] Support for same-device flow Signed-off-by: Felix Hoops <9974641+jfelixh@users.noreply.github.com> --- README.md | 18 ++++++---------- vclogin/package-lock.json | 30 ++++++++++++++++++++++++++ vclogin/package.json | 2 ++ vclogin/pages/login.tsx | 45 ++++++++++++++++++++++++++------------- 4 files changed, 68 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 69f865a..4b1c945 100644 --- a/README.md +++ b/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 > (). 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". diff --git a/vclogin/package-lock.json b/vclogin/package-lock.json index 8744380..a80c8f8 100644 --- a/vclogin/package-lock.json +++ b/vclogin/package-lock.json @@ -26,6 +26,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": { @@ -37,6 +38,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", @@ -1992,6 +1994,12 @@ "@types/node": "*" } }, + "node_modules/@types/ua-parser-js": { + "version": "0.7.39", + "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.39.tgz", + "integrity": "sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==", + "dev": true + }, "node_modules/@types/uuid": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz", @@ -9233,6 +9241,28 @@ "node": ">=12.20" } }, + "node_modules/ua-parser-js": { + "version": "1.0.38", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.38.tgz", + "integrity": "sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + }, + { + "type": "github", + "url": "https://github.com/sponsors/faisalman" + } + ], + "engines": { + "node": "*" + } + }, "node_modules/ufo": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz", diff --git a/vclogin/package.json b/vclogin/package.json index a522e70..18197a4 100644 --- a/vclogin/package.json +++ b/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", diff --git a/vclogin/pages/login.tsx b/vclogin/pages/login.tsx index 507867c..6ee5782 100644 --- a/vclogin/pages/login.tsx +++ b/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) {

- Scan the code to sign in! + {!agentIsMobile + ? "Scan the code to sign in!" + : "Click the link to your wallet!"}

-
- +
+ {!agentIsMobile ? ( + + ) : ( + + Authenticate + + )}