Update Hydra UI

package.json

@@ -17,10 +17,9 @@
     "format:check": "prettier --check ${npm_package_config_prettierTarget}"
   },
   "dependencies": {
-    "@oryd/hydra-client": "1.9.0-alpha.2",
-    "@types/cookie-parser": "^1.4.2",
+    "@ory/hydra-client": "file:../sdk/clients/hydra/typescript",
     "@types/csurf": "^1.9.36",
-    "@types/express": "^4.17.7",
+    "@types/express": "^4.17.13",
     "@types/morgan": "^1.9.1",
     "@types/url-join": "^4.0.0",
     "body-parser": "^1.19.0",
@@ -37,6 +36,7 @@
     "url-join": "^4.0.1"
   },
   "devDependencies": {
+    "@types/cookie-parser": "^1.4.3",
     "npm-run-all": "^4.1.5",
     "ory-prettier-styles": "1.1.1",
     "prettier": "2.2.1",

src/app.ts

@@ -2,7 +2,6 @@ import express, { NextFunction, Response, Request } from 'express'
 import path from 'path'
 import logger from 'morgan'
 import cookieParser from 'cookie-parser'
-import bodyParser from 'body-parser'
 
 import routes from './routes'
 import login from './routes/login'
@@ -16,11 +15,10 @@ const app = express()
 app.set('views', path.join(__dirname, '..', 'views'))
 app.set('view engine', 'pug')
 
-// uncomment after placing your favicon in /public
-//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
+app.get('/favicon.ico', (req, res) => res.status(204))
 app.use(logger('dev'))
-app.use(bodyParser.json())
-app.use(bodyParser.urlencoded({ extended: false }))
+app.use(express.json())
+app.use(express.urlencoded({ extended: false }))
 app.use(cookieParser())
 app.use(express.static(path.join(__dirname, 'public')))
 

src/config.ts

@@ -1,4 +1,4 @@
-import { AdminApi, Configuration } from '@oryd/hydra-client'
+import { AdminApi, Configuration } from '@ory/hydra-client'
 
 const baseOptions: any = {}
 

src/routes/consent.ts

@@ -4,7 +4,7 @@ import urljoin from 'url-join'
 import csrf from 'csurf'
 import { hydraAdmin } from '../config'
 import { oidcConformityMaybeFakeSession } from './stub/oidc-cert'
-import { ConsentRequestSession } from '@oryd/hydra-client'
+import { ConsentRequestSession } from '@ory/hydra-client'
 
 // Sets up csrf protection
 const csrfProtection = csrf({ cookie: true })

src/routes/device.ts

@@ -11,23 +11,51 @@ router.get('/', csrfProtection, (req, res, next) => {
   // Parses the URL query
   const query = url.parse(req.url, true).query
 
-  res.render('device', {
-    csrfToken: req.csrfToken()
-  })
+  // The challenge is used to fetch information about the login request from ORY Hydra.
+  const challenge = String(query.device_challenge)
+  if (!challenge) {
+    next(new Error('Expected a login challenge to be set but received none.'))
+    return
+  }
+
+  // Parses the URL query
+  const userCode = String(query.user_code)
+
+  hydraAdmin
+    .getDeviceRequest(challenge)
+    // This will be called if the HTTP request was successful
+    .then(({ data: deviceRequest }) => {
+      // All we need to do now is to redirect the user back to hydra!
+      console.log(deviceRequest)
+      res.render('device', {
+        csrfToken: req.csrfToken(),
+        challenge,
+        userCode
+      })
+    })
+    // This will handle any error that happens when making HTTP calls to hydra
+    .catch(next)
 })
 
 router.post('/', csrfProtection, (req, res, next) => {
   // The code is a input field, so let's take it from the request body
-  const code = req.body.code as string
+  const { code: userCode, challenge } = req.body
 
+  console.log(`In post: ${challenge} | ${userCode}`)
   hydraAdmin
-    .verifyDeviceRequest({
-      user_code: code
-    })
+    .getDeviceRequest(challenge)
     // This will be called if the HTTP request was successful
-    .then(({ data: body }) => {
+    .then(({ data: deviceRequest }) => {
+      console.log(deviceRequest)
       // All we need to do now is to redirect the user back to hydra!
-      res.redirect(String(body.redirect_to))
+      hydraAdmin
+        .verifyDeviceRequest(challenge, {
+          user_code: userCode
+        })
+        .then(({ data: body }) => {
+          // All we need to do now is to redirect the user back to hydra!
+          res.redirect(String(body.redirect_to))
+        })
     })
     // This will handle any error that happens when making HTTP calls to hydra
     .catch(next)

src/routes/stub/oidc-cert.ts

@@ -6,7 +6,7 @@ import {
   ConsentRequest,
   ConsentRequestSession,
   LoginRequest
-} from '@oryd/hydra-client'
+} from '@ory/hydra-client'
 
 export const oidcConformityMaybeFakeAcr = (
   request: LoginRequest,

views/device.pug

@@ -7,6 +7,7 @@ block content
             #{error}
     form(action=action, method="POST")
         input(type="hidden", name="_csrf", value=csrfToken)
-        input(type="code", id="code", name="code", value=hint, placeholder="XXXXXX")
+        input(type="hidden", name="challenge", value=challenge)
+        input(type="code", id="code", name="code", value=userCode, placeholder="XXXXXX")
         br
         input(type="submit", id="verify", name="submit", value="Send")