@arkitektbedriftene/fe-lib 0.2.4

package/src/lib/oidc/oidc.tsx

@@ -0,0 +1,248 @@
+import { SigninRedirectArgs, User, UserManager } from "oidc-client-ts";
+import {
+  Context,
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+export * from "oidc-client-ts";
+
+export * from "./impersonate";
+
+export type AuthState = {
+  user: User | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  isError: boolean;
+  error: Error | null;
+};
+
+export type AuthContextData = {
+  state: AuthState;
+  handleSigninCallback: () => Promise<User | undefined>;
+  redirectToSignin: UserManager["signinRedirect"];
+};
+
+export type AuthProviderConfig = {
+  onSigninComplete: (user: User | null) => void;
+};
+
+const AuthProviderCore = ({
+  userManager,
+  context,
+  children,
+}: {
+  userManager: UserManager;
+  context: Context<AuthContextData | null>;
+  children: ReactNode;
+}) => {
+  const [state, setState] = useState<AuthState>({
+    user: null,
+    isLoading: true,
+    isAuthenticated: false,
+    isError: false,
+    error: null,
+  });
+
+  // Initialize on first render
+  const isInitialized = useRef(false);
+  useEffect(() => {
+    if (isInitialized.current) {
+      return;
+    }
+    isInitialized.current = true;
+
+    void (async () => {
+      try {
+        const user = await userManager.getUser();
+        setState({
+          user,
+          isLoading: false,
+          isAuthenticated: user ? !user.expired : false,
+          isError: false,
+          error: null,
+        });
+      } catch (error) {
+        setState({
+          user: null,
+          isLoading: false,
+          isAuthenticated: false,
+          isError: true,
+          error:
+            error instanceof Error
+              ? error
+              : new Error("Unknown error during auth"),
+        });
+      }
+    })();
+  }, [userManager]);
+
+  // Set up UserManager events
+  useEffect(() => {
+    const onUserLoaded = (user: User) => {
+      setState({
+        user,
+        isLoading: false,
+        isAuthenticated: !user.expired,
+        isError: false,
+        error: null,
+      });
+    };
+    userManager.events.addUserLoaded(onUserLoaded);
+
+    const onUserUnloaded = () => {
+      setState({
+        ...state,
+        user: null,
+        isAuthenticated: false,
+      });
+    };
+    userManager.events.addUserUnloaded(onUserUnloaded);
+
+    const onSilentRenewError = (error: Error) => {
+      setState({
+        ...state,
+        isLoading: false,
+        isError: true,
+        error,
+      });
+    };
+    userManager.events.addSilentRenewError(onSilentRenewError);
+
+    return () => {
+      userManager.events.removeUserLoaded(onUserLoaded);
+      userManager.events.removeUserUnloaded(onUserUnloaded);
+      userManager.events.removeSilentRenewError(onSilentRenewError);
+    };
+  }, [userManager]);
+
+  const handleSigninCallback = useCallback(async () => {
+    const user = await userManager.signinCallback();
+
+    setState({
+      user: user ?? null,
+      isLoading: false,
+      isAuthenticated: user ? !user.expired : false,
+      isError: false,
+      error: null,
+    });
+
+    return user ?? undefined;
+  }, [userManager]);
+
+  const redirectToSignin = useCallback(
+    async (args?: SigninRedirectArgs | undefined) => {
+      try {
+        await userManager.signinRedirect(args);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [userManager]
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      state,
+      handleSigninCallback,
+      redirectToSignin,
+    }),
+    [state, handleSigninCallback, redirectToSignin]
+  );
+
+  return <context.Provider value={contextValue}>{children}</context.Provider>;
+};
+
+const useAuthContextCore = (context: Context<AuthContextData | null>) => {
+  const contextData = useContext(context);
+  if (!contextData) {
+    throw new Error("useAuthContext must be used within an AuthProvider");
+  }
+  return contextData;
+};
+
+const useAuthStateCore = (context: Context<AuthContextData | null>) => {
+  const { state } = useAuthContextCore(context);
+  return state;
+};
+
+const useSigninCallbackCore = (
+  context: Context<AuthContextData | null>,
+  onDone?: (user?: User) => void
+) => {
+  const { state, handleSigninCallback } = useAuthContextCore(context);
+
+  const isInitialized = useRef(false);
+  useEffect(() => {
+    // Only run once
+    if (isInitialized.current) {
+      return;
+    }
+    isInitialized.current = true;
+    handleSigninCallback()
+      // Wait for state to update
+      // Otherwise any navigation that happens in onDone will
+      // happen before the state update and the user will be
+      // redirected to the signin page again.
+      .then(
+        (u) =>
+          new Promise<User | undefined>((resolve) =>
+            setTimeout(() => resolve(u), 0)
+          )
+      )
+      .then((u) => onDone?.(u));
+  }, [handleSigninCallback]);
+
+  return state;
+};
+
+export const createAuthContext = (userManager: UserManager) => {
+  const AuthContext = createContext<AuthContextData | null>(null);
+
+  const AuthProvider = ({ children }: { children: ReactNode }) => {
+    return (
+      <AuthProviderCore userManager={userManager} context={AuthContext}>
+        {children}
+      </AuthProviderCore>
+    );
+  };
+
+  const useAuthContext = () => useAuthContextCore(AuthContext);
+  const useAuthState = () => useAuthStateCore(AuthContext);
+
+  /**
+   * Hook to handle the signin callback. Use this on the signin callback page.
+   * @param onDone Optional callback to run after signin is complete. Useful to redirect to a different page.
+   */
+  const useSigninCallback = (onDone?: (user?: User) => void) =>
+    useSigninCallbackCore(AuthContext, onDone);
+
+  /**
+   * Async function to get the access token for the current user
+   * outside of a React component.
+   *
+   * Useful for prefetching data in React Router or similar.
+   */
+  const getAccessToken = async () => {
+    const user = await userManager.getUser();
+    if (!user) {
+      return null;
+    }
+    return user.access_token;
+  };
+
+  return {
+    AuthContext,
+    AuthProvider,
+    useAuthContext,
+    useAuthState,
+    useSigninCallback,
+    getAccessToken,
+  };
+};

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import dts from "vite-plugin-dts";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: [
+        "src/lib/index.ts",
+        "src/lib/oidc/oidc.tsx",
+        "src/lib/hooks/hooks.ts",
+      ],
+      name: "fe-lib",
+      fileName: (format, entryname) => `${entryname}.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+});