feat: add OIDC support

Author: morten-olsen

demo/backend/nexus.config.ts

@@ -11,6 +11,12 @@ import { timers } from '@bitlerjs/nexus-timers';
 import { todos } from './src/extension.js';
 
 const config = defineConfig({
+  oidc: process.env.OIDC_ISSUER_URL
+    ? {
+        issuerUrl: process.env.OIDC_ISSUER_URL,
+        clientId: process.env.OIDC_CLIENT_ID,
+      }
+    : undefined,
   extensions: [
     defineExtension(todos, {}),
     defineExtension(typescript, {}),

packages/nexus-client-ws/src/client.ts

@@ -7,7 +7,7 @@ import { Socket } from './socket/socket.js';
 
 type ClientOptions = {
   url: string;
-  token: string;
+  headers?: Record<string, string>;
 };
 
 type ClientEvents = {
@@ -23,7 +23,7 @@ class Client<TSchema extends ServerDefinition = ServerDefinition> extends EventE
 
   constructor(options: ClientOptions) {
     super();
-    this.#socket = new Socket({ url: options.url, token: options.token });
+    this.#socket = new Socket({ url: options.url, headers: options.headers });
     this.#tasks = new Tasks({ socket: this.#socket });
     this.#events = new Events({ socket: this.#socket });
 

packages/nexus-client-ws/src/socket/socket.ts

@@ -3,7 +3,7 @@ import { createRequest, type RequestPayload, RequestResponse, type RequestType }
 
 type SocketOptions = {
   url: string;
-  token: string;
+  headers?: Record<string, string>;
 };
 
 type SocketEvents = {
@@ -13,6 +13,8 @@ type SocketEvents = {
   close: () => void;
 };
 
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 class Socket extends EventEmitter<SocketEvents> {
   #options: SocketOptions;
   #socket?: Promise<WebSocket>;
@@ -39,14 +41,12 @@ class Socket extends EventEmitter<SocketEvents> {
         }
       };
       socket.addEventListener('message', authListener);
-      socket.addEventListener('open', async () => {
-        socket.send(JSON.stringify({ type: 'authenticate', payload: { token: this.#options.token } }));
-      });
 
-      socket.addEventListener('close', () => {
+      socket.addEventListener('close', async () => {
         this.#socket = undefined;
         this.emit('close');
         if (!this.#closed) {
+          await sleep(3000);
           resolve(this.#setup());
         }
       });
@@ -58,6 +58,10 @@ class Socket extends EventEmitter<SocketEvents> {
       socket.addEventListener('message', ({ data }) => {
         this.emit('message', JSON.parse(data));
       });
+
+      socket.addEventListener('open', async () => {
+        socket.send(JSON.stringify({ type: 'authenticate', payload: { headers: this.#options.headers || {} } }));
+      });
     });
 
   public getSocket = async () => {

packages/nexus-react-login/.gitignore

@@ -0,0 +1,2 @@
+/dist/
+/node_modules/

packages/nexus-react-login/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@bitlerjs/nexus-react-login",
+  "version": "1.0.0",
+  "main": "dist/exports.js",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc --build",
+    "dev": "tsc --build --watch",
+    "generate-types": "tsx src/scripts/generate-types.ts"
+  },
+  "devDependencies": {
+    "@bitlerjs/nexus": "workspace:*",
+    "@bitlerjs/nexus-config": "workspace:*",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2"
+  },
+  "dependencies": {
+    "@bitlerjs/nexus-react-ws": "workspace:*",
+    "oidc-client-ts": "^3.1.0"
+  }
+}

packages/nexus-react-login/src/exports.ts

@@ -0,0 +1 @@
+export { WebLoginProvider } from './provider/provider.js';

packages/nexus-react-login/src/provider/oidc/oidc.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { User, UserManager, WebStorageStateStore } from 'oidc-client-ts';
+import { LoginProvider } from '@bitlerjs/nexus-react-ws';
+
+type OIDCLoginOptions = {
+  authority: string;
+  clientId: string;
+  onLogout?: () => void;
+  error?: unknown;
+};
+
+const useCreateLogin = (options: OIDCLoginOptions) => {
+  const userManager = useMemo(
+    () =>
+      new UserManager({
+        authority: options.authority,
+        client_id: options.clientId,
+        redirect_uri: location.href,
+        revokeTokenTypes: ['refresh_token'],
+        scope: 'openid profile email offline_access',
+        automaticSilentRenew: false,
+        response_type: 'code',
+        userStore: new WebStorageStateStore({ store: localStorage }),
+      }),
+    [],
+  );
+  const [state, setState] = useState<'pending' | 'logged-out' | 'logged-in'>('pending');
+  const [user, setUser] = useState<User>();
+
+  useEffect(() => {
+    const loadUserFromStorage = async () => {
+      try {
+        const storedUser = await userManager.getUser();
+        if (storedUser) {
+          setUser(storedUser);
+          setState('logged-in');
+        } else {
+          setState('logged-out');
+        }
+      } catch (error) {
+        console.error('Error loading user from storage:', error);
+      }
+    };
+
+    loadUserFromStorage();
+
+    userManager.events.addAccessTokenExpired(() => {
+      console.log('Access token expired');
+      userManager.signoutRedirect();
+    });
+
+    userManager.events.addUserLoaded(() => {
+      setState('logged-in');
+    });
+
+    userManager.events.addUserUnloaded(() => {
+      setState('logged-out');
+      options.onLogout?.();
+    });
+
+    userManager.events.addSilentRenewError((error) => {
+      console.error('Silent renew error', error);
+    });
+
+    userManager.events.addAccessTokenExpiring(() => {
+      console.log('Access token expiring');
+      userManager.signinSilent();
+    });
+  }, [userManager]);
+
+  const login = useCallback(async () => {
+    try {
+      await userManager.signinRedirect();
+    } catch (error) {
+      console.error('Login error:', error);
+    }
+  }, [userManager]);
+
+  const logout = useCallback(async () => {
+    try {
+      console.log('Logout');
+      options.onLogout?.();
+      await userManager.signoutRedirect();
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  }, [userManager]);
+
+  useEffect(() => {
+    if (state !== 'logged-out') {
+      return;
+    }
+    const currentUrl = new URL(window.location.href);
+    if (currentUrl.searchParams.has('code')) {
+      const run = async () => {
+        const user = await userManager.signinCallback(location.href);
+        setUser(user);
+        setState('logged-in');
+        const nextUrl = new URL(location.href);
+        nextUrl.searchParams.delete('code');
+        nextUrl.searchParams.delete('state');
+        window.history.replaceState({}, '', nextUrl.toString());
+      };
+      run();
+      return;
+    }
+    login();
+  }, [state, login]);
+
+  return {
+    state,
+    accessToken: user?.access_token,
+    login,
+    logout,
+  };
+};
+
+type OIDCLoginProviderProps = OIDCLoginOptions & {
+  url: string;
+  children: React.ReactNode;
+  loading?: React.ReactNode;
+};
+
+const OIDCLoginProvider = ({ children, url, loading, ...rest }: OIDCLoginProviderProps) => {
+  const login = useCreateLogin(rest);
+
+  if (login.state !== 'logged-in') {
+    return loading || null;
+  }
+
+  return (
+    <LoginProvider accessToken={login.accessToken} url={url} onLogout={login.logout}>
+      {children}
+    </LoginProvider>
+  );
+};
+
+export { OIDCLoginProvider };

packages/nexus-react-login/src/provider/provider.tsx

@@ -0,0 +1,83 @@
+import React, { ComponentType, useCallback, useEffect, useState } from 'react';
+import { OIDCLoginProvider } from './oidc/oidc.js';
+import { LoginProvider } from '@bitlerjs/nexus-react-ws';
+
+type WebLoginProviderProps = {
+  url: string;
+  clientId?: string;
+  loading?: React.ReactNode;
+  error?: ComponentType<{ error: unknown; logout: () => void }>;
+  children: React.ReactNode;
+  onLogout?: () => void;
+};
+
+type ServerConfig = {
+  oidc?: {
+    issuerUrl: string;
+    clientId?: string;
+  };
+};
+
+const WebLoginProvider = ({ children, clientId, onLogout, loading, url, error: ErrorView }: WebLoginProviderProps) => {
+  const [config, setConfig] = useState<ServerConfig | undefined>(undefined);
+  const [error, setError] = useState<unknown | undefined>(undefined);
+
+  const updateConfig = useCallback(async () => {
+    try {
+      const configUrl = new URL('api/config', url).toString();
+      const response = await fetch(configUrl);
+      if (!response.ok) {
+        throw new Error('Failed to fetch server config');
+      }
+      const data = await response.json();
+      setConfig(data);
+    } catch (error) {
+      setError(error);
+    }
+  }, [url]);
+
+  useEffect(() => {
+    updateConfig();
+  }, [updateConfig]);
+
+  const handleLogout = useCallback(() => {
+    onLogout?.();
+  }, [onLogout]);
+
+  if (error) {
+    return ErrorView ? <ErrorView logout={handleLogout} error={error} /> : null;
+  }
+
+  if (!config) {
+    return loading || null;
+  }
+
+  if (config.oidc) {
+    const clientIdToUse = config.oidc.clientId || clientId;
+    if (!clientIdToUse) {
+      if (!ErrorView) {
+        throw new Error('Missing client ID');
+      }
+      return <ErrorView logout={handleLogout} error={new Error('Missing client ID')} />;
+    }
+    return (
+      <OIDCLoginProvider
+        loading={loading}
+        url={url}
+        clientId={clientIdToUse}
+        authority={config.oidc.issuerUrl}
+        onLogout={onLogout}
+      >
+        {children}
+      </OIDCLoginProvider>
+    );
+  } else {
+    return (
+      <LoginProvider url={url} onLogout={handleLogout}>
+        {children}
+      </LoginProvider>
+    );
+  }
+};
+
+export { WebLoginProvider };

packages/nexus-react-login/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@bitlerjs/nexus-config",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "jsx": "react"
+  },
+  "include": [
+    "src/**/*"
+  ]
+}

packages/nexus-react-ws/src/exports.ts

@@ -3,4 +3,5 @@ export * from './client/client.js';
 export * from './provider/provider.js';
 export * from './conversation/conversation.js';
 export * from './configs/configs.js';
+export * from './login/login.js';
 export * from '@bitlerjs/nexus-client-ws';