Rough implementation of OpenID Connect. (#1135)

* Rough implementation of OpenID Connect.

* Implement refresh token for OIDC.

* Use child class for tokens to override parsing implementations.

* Override token URL to use the backend API.

* feat: implement middleware system & basic middlewares

---------

Co-authored-by: Christopher Debove <christopher@checkmarble.com>

Author: apognu

bun.lock

@@ -78,6 +78,7 @@
     "@tanstack/react-query-devtools": "5.83.1",
     "@tanstack/react-table": "^8.21.2",
     "@tanstack/react-virtual": "3.13.12",
+    "arctic": "^3.7.0",
     "autosuggest-highlight": "^3.3.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -111,6 +112,8 @@
     "react-i18next": "^15.4.1",
     "reactflow": "^11.11.4",
     "remeda": "^2.21.2",
+    "remix-auth-oauth2": "^3.4.1",
+    "remix-auth-openid": "^0.3.0",
     "remix-i18next": "^6.4.1",
     "remix-utils": "^7.7.0",
     "sharpstate": "^0.0.13",

packages/app-builder/package.json

@@ -0,0 +1,3 @@
+export interface MiddlewareConfig {
+  GlobalMiddlewares: readonly [];
+}

packages/app-builder/src/core/middleware-config.ts

@@ -0,0 +1,95 @@
+export type Expand<T> = T extends object
+  ? T extends infer O
+    ? O extends Function
+      ? O
+      : {
+          [K in keyof O]: O[K];
+        }
+    : never
+  : T;
+
+export type DataReturnType<Data, TContext> = {
+  data: Data;
+  pushHeader: (name: string, value: string) => void;
+  __context: TContext;
+  __headers: HeaderEntry[];
+};
+
+export type HeaderEntry = [string, string];
+
+export type NextFunctionArgs<TContext = Record<string, unknown>> = {
+  context: TContext;
+  headers?: HeaderEntry[];
+};
+
+export type NextFunction = <TOutContext = {}>(
+  args?: NextFunctionArgs<TOutContext>,
+) => Promise<DataReturnType<any, TOutContext>>;
+
+export type ExitFunction = <TData, TOutContext>(
+  exitValue: TData | DataWithOptions<TData>,
+) => DataReturnType<TData, TOutContext>;
+
+export type DataFunctionArgs<TInContext> = {
+  request: Request;
+  params: Record<string, string>;
+  context: TInContext;
+};
+
+export type MiddlewareFunction<in out TInContext = any, TOutContext = any> = (
+  args: DataFunctionArgs<TInContext>,
+  next: NextFunction,
+  exit: ExitFunction,
+) => Promise<DataReturnType<any, TOutContext>>;
+
+export type MiddlewareObject<
+  TDependencies extends readonly MiddlewareObject[] = any,
+  TOutContext = any,
+> = {
+  deps: readonly [...TDependencies];
+  fn: MiddlewareFunction<Expand<MergeMiddlewareContext<TDependencies>>, TOutContext>;
+};
+
+export type MergeMiddlewareContext<T extends readonly MiddlewareObject[]> = T extends readonly [
+  infer M,
+]
+  ? M extends MiddlewareObject<any, infer TOutContext>
+    ? TOutContext
+    : never
+  : T extends readonly [infer M, ...infer R extends readonly MiddlewareObject[]]
+    ? M extends MiddlewareObject<any, infer TOutContext>
+      ? TOutContext & MergeMiddlewareContext<R>
+      : never
+    : {};
+
+export type ExecutionEnvironmentQueueItem = {
+  data: { context: any } | undefined;
+};
+
+export type ExecutionEnvironment = {
+  queue: Map<Function, ExecutionEnvironmentQueueItem>;
+  request: Request;
+  params: Record<string, string>;
+  context: Record<string, unknown>;
+};
+
+export type DataWithOptions<Data> = {
+  __dataObject: true;
+  data: Data;
+  headers?: HeaderEntry[];
+};
+
+export type ServerFnResult<Data> = Promise<Data | DataWithOptions<Data>>;
+
+export type ServerFunction<TContext, Data> = (
+  args: DataFunctionArgs<TContext>,
+) => ServerFnResult<Data>;
+
+export type RemixDataFunctionArgs = {
+  request: Request;
+  params: Record<string, string>;
+};
+
+export type TypedResponse<T = unknown> = T extends Response
+  ? T
+  : Omit<Response, 'json'> & { json(): Promise<T> };

packages/app-builder/src/core/middleware-types.ts

@@ -0,0 +1,129 @@
+import { afterEach, expect, test, vi } from 'vitest';
+import type { MiddlewareFunction, ServerFunction } from './middleware-types';
+import {
+  cleanGlobalMiddlewares,
+  createMiddleware,
+  createMiddlewareWithGlobalContext,
+  createServerFn,
+  setGlobalMiddlewares,
+} from './requests';
+
+afterEach(() => {
+  cleanGlobalMiddlewares();
+});
+
+test('server function should be called with the correct context', async () => {
+  const mfn = vi.fn().mockImplementation(async function m1(_, next) {
+    return next({ context: { foo: 'bar' } });
+  }) satisfies MiddlewareFunction<any, any>;
+  const m1 = createMiddleware([], mfn);
+
+  const sfn = vi.fn().mockImplementation(async function fn() {
+    return null;
+  }) satisfies ServerFunction<any, any>;
+  const s = createServerFn([m1], sfn);
+
+  const req = new Request('https://example.com');
+  const args = { request: req, params: {}, context: {} };
+  const res = await s(args);
+  const json = await res.json();
+
+  expect(json).toEqual(null);
+  expect(sfn).toHaveBeenCalledTimes(1);
+  expect(sfn).toHaveBeenCalledWith(expect.objectContaining({ context: { foo: 'bar' } }));
+});
+
+test('server function with 2 middlewares depending on same dep propagates context correctly', async () => {
+  const depFn = vi.fn().mockImplementation(async function dep({ context }, next) {
+    // This dependency sets base context.
+    return next({ context: { depValue: 'value-from-dep' } });
+  }) satisfies MiddlewareFunction<any, any>;
+  const dep = createMiddleware([], depFn);
+
+  // Middlewares that depend on 'dep'
+  const aFn = vi.fn().mockImplementation(async function a({ context }, next) {
+    // Expects depValue set by dependency
+    expect(context.depValue).toBe('value-from-dep');
+    return next({ context: { aPassed: true } });
+  }) satisfies MiddlewareFunction<any, any>;
+  const a = createMiddleware([dep], aFn);
+
+  const bFn = vi.fn().mockImplementation(async function b({ context }, next) {
+    // Expects depValue set by dependency
+    expect(context.depValue).toBe('value-from-dep');
+    return next({ context: { bPassed: true } });
+  }) satisfies MiddlewareFunction<any, any>;
+  const b = createMiddleware([dep], bFn);
+
+  const sFn = vi.fn<ServerFunction<any, any>>().mockImplementation(async function handler({
+    context,
+  }) {
+    // All context from previous middlewares must be present
+    expect(context).toEqual(
+      expect.objectContaining({
+        aPassed: true,
+        bPassed: true,
+      }),
+    );
+    return { ok: true, context };
+  });
+  const serverFn = createServerFn([a, b], sFn);
+
+  const req = new Request('https://example.com');
+  const args = { request: req, params: {}, context: {} };
+  const res = await serverFn(args);
+  const json = await res.json();
+
+  expect(json.ok).toBe(true);
+  expect(json.context).toEqual(
+    expect.objectContaining({
+      aPassed: true,
+      bPassed: true,
+    }),
+  );
+
+  // depFn called once per middleware (since both depend on it)
+  expect(depFn).toHaveBeenCalledTimes(1);
+  expect(aFn).toHaveBeenCalledTimes(1);
+  expect(bFn).toHaveBeenCalledTimes(1);
+  expect(sFn).toHaveBeenCalledTimes(1);
+});
+
+test('should propagate global middleware contexts correctly', async () => {
+  const gFn = vi.fn().mockImplementation(async function g(_, next) {
+    return next({ context: { gValue: 'value-from-global' } });
+  }) satisfies MiddlewareFunction<any, any>;
+  const g = createMiddleware([], gFn);
+
+  setGlobalMiddlewares(g);
+
+  const mFn = vi.fn<MiddlewareFunction<any, any>>().mockImplementation(async function m(
+    { context },
+    next,
+  ) {
+    expect(context.gValue).toBe('value-from-global');
+    return next({ context: { mValue: 'value-from-middleware' } });
+  }) satisfies MiddlewareFunction<any, any>;
+  const m = createMiddlewareWithGlobalContext([], mFn);
+
+  const sFn = vi.fn<ServerFunction<any, any>>().mockImplementation(async function handler({
+    context,
+  }) {
+    expect(context).toEqual(expect.objectContaining({ gValue: 'value-from-global' }));
+    return { ok: true, context };
+  });
+  const serverFn = createServerFn([m], sFn);
+
+  const req = new Request('https://example.com');
+  const args = { request: req, params: {}, context: {} };
+  const res = await serverFn(args);
+  const json = await res.json();
+
+  expect(json.ok).toBe(true);
+  expect(json.context).toEqual(
+    expect.objectContaining({
+      gValue: 'value-from-global',
+      mValue: 'value-from-middleware',
+    }),
+  );
+});