@civic/auth 0.0.1--.tsc.alpha.1

package/src/shared/providers/AuthProvider.tsx

@@ -0,0 +1,364 @@
+"use client";
+import React, {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { Config, DisplayMode, SessionData } from "@/types.js";
+import { CivicAuthIframeContainer } from "@/shared/components/CivicAuthIframeContainer.js";
+import { TokenProvider } from "@/shared/providers/TokenProvider.js";
+import { SessionProvider } from "@/shared/providers/SessionProvider.js";
+import { DEFAULT_SCOPES } from "@/constants.js";
+import { authConfig } from "@/config.js";
+import { LoadingIcon } from "@/shared/components/LoadingIcon.js";
+import { isWindowInIframe } from "@/lib/windowUtil.js";
+import { AuthContext } from "@/shared/providers/AuthContext.js";
+import {
+  BrowserAuthenticationInitiator,
+  BrowserAuthenticationService,
+} from "@/services/AuthenticationService.js";
+import type { AuthenticationResolver, PKCEConsumer } from "@/services/types.js";
+import { PopupError } from "@/services/types.js";
+import { ConfidentialClientPKCEConsumer } from "@/services/PKCE.js";
+import { generateState } from "@/lib/oauth.js";
+import { LocalStorageAdapter } from "@/browser/storage.js";
+import { ConfigProvider } from "@/shared/providers/ConfigProvider.js";
+import { getUser } from "../lib/session.js";
+import { GenericUserSession } from "../lib/UserSession.js";
+import { IframeProvider } from "@/shared/providers/IframeProvider.js";
+
+// Global this object setup
+let globalThisObject;
+if (typeof window !== "undefined") {
+  globalThisObject = window;
+} else if (typeof global !== "undefined") {
+  globalThisObject = global;
+} else {
+  globalThisObject = Function("return this")();
+}
+globalThisObject.globalThis = globalThisObject;
+
+export type AuthProviderProps = {
+  children: ReactNode;
+  clientId: string;
+  redirectUrl?: string;
+  nonce?: string;
+  config?: Config;
+  onSignIn?: (error?: Error) => void;
+  onSignOut?: () => Promise<void>;
+  pkceConsumer?: PKCEConsumer;
+  modalIframe?: boolean;
+  sessionData?: SessionData;
+};
+
+function BlockDisplay({ children }: { children: ReactNode }) {
+  return (
+    <div className="cac-relative cac-left-0 cac-top-0 cac-z-50 cac-flex cac-h-screen cac-w-screen cac-items-center cac-justify-center cac-bg-white">
+      <div className="cac-absolute cac-inset-0 cac-flex cac-items-center cac-justify-center cac-bg-white">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+const AuthProvider = ({
+  children,
+  clientId,
+  redirectUrl: inputRedirectUrl,
+  config = authConfig,
+  onSignIn,
+  onSignOut,
+  pkceConsumer,
+  nonce,
+  modalIframe = true,
+  sessionData: inputSessionData,
+}: AuthProviderProps) => {
+  const [iframeUrl, setIframeUrl] = useState<string | null>(null);
+  const [currentUrl, setCurrentUrl] = useState<string | null>(null);
+  const [isInIframe, setIsInIframe] = useState(false);
+  const [authResponseUrl, setAuthResponseUrl] = useState<string | null>(null);
+  const [tokenExchangeError, setTokenExchangeError] = useState<Error>();
+  const [displayMode, setDisplayMode] = useState<DisplayMode>("iframe");
+  const [browserAuthenticationInitiator, setBrowserAuthenticationInitiator] =
+    useState<BrowserAuthenticationInitiator | null>();
+  const [showIFrame, setShowIFrame] = useState(false);
+  const [isRedirecting, setIsRedirecting] = useState(false);
+  const queryClient = useQueryClient();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // TODO maybe we want to support or derive serverTokenExchange another way?
+  const serverTokenExchange =
+    pkceConsumer instanceof ConfidentialClientPKCEConsumer;
+  // check if the current window is in an iframe with the iframe id, and set an isInIframe state
+  useEffect(() => {
+    if (typeof globalThis.window !== "undefined") {
+      setCurrentUrl(globalThis.window.location.href);
+      const isInIframeVal = isWindowInIframe(globalThis.window);
+      setIsInIframe(isInIframeVal);
+    }
+  }, []);
+
+  const redirectUrl = useMemo(
+    () => (inputRedirectUrl || currentUrl || "").split("?")[0],
+    [currentUrl, inputRedirectUrl],
+  );
+
+  const [authService, setAuthService] = useState<AuthenticationResolver>();
+
+  useEffect(() => {
+    if (!currentUrl || !redirectUrl) return;
+    BrowserAuthenticationService.build({
+      clientId,
+      redirectUrl,
+      oauthServer: config.oauthServer,
+      scopes: DEFAULT_SCOPES,
+      displayMode,
+    }).then(setAuthService);
+  }, [currentUrl, clientId, redirectUrl, config, displayMode]);
+
+  const {
+    data: session,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: [
+      "session",
+      authResponseUrl,
+      iframeUrl,
+      currentUrl,
+      isInIframe,
+      authService,
+    ],
+    queryFn: async () => {
+      if (!authService) {
+        return { authenticated: false };
+      }
+      if (inputSessionData) {
+        return inputSessionData;
+      }
+      const url = new URL(
+        authResponseUrl
+          ? authResponseUrl
+          : globalThis.window.location.href || "",
+      );
+      // if we have existing tokens, then validate them and return the session data
+      // otherwise check if we have a code in the url and exchange it for tokens
+      // if we have neither, return undefined
+      const existingSessionData = await authService.validateExistingSession();
+      if (existingSessionData.authenticated) {
+        return existingSessionData;
+      }
+      const code = url.searchParams.get("code");
+      const state = url.searchParams.get("state");
+      if (!serverTokenExchange && code && state && !isInIframe) {
+        try {
+          await authService.tokenExchange(code, state);
+          const clientStorage = new LocalStorageAdapter();
+          const user = await getUser(clientStorage);
+          if (!user) {
+            throw new Error("Failed to get user info");
+          }
+
+          const userSession = new GenericUserSession(clientStorage);
+          userSession.set(user);
+
+          onSignIn?.(); // Call onSignIn without an error if successful
+          return authService.getSessionData();
+        } catch (error) {
+          setTokenExchangeError(error as Error);
+          onSignIn?.(
+            error instanceof Error ? error : new Error("Failed to sign in"),
+          ); // Pass the error to onSignIn
+          return { authenticated: false };
+        }
+      }
+
+      return existingSessionData;
+    },
+  });
+
+  const signOutMutation = useMutation({
+    mutationFn: async () => {
+      await onSignOut?.();
+      // Implement signOut logic here
+      const authInitiator = getAuthInitiator();
+      await authInitiator?.signOut();
+      setIframeUrl(null);
+      setShowIFrame(false);
+      setAuthResponseUrl(null);
+    },
+    onSuccess: () => {
+      queryClient.setQueryData(
+        [
+          "session",
+          authResponseUrl,
+          iframeUrl,
+          currentUrl,
+          isInIframe,
+          authService,
+        ],
+        null,
+      );
+    },
+  });
+
+  const getAuthInitiator = useCallback(
+    (overrideDisplayMode?: DisplayMode) => {
+      const useDisplayMode = overrideDisplayMode || displayMode;
+      if (!pkceConsumer || !redirectUrl) {
+        return null;
+      }
+      return (
+        browserAuthenticationInitiator ||
+        new BrowserAuthenticationInitiator({
+          pkceConsumer, // generate and retrieve the challenge client-side
+          clientId,
+          redirectUrl,
+          state: generateState(useDisplayMode, serverTokenExchange),
+          scopes: DEFAULT_SCOPES,
+          displayMode: useDisplayMode,
+          oauthServer: config.oauthServer,
+          // the endpoints to use for the login (if not obtained from the auth server
+          endpointOverrides: config.endpoints,
+          nonce,
+        })
+      );
+    },
+    [
+      serverTokenExchange,
+      displayMode,
+      browserAuthenticationInitiator,
+      clientId,
+      redirectUrl,
+      config.oauthServer,
+      config.endpoints,
+      pkceConsumer,
+      nonce,
+    ],
+  );
+
+  const signIn = useCallback(
+    async (overrideDisplayMode: DisplayMode = "iframe") => {
+      setDisplayMode(overrideDisplayMode);
+      const authInitiator = getAuthInitiator(overrideDisplayMode);
+      setBrowserAuthenticationInitiator(authInitiator);
+      if (overrideDisplayMode === "iframe") {
+        setShowIFrame(true);
+      } else if (overrideDisplayMode === "redirect") {
+        setIsRedirecting(true);
+      }
+      authInitiator?.signIn(iframeRef.current).catch((error) => {
+        console.log("signIn error", {
+          error,
+          isPopupError: error instanceof PopupError,
+        });
+        // if we've tried to open a popup and it has failed, then fallback to redirect mode
+        if (error instanceof PopupError) {
+          signIn("redirect");
+        }
+      });
+    },
+    [getAuthInitiator],
+  );
+
+  // remove event listeners when the component unmounts
+  useEffect(() => {
+    return () => {
+      if (browserAuthenticationInitiator) {
+        browserAuthenticationInitiator.cleanup();
+      }
+    };
+  }, [browserAuthenticationInitiator]);
+
+  const isAuthenticated = useMemo(
+    () => (session ? session.authenticated : false),
+    [session],
+  );
+
+  useQuery({
+    queryKey: ["autoSignIn", modalIframe, redirectUrl, isAuthenticated],
+    queryFn: async () => {
+      if (
+        !modalIframe &&
+        redirectUrl &&
+        !isAuthenticated &&
+        iframeRef.current
+      ) {
+        signIn("iframe");
+      }
+      return true;
+    },
+    refetchOnWindowFocus: false,
+  });
+
+  const value = useMemo(
+    () => ({
+      isLoading,
+      error: error as Error | null,
+      signOut: async () => {
+        await signOutMutation.mutateAsync();
+      },
+      isAuthenticated,
+      signIn,
+    }),
+    [isLoading, error, signOutMutation, isAuthenticated, signIn],
+  );
+
+  if (!redirectUrl) return null;
+
+  return (
+    <AuthContext.Provider value={value}>
+      <ConfigProvider
+        config={config}
+        redirectUrl={redirectUrl}
+        modalIframe={modalIframe}
+        serverTokenExchange={serverTokenExchange}
+      >
+        <IframeProvider
+          setAuthResponseUrl={setAuthResponseUrl}
+          iframeRef={iframeRef}
+        >
+          <SessionProvider session={session}>
+            <TokenProvider>
+              {modalIframe && !isInIframe && !session?.authenticated && (
+                <div
+                  style={
+                    showIFrame ? { display: "block" } : { display: "none" }
+                  }
+                >
+                  <CivicAuthIframeContainer
+                    onClose={() => setShowIFrame(false)}
+                  />
+                </div>
+              )}
+
+              {modalIframe &&
+                (isInIframe ||
+                  isRedirecting ||
+                  (isLoading && !serverTokenExchange)) && (
+                  <BlockDisplay>
+                    <LoadingIcon />
+                  </BlockDisplay>
+                )}
+
+              {(tokenExchangeError || error) && (
+                <BlockDisplay>
+                  <div>
+                    Error: {(tokenExchangeError || (error as Error)).message}
+                  </div>
+                </BlockDisplay>
+              )}
+              {children}
+            </TokenProvider>
+          </SessionProvider>
+        </IframeProvider>
+      </ConfigProvider>
+    </AuthContext.Provider>
+  );
+};
+
+export { AuthProvider };

package/src/shared/providers/CivicAuthProvider.tsx

@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import {
+  AuthProvider,
+  type AuthProviderProps,
+} from "@/shared/providers/AuthProvider.js";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserPublicClientPKCEProducer } from "@/services/PKCE.js";
+import { UserProvider } from "./UserProvider.js";
+import { LocalStorageAdapter } from "@/browser/storage.js";
+
+// adding the styles import here to be added to the bundle
+// import "../../styles.css";
+
+const queryClient = new QueryClient();
+
+type CivicAuthProviderProps = Omit<AuthProviderProps, "pkceConsumer">;
+
+const CivicAuthProvider = ({ children, ...props }: CivicAuthProviderProps) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider
+        {...props}
+        pkceConsumer={new BrowserPublicClientPKCEProducer()}
+      >
+        <UserProvider storage={new LocalStorageAdapter()}>
+          {children}
+        </UserProvider>
+      </AuthProvider>
+    </QueryClientProvider>
+  );
+};
+
+export { CivicAuthProvider, type CivicAuthProviderProps };

package/src/shared/providers/ConfigProvider.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { authConfig } from "@/config.js";
+import type { Config } from "@/types.js";
+import type { ReactNode } from "react";
+import React, { createContext } from "react";
+
+export type ConfigProviderOutput = {
+  config: Config;
+  redirectUrl: string;
+  modalIframe: boolean;
+  serverTokenExchange: boolean;
+};
+const defaultConfig: ConfigProviderOutput = {
+  config: authConfig,
+  redirectUrl: "",
+  modalIframe: true,
+  serverTokenExchange: false,
+};
+// Context for exposing Config specifically to the TokenProvider
+const ConfigContext = createContext<ConfigProviderOutput>(defaultConfig);
+
+type ConfigContextType = {
+  children: ReactNode;
+  config: Config;
+  redirectUrl: string;
+  modalIframe?: boolean;
+  serverTokenExchange: boolean;
+};
+
+const ConfigProvider = ({
+  children,
+  config,
+  redirectUrl,
+  modalIframe,
+  serverTokenExchange,
+}: ConfigContextType) => (
+  <ConfigContext.Provider
+    value={{
+      config,
+      redirectUrl,
+      modalIframe: !!modalIframe,
+      serverTokenExchange,
+    }}
+  >
+    {children}
+  </ConfigContext.Provider>
+);
+
+export type { ConfigContextType };
+export { ConfigProvider, ConfigContext };

package/src/shared/providers/IframeProvider.tsx

@@ -0,0 +1,34 @@
+"use client";
+import type { Dispatch, ReactNode, RefObject, SetStateAction } from "react";
+import React, { createContext } from "react";
+
+export type IframeProviderOutput = {
+  iframeRef: RefObject<HTMLIFrameElement> | null;
+  setAuthResponseUrl: Dispatch<SetStateAction<string | null>>;
+};
+const defaultIframe: IframeProviderOutput = {
+  iframeRef: null,
+  setAuthResponseUrl: () => {},
+};
+
+// Context for exposing Iframe specifically to the TokenProvider
+const IframeContext = createContext<IframeProviderOutput>(defaultIframe);
+
+type IframeContextType = {
+  children: ReactNode;
+  iframeRef: RefObject<HTMLIFrameElement> | null;
+  setAuthResponseUrl: Dispatch<SetStateAction<string | null>>;
+};
+
+const IframeProvider = ({
+  children,
+  iframeRef,
+  setAuthResponseUrl,
+}: IframeContextType) => (
+  <IframeContext.Provider value={{ iframeRef, setAuthResponseUrl }}>
+    {children}
+  </IframeContext.Provider>
+);
+
+export type { IframeContextType };
+export { IframeProvider, IframeContext };

package/src/shared/providers/SessionProvider.tsx

@@ -0,0 +1,29 @@
+"use client";
+import type { SessionData } from "@/types.js";
+import type { ReactNode } from "react";
+import React, { createContext } from "react";
+
+export type SessionProviderOutput = SessionData;
+const defaultSession: SessionProviderOutput = {
+  authenticated: false,
+  idToken: undefined,
+  accessToken: undefined,
+  displayMode: "iframe",
+};
+
+// Context for exposing session specifically to the TokenProvider
+const SessionContext = createContext<SessionProviderOutput>(defaultSession);
+
+type SessionContextType = {
+  children: ReactNode;
+  session?: SessionData | null;
+};
+
+const SessionProvider = ({ children, session }: SessionContextType) => (
+  <SessionContext.Provider value={{ ...defaultSession, ...(session || {}) }}>
+    {children}
+  </SessionContext.Provider>
+);
+
+export type { SessionContextType };
+export { SessionProvider, SessionContext };

package/src/shared/providers/TokenProvider.tsx

@@ -0,0 +1,78 @@
+"use client";
+import type { ReactNode } from "react";
+import React, { createContext, useMemo } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAuth } from "@/shared/hooks/useAuth.js";
+import { useSession } from "@/shared/hooks/useSession.js";
+import type { ForwardedTokens, IdToken } from "@/types.js";
+import { parseJWT } from "oslo/jwt";
+import { convertForwardedTokenFormat } from "@/lib/jwt.js";
+
+type TokenContextType = {
+  accessToken: string | null;
+  idToken: string | null;
+  forwardedTokens: ForwardedTokens;
+  refreshToken: () => Promise<void>;
+  isLoading: boolean;
+  error: Error | null;
+};
+
+const TokenContext = createContext<TokenContextType | undefined>(undefined);
+
+const TokenProvider = ({ children }: { children: ReactNode }) => {
+  const { isLoading, error: authError } = useAuth();
+  const session = useSession();
+  const queryClient = useQueryClient();
+
+  const refreshTokenMutation = useMutation({
+    mutationFn: async () => {
+      // Implement token refresh logic here
+      throw new Error("Method not implemented.");
+    },
+    onSuccess: () => {
+      // Invalidate and refetch queries that depend on the auth session
+      queryClient.invalidateQueries({ queryKey: ["session"] });
+    },
+  });
+
+  const decodeTokens = useMemo(() => {
+    if (!session?.idToken) return null;
+
+    const parsedJWT = parseJWT(session.idToken) as IdToken | null;
+
+    if (!parsedJWT) return null;
+
+    const { forwardedTokens } = parsedJWT.payload;
+
+    return forwardedTokens
+      ? convertForwardedTokenFormat(forwardedTokens)
+      : null;
+  }, [session?.idToken]);
+
+  const value = useMemo(
+    () => ({
+      accessToken: session.accessToken || null,
+      idToken: session.idToken || null,
+      forwardedTokens: decodeTokens || {},
+      refreshToken: refreshTokenMutation.mutateAsync,
+      isLoading,
+      error: (authError || refreshTokenMutation.error) as Error | null,
+    }),
+    [
+      session.accessToken,
+      session.idToken,
+      decodeTokens,
+      refreshTokenMutation.mutateAsync,
+      refreshTokenMutation.error,
+      isLoading,
+      authError,
+    ],
+  );
+
+  return (
+    <TokenContext.Provider value={value}>{children}</TokenContext.Provider>
+  );
+};
+
+export type { TokenContextType };
+export { TokenProvider, TokenContext };

package/src/shared/providers/UserProvider.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import React, { createContext } from "react";
+import type { ReactNode } from "react";
+import type { UseQueryResult } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+import type { JWT } from "oslo/jwt";
+import type { AuthStorage, EmptyObject, User } from "@/types.js";
+import { useAuth } from "@/shared/hooks/useAuth.js";
+import { useToken } from "@/shared/hooks/useToken.js";
+import { useSession } from "@/shared/hooks/useSession.js";
+import type { AuthContextType } from "@/shared/providers/AuthContext.js";
+import { GenericUserSession } from "@/shared/lib/UserSession.js";
+
+type UserContextType<
+  T extends Record<string, unknown> & JWT["payload"] = Record<string, unknown> &
+    JWT["payload"],
+> = {
+  user: User<T> | null;
+} & Omit<AuthContextType, "isAuthenticated">;
+
+const UserContext = createContext<UserContextType | null>(null);
+
+const UserProvider = <T extends EmptyObject>({
+  children,
+  storage,
+  user: inputUser,
+  signOut: inputSignOut,
+}: {
+  children: ReactNode;
+  storage: AuthStorage;
+  user?: User<T> | null;
+  signOut?: () => Promise<void>;
+}) => {
+  const { isLoading: authLoading, error: authError } = useAuth();
+  const session = useSession();
+  const { accessToken, idToken } = useToken();
+  const { signIn, signOut } = useAuth();
+
+  const fetchUser = async (): Promise<User | null> => {
+    if (!accessToken) {
+      return null;
+    }
+    const userSession = new GenericUserSession(storage);
+    return userSession.get();
+  };
+
+  const {
+    data: user,
+    isLoading: userLoading,
+    error: userError,
+  }: UseQueryResult<User<T> | null, Error> = useQuery({
+    queryKey: ["user", session?.idToken],
+    queryFn: fetchUser,
+    enabled: !!session?.idToken, // Only run the query if we have an access token
+  });
+
+  const isLoading = authLoading || userLoading;
+  const error = authError || userError;
+
+  const userWithIdToken = user ? { ...user, idToken } : null;
+
+  return (
+    <UserContext.Provider
+      value={{
+        user: (inputUser || userWithIdToken) ?? null,
+        isLoading,
+        error,
+        signIn,
+        signOut: inputSignOut || signOut,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export type { UserContextType };
+
+export { UserProvider, UserContext };

package/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;