@civic/auth 0.0.1-beta.9 → 0.0.1-tsc.alpha.2

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/types.ts

@@ -0,0 +1,227 @@
+import type { TokenResponseBody } from "oslo/oauth2";
+import type { JWT } from "oslo/jwt";
+
+type UnknownObject = Record<string, unknown>;
+type EmptyObject = Record<string, never>;
+
+// Display modes for the auth flow
+type DisplayMode = "iframe" | "redirect" | "new_tab" | "custom_tab";
+
+// Combined Auth and Session Service
+interface AuthSessionService {
+  // TODO DK NOTES: Should be in BrowserAuthSessionService, not relevant on backend
+  loadAuthorizationUrl(
+    authorizationURL: string,
+    displayMode: DisplayMode,
+  ): void;
+  // TODO DK NOTES: overrideDisplayMode parameter not appropriate here - also - do we need both this and the above in the interface?
+  getAuthorizationUrl(
+    scopes: string[],
+    overrideDisplayMode: DisplayMode,
+    nonce?: string,
+  ): Promise<string>;
+  // TODO DK NOTES: display mode should be in browser version only. Also, do we need this and the above two in the top-level interface?
+  signIn(
+    displayMode: DisplayMode,
+    scopes: string[],
+    nonce?: string,
+  ): Promise<void>;
+  // TODO DK NOTES: Input should be an auth code - do not assume it comes via an url
+  tokenExchange(responseUrl: string): Promise<SessionData>;
+  // TODO DK NOTES: Should be async for flexibility
+  getSessionData(): SessionData;
+  // TODO DK NOTES: Should be async for flexibility
+  updateSessionData(data: SessionData): void;
+  getUserInfoService(): Promise<UserInfoService>;
+}
+
+// Token Service
+interface TokenService {
+  exchangeCodeForTokens(authCode: string): Promise<Tokens>;
+  validateIdToken(idToken: string, nonce: string): boolean;
+  refreshAccessToken(refreshToken: string): Promise<Tokens>;
+}
+
+// User Info Service
+interface UserInfoService {
+  getUserInfo<T extends UnknownObject>(
+    accessToken: string,
+    idToken: string | null,
+  ): Promise<User<T> | null>;
+}
+
+// Resource Service
+interface ResourceService {
+  getProtectedResource(accessToken: string): Promise<unknown>;
+}
+
+// Auth Request (for internal use in AuthSessionService)
+type AuthRequest = {
+  clientId: string;
+  redirectUri: string;
+  state: string;
+  nonce: string;
+  scope: string;
+};
+
+type Endpoints = {
+  jwks: string;
+  auth: string;
+  token: string;
+  userinfo: string;
+  challenge?: string;
+};
+
+type Config = {
+  oauthServer: string;
+  endpoints?: Endpoints;
+};
+
+type SessionData = {
+  authenticated: boolean; // TODO can this be inferred from the presence of the tokens?
+  state?: string;
+  accessToken?: string;
+  refreshToken?: string;
+  idToken?: string;
+  timestamp?: number;
+  expiresIn?: number;
+  codeVerifier?: string;
+  displayMode?: DisplayMode;
+  openerUrl?: string;
+};
+
+type OIDCTokenResponseBody = TokenResponseBody & { id_token: string };
+
+type ParsedTokens = {
+  id_token: JWTPayload;
+  access_token: JWTPayload;
+  refresh_token?: string;
+};
+
+// The format we expose to the frontend via hooks
+type ForwardedTokens = Record<
+  string,
+  {
+    idToken?: string;
+    accessToken?: string;
+    refreshToken?: string;
+  }
+>;
+
+// The format in the JWT payload
+type ForwardedTokensJWT = Record<
+  string,
+  {
+    id_token?: string;
+    access_token?: string;
+    refresh_token?: string;
+    scope?: string;
+  }
+>;
+
+type JWTPayload = JWT["payload"] & {
+  iss: string;
+  aud: string;
+  sub: string;
+  iat: number;
+  exp: number;
+};
+
+type IdTokenPayload = JWTPayload & {
+  forwardedTokens?: ForwardedTokensJWT;
+  email?: string;
+  name?: string;
+  picture?: string;
+  nonce: string;
+  at_hash: string;
+};
+
+type IdToken = Omit<JWT, "payload"> & {
+  payload: IdTokenPayload;
+};
+
+type Tokens = {
+  idToken: string;
+  accessToken: string;
+  refreshToken: string;
+  forwardedTokens: ForwardedTokens;
+};
+
+// Base user interface
+type BaseUser = {
+  id: string;
+  email?: string;
+  name?: string;
+  given_name?: string;
+  family_name?: string;
+  picture?: string;
+  updated_at?: Date;
+};
+
+type User<T extends UnknownObject = EmptyObject> = BaseUser &
+  Partial<Tokens> &
+  T;
+
+type OpenIdConfiguration = {
+  authorization_endpoint: string;
+  claims_parameter_supported: boolean;
+  claims_supported: string[];
+  code_challenge_methods_supported: string[];
+  end_session_endpoint: string;
+  grant_types_supported: string[];
+  issuer: string;
+  jwks_uri: string;
+  authorization_response_iss_parameter_supported: boolean;
+  response_modes_supported: string[];
+  response_types_supported: string[];
+  scopes_supported: string[];
+  subject_types_supported: string[];
+  token_endpoint_auth_methods_supported: string[];
+  token_endpoint_auth_signing_alg_values_supported: string[];
+  token_endpoint: string;
+  id_token_signing_alg_values_supported: string[];
+  pushed_authorization_request_endpoint: string;
+  request_parameter_supported: boolean;
+  request_uri_parameter_supported: boolean;
+  userinfo_endpoint: string;
+  claim_types_supported: string[];
+};
+
+type LoginPostMessage = {
+  source: string;
+  type: string;
+  clientId: string;
+  data: {
+    url: string;
+  };
+};
+export type {
+  LoginPostMessage,
+  AuthSessionService,
+  TokenService,
+  UserInfoService,
+  ResourceService,
+  AuthRequest,
+  Tokens,
+  Endpoints,
+  Config,
+  SessionData,
+  OIDCTokenResponseBody,
+  ParsedTokens,
+  BaseUser,
+  User,
+  DisplayMode,
+  UnknownObject,
+  EmptyObject,
+  ForwardedTokens,
+  ForwardedTokensJWT,
+  JWTPayload,
+  IdTokenPayload,
+  IdToken,
+  OpenIdConfiguration,
+};
+
+export interface AuthStorage {
+  get(key: string): string | null;
+  set(key: string, value: string): void;
+}

package/src/utils.ts

@@ -0,0 +1,58 @@
+/**
+ * Checks if a popup window is blocked by the browser.
+ *
+ * This function attempts to open a small popup window and then checks if it was successfully created.
+ * If the popup is blocked by the browser, the function returns `true`. Otherwise, it returns `false`.
+ *
+ * @returns {boolean} - `true` if the popup is blocked, `false` otherwise.
+ */
+const isPopupBlocked = (): boolean => {
+  // First we try to open a small popup window. It either returns a window object or null.
+  const popup = window.open("", "", "width=1,height=1");
+
+  // If window.open() returns null, popup is definitely blocked
+  if (!popup) {
+    return true;
+  }
+
+  try {
+    // Try to access a property of the popup to check if it's usable
+    if (typeof popup.closed === "undefined") {
+      throw new Error("Popup is blocked");
+    }
+  } catch {
+    // Accessing the popup's properties throws an error if the popup is blocked
+    return true;
+  }
+
+  // Close the popup immediately if it was opened
+  popup.close();
+  return false;
+};
+
+// This type narrows T as far as it can by:
+// - removing all keys where the value is `undefined`
+// - making keys that are not undefined required
+// So, for example: given { a: string | undefined, b: string | undefined },
+// if you pass in { a: "foo" }, it returns an object of type: { a: string }
+type WithoutUndefined<T> = {
+  [K in keyof T as undefined extends T[K] ? never : K]: T[K];
+};
+export const withoutUndefined = <T extends { [K in keyof T]: unknown }>(
+  obj: T,
+): WithoutUndefined<T> => {
+  const result = {} as WithoutUndefined<T>;
+
+  for (const key in obj) {
+    if (obj[key] !== undefined) {
+      // TypeScript needs assurance that key is a valid key in WithoutUndefined<T>
+      // We use type assertion here
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (result as any)[key] = obj[key];
+    }
+  }
+
+  return result;
+};
+
+export { isPopupBlocked };