Implement websocket example

Author: garronej

package.json

@@ -22,6 +22,7 @@
     ],
     "dependencies": {
         "@hono/node-server": "^1.11.1",
+        "@hono/node-ws": "^1.0.3",
         "@hono/zod-openapi": "^0.13.0",
         "hono": "^4.11.1",
         "oidc-spa": "^8.7.10",

src/auth.ts

@@ -3,33 +3,59 @@ import { z } from "zod";
 import { HTTPException } from "hono/http-exception";
 import type { HonoRequest } from "hono";
 
-const { bootstrapAuth, validateAndDecodeAccessToken } = oidcSpa
+const { bootstrapAuth, validateAndDecodeAccessToken, ofTypeDecodedAccessToken } = oidcSpa
     .withExpectedDecodedAccessTokenShape({
         decodedAccessTokenSchema: z.object({
             sub: z.string(),
-            realm_access: z.object({
-                roles: z.array(z.string())
-            }).optional()
+            name: z.string(),
+            email: z.string().optional(),
+            realm_access: z
+                .object({
+                    roles: z.array(z.string())
+                })
+                .optional()
         })
     })
     .createUtils();
 
 export { bootstrapAuth };
 
+type DecodedAccessToken = typeof ofTypeDecodedAccessToken;
+
 export type User = {
     id: string;
+    name: string;
+    email: string | undefined;
 };
 
-export async function getUser(
-    req: HonoRequest,
-    requiredRole?: "realm-admin" | "support-staff"
+async function decodedAccessTokenToUser(
+    decodedAccessToken: DecodedAccessToken
 ): Promise<User> {
+    const { sub, name, email } = decodedAccessToken;
+
+    // Potentially fetch additional data that represent your user.
+
+    const user: User = {
+        id: sub,
+        name,
+        email
+    };
+
+    return user;
+}
+
+export async function getUser(params: {
+    req: HonoRequest;
+    requiredRole?: "realm-admin" | "support-staff";
+}): Promise<User> {
+    const { req, requiredRole } = params;
+
     const requestAuthContext = extractRequestAuthContext({
         request: req,
         trustProxy: true
     });
 
-    if( !requestAuthContext ){
+    if (!requestAuthContext) {
         // Demo shortcut: we return 401 on missing Authorization, but a mixed
         // public/private endpoint could instead return undefined here and let
         // the caller decide whether to process an anonymous request.
@@ -61,9 +87,55 @@ export async function getUser(
         }
     }
 
-    const user: User = {
-        id: decodedAccessToken.sub
-    };
+    const user = await decodedAccessTokenToUser(decodedAccessToken);
 
     return user;
 }
+
+export async function getUser_ws(params: { req: HonoRequest }) {
+    const { req } = params;
+
+    const value = req.header("Sec-WebSocket-Protocol");
+
+    if (value === undefined) {
+        throw new HTTPException(400); // Bad Request
+    }
+
+    const accessToken = value
+        .split(",")
+        .map(p => p.trim())
+        .map(p => {
+            const match = p.match(/^authorization_bearer_(.+)$/);
+
+            if (match === null) {
+                return undefined;
+            }
+
+            return match[1];
+        })
+        .filter(t => t !== undefined)[0];
+
+    if (accessToken === undefined) {
+        throw new HTTPException(400); // Bad Request
+    }
+
+    const { isSuccess, debugErrorMessage, decodedAccessToken } =
+        await validateAndDecodeAccessToken({
+            scheme: "Bearer",
+            accessToken,
+            // NOTE: The DPoP protocol does not cover WebSocket Upgrade request.
+            // We chose to accept tokens even if the proof isn't provided.
+            rejectIfAccessTokenDPoPBound: false
+        });
+
+    if (!isSuccess) {
+        console.warn(debugErrorMessage);
+        throw new HTTPException(401); // Unauthorized
+    }
+
+    const user = await decodedAccessTokenToUser(decodedAccessToken);
+
+    return user;
+}
+
+

src/main.ts

@@ -1,12 +1,12 @@
 import { z, createRoute, OpenAPIHono } from "@hono/zod-openapi";
 import { serve } from "@hono/node-server";
+import { createNodeWebSocket } from "@hono/node-ws";
 import { getUserTodoStore } from "./todo";
 import { cors } from "hono/cors";
 import { assert } from "tsafe/assert";
-import { getUser, bootstrapAuth } from "./auth";
+import { bootstrapAuth,  getUser, getUser_ws } from "./auth";
 
 (async function main() {
-
     const issuerUri = (() => {
         const value = process.env.OIDC_ISSUER_URI;
 
@@ -33,6 +33,25 @@ import { getUser, bootstrapAuth } from "./auth";
 
     app.use("*", cors());
 
+    const { injectWebSocket, upgradeWebSocket } = createNodeWebSocket({ app });
+
+    app.get(
+        "/ws",
+        upgradeWebSocket(async c => {
+
+            const user = await getUser_ws({ req: c.req });
+
+            return {
+                onOpen: (_event, ws) => {
+                    ws.send(`Hello ${user.name}`);
+                },
+                onMessage(event, ws) {
+                    ws.send(`I'm not very smart, all I can do is repeat what you say: "${event.data}"`);
+                }
+            };
+        })
+    );
+
     {
         const route = createRoute({
             method: "put",
@@ -88,8 +107,7 @@ import { getUser, bootstrapAuth } from "./auth";
         });
 
         app.openapi(route, async c => {
-
-            const user = await getUser(c.req);
+            const user = await getUser({ req: c.req });
 
             const { id } = c.req.valid("param");
             const { text, isDone } = c.req.valid("json");
@@ -158,7 +176,7 @@ import { getUser, bootstrapAuth } from "./auth";
         });
 
         app.openapi(route, async c => {
-            const user = await getUser(c.req);
+            const user = await getUser({ req: c.req });
 
             const { text } = c.req.valid("json");
 
@@ -207,7 +225,7 @@ import { getUser, bootstrapAuth } from "./auth";
         });
 
         app.openapi(route, async c => {
-            const user = await getUser(c.req);
+            const user = await getUser({ req: c.req });
 
             const todos = getUserTodoStore(user.id).getAll();
 
@@ -241,8 +259,8 @@ import { getUser, bootstrapAuth } from "./auth";
         });
 
         app.openapi(route, async c => {
-            const user = await getUser(c.req);
-            
+            const user = await getUser({ req: c.req });
+
             const { id } = c.req.valid("param");
 
             getUserTodoStore(user.id).remove(id);
@@ -269,11 +287,13 @@ import { getUser, bootstrapAuth } from "./auth";
 
     const port = parseInt(process.env.PORT);
 
-    serve({
+    const server = serve({
         fetch: app.fetch,
         port
     });
 
+    injectWebSocket(server);
+
     console.log(
         `\nServer running. OpenAPI documentation available at http://localhost:${port}/doc`
     );

yarn.lock

@@ -134,6 +134,13 @@
   resolved "https://registry.yarnpkg.com/@hono/node-server/-/node-server-1.11.1.tgz#f4c7bea7f3d52760b1950d6b8aeb900cc59142d3"
   integrity sha512-GW1Iomhmm1o4Z+X57xGby8A35Cu9UZLL7pSMdqDBkD99U5cywff8F+8hLk5aBTzNubnsFAvWQ/fZjNwPsEn9lA==
 
+"@hono/node-ws@^1.0.3":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@hono/node-ws/-/node-ws-1.2.0.tgz#93041d045a92aebc0e6e5b98d263ff32d37312cd"
+  integrity sha512-OBPQ8OSHBw29mj00wT/xGYtB6HY54j0fNSdVZ7gZM3TUeq0So11GXaWtFf1xWxQNfumKIsj0wRuLKWfVsO5GgQ==
+  dependencies:
+    ws "^8.17.0"
+
 "@hono/zod-openapi@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@hono/zod-openapi/-/zod-openapi-0.13.0.tgz#6b9640529d7399302dad17ee8ce5d20d5937eab0"
@@ -316,6 +323,11 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+ws@^8.17.0:
+  version "8.18.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.3.tgz#b56b88abffde62791c639170400c93dcb0c95472"
+  integrity sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==
+
 yaml@^2.4.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.2.tgz#7a2b30f2243a5fc299e1f14ca58d475ed4bc5362"