@civic/auth 0.1.3 → 0.1.4-beta.0

package/src/shared/providers/AuthProvider.tsx

@@ -1,397 +0,0 @@
-"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;
-  nonce?: string;
-  onSignIn?: (error?: Error) => void;
-  onSignOut?: () => Promise<void>;
-  modalIframe?: boolean; // set to false if the iframe is being embedded in the client app
-  config?: Config;
-  redirectUrl?: string;
-};
-
-export type InternalAuthProviderProps = AuthProviderProps & {
-  sessionData?: SessionData;
-  pkceConsumer?: PKCEConsumer;
-};
-
-function BlockDisplay({ children }: { children: ReactNode }) {
-  return (
-    <div
-      id="iframe-block-display-wrapper"
-      style={{
-        position: "relative",
-        left: 0,
-        top: 0,
-        zIndex: 50,
-        display: "flex",
-        height: "100vh",
-        width: "100vw",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "white",
-      }}
-    >
-      <div
-        id="iframe-block-display"
-        style={{
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "white",
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}
-
-const AuthProvider = ({
-  children,
-  clientId,
-  redirectUrl: inputRedirectUrl,
-  config = authConfig,
-  onSignIn,
-  onSignOut,
-  pkceConsumer,
-  nonce,
-  modalIframe = true,
-  sessionData: inputSessionData,
-}: InternalAuthProviderProps) => {
-  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 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,
-      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);
-      }
-
-      if (!authInitiator) {
-        throw new Error("Failed to get auth initiator");
-      }
-
-      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;
-
-  const showIframeLoadingOverlay =
-    modalIframe &&
-    (isInIframe || isRedirecting || (isLoading && !serverTokenExchange));
-  const showErrorOverlay = tokenExchangeError || error;
-  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>
-              )}
-
-              {showErrorOverlay && (
-                <BlockDisplay>
-                  <div>
-                    Error: {(tokenExchangeError || (error as Error)).message}
-                  </div>
-                </BlockDisplay>
-              )}
-
-              {showIframeLoadingOverlay && !showErrorOverlay && (
-                <BlockDisplay>
-                  <LoadingIcon />
-                </BlockDisplay>
-              )}
-
-              {children}
-            </TokenProvider>
-          </SessionProvider>
-        </IframeProvider>
-      </ConfigProvider>
-    </AuthContext.Provider>
-  );
-};
-
-export { AuthProvider };

package/src/shared/providers/CivicAuthProvider.tsx

@@ -1,31 +0,0 @@
-"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";
-
-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

@@ -1,50 +0,0 @@
-"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

@@ -1,34 +0,0 @@
-"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

@@ -1,29 +0,0 @@
-"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

@@ -1,78 +0,0 @@
-"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

@@ -1,80 +0,0 @@
-"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 };