Remix example

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "cSpell.words": [
+        "hanko",
+        "teamhanko",
+        "Todos"
+    ]
+}

deploy/docker-compose/todo-remix.yaml

@@ -0,0 +1,19 @@
+services:
+  todo-backend:
+    build: ../../examples/express
+    environment:
+      - HANKO_API_URL=http://hanko:8000
+    networks:
+      - intranet
+
+  todo-frontend:
+    build: ../../examples/remix
+    environment:
+      - PORT=8888
+      - REMIX_APP_HANKO_API=http://localhost:8000
+      - REMIX_APP_TODO_API=http://todo-backend:8002
+    ports:
+      - "8888:8888"
+      - "8008:8008"
+    networks:
+      - intranet

examples/README.md

@@ -2,44 +2,66 @@
 
 This directory contains examples that show
 
-- integration of web component(s) provided through the`@teamhanko/hanko-elements` package (see [elements](../frontend/elements)).
-- how to validate JSON Web Tokens (JWT) issued by the Hanko [API](../backend) in a custom backend
+- integration of web component(s) provided through the`@teamhanko/hanko-elements` package
+  (see [elements](../frontend/elements)).
+- how to validate JSON Web Tokens (JWT) issued by the Hanko [API](../backend) in a custom
+  backend
 
 It contains:
 
-- an example [express](express) backend - this is a simple version of the well-known todo app
+- an example [express](express) backend - this is a simple version of the well-known todo
+  app
 - example frontend applications using the following frameworks:
   - [Angular](angular)
   - [Next.js](nextjs)
   - [React](react)
   - [Vue](vue)
   - [Svelte](svelte)
+  - [Remix](remix)
 
 ## How to run
+
 ### Manual
-1. Start the Hanko API (see the instructions on how to run the API [in Docker](../backend/README.md#Docker) or [from Source](../backend/README.md#from-source))
+
+1. Start the Hanko API (see the instructions on how to run the API [in
+   Docker](../backend/README.md#Docker) or [from Source](../backend/README.md#from-source))
 2. Start the express backend (see the [README](express) for the express backend)
 3. Start one of the frontend applications (see the README for the app of your choice)
 
 ### Docker Compose
 
 #### React
-```
+
+```bash
 docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-react.yaml -p "hanko-todo-react" up --build
 ```
+
 #### Angular
-```
+
+```bash
 docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-angular.yaml -p "hanko-todo-angular" up --build
 ```
+
 #### Next.js
-```
+
+```bash
 docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-nextjs.yaml -p "hanko-todo-nextjs" up --build
 ```
+
 #### Vue
-```
+
+```bash
 docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-vue.yaml -p "hanko-todo-vue" up --build
 ```
+
 #### Svelte
-```
+
+```bash
 docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-svelte.yaml -p "hanko-todo-svelte" up --build
 ```
+
+#### Remix
+
+```bash
+docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-remix.yaml -p "hanko-todo-remix" up --build
+```

examples/remix/.env

@@ -0,0 +1,2 @@
+REMIX_APP_HANKO_API=http://localhost:8000
+REMIX_APP_TODO_API=http://localhost:8002

examples/remix/.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};

examples/remix/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+/public/build

examples/remix/Dockerfile

@@ -0,0 +1,21 @@
+# pull official base image
+FROM node:16-alpine
+
+# set working directory
+WORKDIR /app
+
+# add `/app/node_modules/.bin` to $PATH
+ENV PATH /app/node_modules/.bin:$PATH
+
+# install app dependencies
+COPY package.json ./
+COPY package-lock.json ./
+RUN npm install
+
+# add app
+COPY . ./
+
+RUN npm run build
+
+# start app
+CMD ["npm", "run", "start"]

examples/remix/README.md

@@ -0,0 +1,27 @@
+# Hanko Remix example
+
+This is a [Remix](https://remix.run) project bootstrapped with [Create Remix
+App](https://www.npmjs.com/package/create-remix).
+
+## Starting the app
+
+### Prerequisites
+
+- a running Hanko API (see the instructions on how to run the API [in
+  Docker](../backend/README.md#Docker) or [from Source](../backend/README.md#from-source))
+- a running express backend (see the [README](../express) for the express backend)
+
+### Set up environment variables
+
+In the `.env` file set up the correct environment variables:
+
+- `REMIX_APP_HANKO_API`: this is the URL of the Hanko API (default:
+  `http://localhost:8000`, can be customized using the `server.public.address` option in
+  the [configuration file](../../backend/docs/Config.md))
+- `REMIX_APP_TODO_API`: this is the URL of the [express](../express) backend (default:
+  `http://localhost:8002`)
+
+### Run development server
+
+The entire process is automated with docker. You can find the instructions in the
+[examples/README.md](../README.md#remix) file.

examples/remix/app/entry.client.tsx

@@ -0,0 +1,22 @@
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document.getElementById('root')!,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>
+    );
+  });
+}
+
+if (window.requestIdleCallback) {
+  window.requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  window.setTimeout(hydrate, 1);
+}

examples/remix/app/entry.server.tsx

@@ -0,0 +1,118 @@
+import { PassThrough } from "stream";
+import type { EntryContext } from "@remix-run/node";
+import { Response } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import isbot from "isbot";
+import { renderToPipeableStream } from "react-dom/server";
+import { renderHeadToString } from 'remix-island';
+import { Head } from './root';
+
+const ABORT_DELAY = 5000;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return isbot(request.headers.get("user-agent"))
+    ? handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      )
+    : handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      );
+}
+
+function handleBotRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return new Promise((resolve, reject) => {
+    let didError = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onAllReady() {
+          const head = renderHeadToString({request, remixContext, Head});
+          const body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+          body.write(`<!DOCTYPE html><html><head>${head}</head><body><div id="root">`);
+          pipe(body);
+          body.write(`</div></body></html>`);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
+
+function handleBrowserRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return new Promise((resolve, reject) => {
+    let didError = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onShellReady() {
+          const head = renderHeadToString({ request, remixContext, Head });
+          const body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+
+          body.write(`<!DOCTYPE html><html><head>${head}</head><body><div id="root">`);
+          pipe(body);
+          body.write(`</div></body></html>`);
+        },
+        onShellError(err: unknown) {
+          reject(err);
+        },
+        onError(error: unknown) {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}

examples/remix/app/lib/auth.server.ts

@@ -0,0 +1,20 @@
+import { redirect } from '@remix-run/server-runtime';
+import { parse } from 'cookie';
+import type { JwtPayload } from 'jsonwebtoken';
+import { decode } from 'jsonwebtoken';
+
+export const extractHankoCookie = (request: Request) => {
+    const cookies = parse(request.headers.get('Cookie') || '');
+    return cookies.hanko;
+};
+
+// ensures the user has a hanko cookie but does not check if it is valid
+export async function requireValidJwt(request: Request) {
+    const hankoCookie = extractHankoCookie(request);
+    const decoded = decode(hankoCookie) as JwtPayload;
+    const hankoId = decoded?.sub;
+    const exp = (decoded?.exp || 0) * 1000;
+    if (!hankoId || exp < Date.now())
+        throw redirect(`/`);
+    return decoded
+}

examples/remix/app/lib/hanko.client.ts

@@ -0,0 +1,6 @@
+// `.client.ts` files are only supposed to run on the client. I could not find this
+// documented on the remix docs but someone on the remix discord told me this is how it is
+// supposed to work.
+import { register } from '@teamhanko/hanko-elements';
+
+export { register as registerHankoAuth };