From 3cfbf06686bc8aa062c1f67147496123416f7881 Mon Sep 17 00:00:00 2001 From: Roy Scheeren Date: Thu, 22 Feb 2024 15:23:22 +0100 Subject: [PATCH 1/3] feat(oidc-client): wip Signed-off-by: Roy Scheeren --- apps/oidc-client/src/App.tsx | 37 ++++++++++++++++++++++------- apps/oidc-client/src/utils/index.ts | 1 + apps/oidc-client/src/utils/utils.ts | 13 ++++++++++ package-lock.json | 29 ++++++++++++++++++---- package.json | 1 + 5 files changed, 69 insertions(+), 12 deletions(-) create mode 100644 apps/oidc-client/src/utils/index.ts create mode 100644 apps/oidc-client/src/utils/utils.ts diff --git a/apps/oidc-client/src/App.tsx b/apps/oidc-client/src/App.tsx index c6e7595c..0a1c1753 100644 --- a/apps/oidc-client/src/App.tsx +++ b/apps/oidc-client/src/App.tsx @@ -1,6 +1,24 @@ +import { useState } from 'react' +import ReactQRCode from 'react-qr-code' + import styles from './App.module.css' +import { getOpenIdConnectUrl } from './utils' + +const QRCode = ReactQRCode as any function App() { + const urlSearchParams = new URLSearchParams(window.location.search) + const [error, setError] = useState(null) + const [qrCodeValue, setQrCodeValue] = useState(null) + + try { + const url = getOpenIdConnectUrl(urlSearchParams) + setQrCodeValue(url) + } catch (e: any) { + setQrCodeValue(null) + setError(e.message) + } + return (
@@ -12,14 +30,17 @@ function App() {

Sign in with your verified credentials to continue to Envited Data Space

- -
- QR code -
-
-

Error

-

Something went wrong

-
+ {qrCodeValue && ( +
+ +
+ )} + {error && ( +
+

Error

+

{error}

+
+ )}
) diff --git a/apps/oidc-client/src/utils/index.ts b/apps/oidc-client/src/utils/index.ts new file mode 100644 index 00000000..93c76f23 --- /dev/null +++ b/apps/oidc-client/src/utils/index.ts @@ -0,0 +1 @@ +export { getOpenIdConnectUrl } from './utils' diff --git a/apps/oidc-client/src/utils/utils.ts b/apps/oidc-client/src/utils/utils.ts new file mode 100644 index 00000000..91f2b233 --- /dev/null +++ b/apps/oidc-client/src/utils/utils.ts @@ -0,0 +1,13 @@ +export const getOpenIdConnectUrl = (urlSearchParams: URLSearchParams) => { + const clientId = urlSearchParams.get('client_id') + const externalUrl = urlSearchParams.get('external_url') + const loginId = urlSearchParams.get('login_id') + + if (!clientId || !externalUrl || !loginId) { + throw new Error('Missing required parameters') + } + + return `openid-vc://?client_id=${clientId}&request_uri=${encodeURIComponent( + externalUrl + '/api/presentCredential?login_id=' + loginId, + )}` +} diff --git a/package-lock.json b/package-lock.json index 1519f751..c994313e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.50.1", + "react-qr-code": "^2.0.12", "react-toastify": "^10.0.4", "ts-pattern": "^5.0.6", "tslib": "^2.3.0", @@ -38765,7 +38766,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -40587,7 +40587,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -40597,8 +40596,7 @@ "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/proxy-addr": { "version": "2.0.7", @@ -40687,6 +40685,11 @@ "node": ">=6.0.0" } }, + "node_modules/qr.js": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", + "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==" + }, "node_modules/qs": { "version": "6.11.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz", @@ -40915,6 +40918,24 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, + "node_modules/react-qr-code": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.12.tgz", + "integrity": "sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==", + "dependencies": { + "prop-types": "^15.8.1", + "qr.js": "0.0.0" + }, + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x", + "react-native-svg": "*" + }, + "peerDependenciesMeta": { + "react-native-svg": { + "optional": true + } + } + }, "node_modules/react-reconciler": { "version": "0.29.0", "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz", diff --git a/package.json b/package.json index 886118f9..cdc71c4e 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.50.1", + "react-qr-code": "^2.0.12", "react-toastify": "^10.0.4", "ts-pattern": "^5.0.6", "tslib": "^2.3.0", From 0784b87456b07a6267f8b0e8365df234aea98138 Mon Sep 17 00:00:00 2001 From: Roy Scheeren Date: Mon, 26 Feb 2024 11:00:46 +0100 Subject: [PATCH 2/3] feat(oidc-client): add qr code Signed-off-by: Roy Scheeren --- apps/oidc-client/src/App.module.css | 2 +- apps/oidc-client/src/utils/utils.test.ts | 30 ++++++++++++++++++++++++ apps/oidc-client/vite.config.ts | 1 - 3 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 apps/oidc-client/src/utils/utils.test.ts diff --git a/apps/oidc-client/src/App.module.css b/apps/oidc-client/src/App.module.css index eb43804a..e9c8a525 100644 --- a/apps/oidc-client/src/App.module.css +++ b/apps/oidc-client/src/App.module.css @@ -47,7 +47,7 @@ p { align-items: center; margin-top: 1rem; background-color: #ffffff; - padding: 1rem; + padding: 2rem 1rem; width: 100%; max-width: 20rem; } diff --git a/apps/oidc-client/src/utils/utils.test.ts b/apps/oidc-client/src/utils/utils.test.ts new file mode 100644 index 00000000..8a83b07f --- /dev/null +++ b/apps/oidc-client/src/utils/utils.test.ts @@ -0,0 +1,30 @@ +import * as SUT from './utils' + +describe('src/utils', () => { + describe('getOpenIdConnectUrl', () => { + it('should get the open id connect url as expected', () => { + // when ... we want to get the open id connect url from the url search params + // then ... it should get the url as expected + const params = new URLSearchParams() + params.set('client_id', 'CLIENT_ID') + params.set('external_url', 'EXTERNAL_URL') + params.set('login_id', 'LOGIN_ID') + + const result = SUT.getOpenIdConnectUrl(params) + + expect(result).toEqual('openid-vc://?client_id=CLIENT_ID&request_uri=EXTERNAL_URL%2Fapi%2FpresentCredential%3Flogin_id%3DLOGIN_ID') + }) + + it('should throw an error when not all url params are set', () => { + // when ... we want to get the open id connect url from the url search params + // then ... it should get the url as expected + const params = new URLSearchParams() + params.set('client_id', 'CLIENT_ID') + params.set('external_url', 'EXTERNAL_URL') + + const result = () => SUT.getOpenIdConnectUrl(params) + + expect(result).toThrowError('Missing required parameters') + }) + }) +}) diff --git a/apps/oidc-client/vite.config.ts b/apps/oidc-client/vite.config.ts index 725f1ee4..93b71d92 100644 --- a/apps/oidc-client/vite.config.ts +++ b/apps/oidc-client/vite.config.ts @@ -3,7 +3,6 @@ import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin' import preact from '@preact/preset-vite' import { defineConfig, searchForWorkspaceRoot } from 'vite' -console.log(searchForWorkspaceRoot(process.cwd())) export default defineConfig({ cacheDir: '../../node_modules/.vite/oidc-client', From 813608a04b2db2972c88ef89912e485de21f1548 Mon Sep 17 00:00:00 2001 From: Roy Scheeren Date: Mon, 26 Feb 2024 11:00:53 +0100 Subject: [PATCH 3/3] feat(oidc-client): add qr code Signed-off-by: Roy Scheeren --- apps/oidc-client/src/utils/utils.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/oidc-client/src/utils/utils.test.ts b/apps/oidc-client/src/utils/utils.test.ts index 8a83b07f..cacac80e 100644 --- a/apps/oidc-client/src/utils/utils.test.ts +++ b/apps/oidc-client/src/utils/utils.test.ts @@ -12,7 +12,9 @@ describe('src/utils', () => { const result = SUT.getOpenIdConnectUrl(params) - expect(result).toEqual('openid-vc://?client_id=CLIENT_ID&request_uri=EXTERNAL_URL%2Fapi%2FpresentCredential%3Flogin_id%3DLOGIN_ID') + expect(result).toEqual( + 'openid-vc://?client_id=CLIENT_ID&request_uri=EXTERNAL_URL%2Fapi%2FpresentCredential%3Flogin_id%3DLOGIN_ID', + ) }) it('should throw an error when not all url params are set', () => {