90 add qr code component (#115)

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;
 }

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<string | null>(null)
+  const [qrCodeValue, setQrCodeValue] = useState<string | null>(null)
+
+  try {
+    const url = getOpenIdConnectUrl(urlSearchParams)
+    setQrCodeValue(url)
+  } catch (e: any) {
+    setQrCodeValue(null)
+    setError(e.message)
+  }
+
   return (
     <div class={styles.App}>
       <header class={styles.header}>
@@ -12,14 +30,17 @@ function App() {
         <p>
           Sign in with your verified credentials to continue to <strong>Envited Data Space</strong>
         </p>
-
-        <div class={`${styles.qrCodeContainer} ${styles.shadow}`}>
-          <img src="/qrcode.png" alt="QR code" />
-        </div>
-        <div class={styles.error}>
-          <h3 class={styles.errorTitle}>Error</h3>
-          <p>Something went wrong</p>
-        </div>
+        {qrCodeValue && (
+          <div class={`${styles.qrCodeContainer} ${styles.shadow}`}>
+            <QRCode value={qrCodeValue} />
+          </div>
+        )}
+        {error && (
+          <div class={styles.error}>
+            <h3 class={styles.errorTitle}>Error</h3>
+            <p>{error}</p>
+          </div>
+        )}
       </main>
     </div>
   )

apps/oidc-client/src/utils/index.ts

@@ -0,0 +1 @@
+export { getOpenIdConnectUrl } from './utils'

apps/oidc-client/src/utils/utils.test.ts

@@ -0,0 +1,32 @@
+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')
+    })
+  })
+})

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,
+  )}`
+}

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',
 

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",