@civic/auth 0.0.1-tsc.alpha.3 → 0.1.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civic/auth",
-  "version": "0.0.1-tsc.alpha.3",
+  "version": "0.1.1-beta.0",
   "type": "module",
   "module": "dist/index.js",
   "main": "dist/index.ts",
@@ -99,10 +99,10 @@
     "build": "pnpm build:cjs && pnpm build:esm",
     "build:cjs": "tsc -p tsconfig.cjs.json --noEmit false && tsc-alias -p tsconfig.cjs.json",
     "build:esm": "tsc -p tsconfig.esm.json --noEmit false && tsc-alias -p tsconfig.esm.json",
-    "prepublish": "pnpm build",
+    "prepublish": "node ../../etc/scripts/prompt-changelog.js && pnpm build",
     "dev": "tsc --watch",
     "test": "vitest",
-    "lint": "eslint \"src/**/*.ts*\"",
+    "lint": "eslint \"src/**/*.ts*\" --max-warnings 0",
     "lint:fix": "pnpm lint --fix",
     "clean": "rm -rf .turbo dist node_modules",
     "test:update": "vitest --update"

package/src/browser/storage.ts

@@ -1,11 +1,11 @@
 import type { AuthStorage } from "@/types.js";
 
 export class LocalStorageAdapter implements AuthStorage {
-  get(key: string): string {
-    return localStorage.getItem(key) || "";
+  async get(key: string): Promise<string> {
+    return Promise.resolve(localStorage.getItem(key) || "");
   }
 
-  set(key: string, value: string): void {
+  async set(key: string, value: string): Promise<void> {
     localStorage.setItem(key, value);
   }
 }

package/src/nextjs/GetUser.ts

@@ -6,11 +6,11 @@ import { GenericUserSession } from "@/shared/lib/UserSession.js";
 import { NextjsClientStorage } from "@/nextjs/cookies.js";
 import { retrieveTokens } from "@/shared/lib/util.js";
 
-export const getUser = (): User | null => {
+export const getUser = async (): Promise<User | null> => {
   const clientStorage = new NextjsClientStorage();
   const userSession = new GenericUserSession(clientStorage);
-  const tokens = retrieveTokens(clientStorage);
-  const user = userSession.get();
+  const tokens = await retrieveTokens(clientStorage);
+  const user = await userSession.get();
   if (!user || !tokens) return null;
 
   return {

package/src/nextjs/config.ts

@@ -33,11 +33,7 @@ export type AuthConfig = Partial<AuthConfigWithDefaults>;
 
 export type DefinedAuthConfig = AuthConfigWithDefaults;
 
-console.log(`process.env.NODE_ENV: ${process.env.NODE_ENV}`);
-const isDevelopment = process.env.NODE_ENV === "development";
-
-const defaultServerSecure = isDevelopment ? false : true;
-console.log(`defaultServerSecure: ${defaultServerSecure}`);
+const defaultServerSecure = !(process.env.NODE_ENV === "development");
 /**
  * Default configuration values that will be used if not overridden
  */

package/src/nextjs/cookies.ts

@@ -102,12 +102,12 @@ const createUserInfoCookie = (
 const clearAuthCookies = async (config: AuthConfig) => {
   // clear session, and tokens
   const cookieStorage = new NextjsCookieStorage(config.cookies?.tokens);
-  clearTokens(cookieStorage);
+  await clearTokens(cookieStorage);
 
   // clear user
   const clientStorage = new NextjsClientStorage();
   const userSession = new GenericUserSession(clientStorage);
-  userSession.set(null);
+  await userSession.set(null);
 };
 
 type KeySetter = OAuthTokens | CodeVerifier;
@@ -119,23 +119,17 @@ class NextjsCookieStorage extends CookieStorage {
     });
   }
 
-  get(key: string): string | null {
-    return cookies().get(key)?.value || null;
+  async get(key: string): Promise<string | null> {
+    const cookieStore = await cookies();
+    return cookieStore.get(key)?.value || null;
   }
 
-  set(key: KeySetter, value: string): void {
+  async set(key: KeySetter, value: string): Promise<void> {
+    const cookieStore = await cookies();
     const cookieSettings = this.config?.[key as KeySetter] || {
       ...this.settings,
     };
-    console.log(
-      "NextjsCookieStorage.set",
-      JSON.stringify(
-        { key, value, config: this.config, cookieSettings },
-        null,
-        2,
-      ),
-    );
-    cookies().set(key, value, cookieSettings);
+    cookieStore.set(key, value, cookieSettings);
   }
 }
 
@@ -148,12 +142,14 @@ class NextjsClientStorage extends CookieStorage {
     });
   }
 
-  get(key: string): string | null {
-    return cookies().get(key)?.value || null;
+  async get(key: string): Promise<string | null> {
+    const cookieStore = await cookies();
+    return cookieStore.get(key)?.value || null;
   }
 
-  set(key: string, value: string): void {
-    cookies().set(key, value, this.settings);
+  async set(key: string, value: string): Promise<void> {
+    const cookieStore = await cookies();
+    cookieStore.set(key, value, this.settings);
   }
 }
 

package/src/nextjs/index.ts

@@ -1,6 +1,4 @@
-export {
-  createCivicAuthPlugin,
-} from "@/nextjs/config.js";
+export { createCivicAuthPlugin } from "@/nextjs/config.js";
 export { getUser } from "@/nextjs/GetUser.js";
 export { handler } from "@/nextjs/routeHandler.js";
 export {

package/src/nextjs/routeHandler.ts

@@ -19,7 +19,6 @@ import {
   TOKEN_EXCHANGE_TRIGGER_TEXT,
 } from "@/constants.js";
 import { serverTokenExchangeFromState } from "@/lib/oauth.js";
-import { cookies } from "next/headers.js";
 import { CodeVerifier } from "@/shared/lib/types.js";
 
 const logger = loggers.nextjs.handlers.auth;
@@ -108,7 +107,6 @@ async function handleCallback(
   console.log("handleCallback", {
     code,
     state,
-    cookies: cookies(),
     appUrl,
   });
 
@@ -148,9 +146,7 @@ async function handleCallback(
                             const appUrl = globalThis.window?.location?.origin;
                             fetch('${fetchUrl}&appUrl=' + appUrl).then((response) => {
                                 response.json().then((jsonResponse) => {
-                                    console.log('fetch jsonResponse', jsonResponse);
                                     if (jsonResponse.redirectUrl) {
-                                        console.log('handleCallback serverTokenExchangeFromState, redirecting');
                                         window.location.href = jsonResponse.redirectUrl;
                                     }
                                 });
@@ -243,7 +239,7 @@ export async function handleLogout(
 
   const response = NextResponse.redirect(finalRedirectUrl);
 
-  clearAuthCookies(config);
+  await clearAuthCookies(config);
 
   try {
     revalidatePath(isAbsoluteRedirect ? finalRedirectUrl : redirectTarget);

package/src/reactjs/hooks/index.ts

@@ -3,5 +3,4 @@ export { useToken } from "@/shared/hooks/useToken.js";
 export { useAuth } from "@/shared/hooks/useAuth.js";
 export { useSession } from "@/shared/hooks/useSession.js";
 export { useConfig } from "@/shared/hooks/useConfig.js";
-export { useTokenCookie } from "@/nextjs/hooks/useTokenCookie.js";
 export { useIframe } from "@/shared/hooks/useIframe.js";

package/src/server/ServerAuthenticationResolver.ts

@@ -25,11 +25,6 @@ export class ServerAuthenticationResolver implements AuthenticationResolver {
     readonly storage: AuthStorage,
     readonly endpointOverrides?: Partial<Endpoints>,
   ) {
-    console.log("ServerAuthenticationResolver constructor", {
-      authConfig,
-      storage,
-      endpointOverrides,
-    });
     this.pkceProducer = new GenericPublicClientPKCEProducer(storage);
   }
   validateExistingSession(): Promise<SessionData> {
@@ -72,13 +67,13 @@ export class ServerAuthenticationResolver implements AuthenticationResolver {
       this.endpoints!, // clean up types here to avoid the ! operator
     );
 
-    storeTokens(this.storage, tokens);
+    await storeTokens(this.storage, tokens);
 
     return tokens;
   }
 
   async getSessionData(): Promise<SessionData | null> {
-    const storageData = retrieveTokens(this.storage);
+    const storageData = await retrieveTokens(this.storage);
 
     if (!storageData) return null;
 

package/src/server/login.ts

@@ -29,16 +29,17 @@ export async function resolveOAuthAccessCode(
   return authSessionService.tokenExchange(code, state);
 }
 
-export function isLoggedIn(storage: AuthStorage): boolean {
-  return !!storage.get("id_token");
+export async function isLoggedIn(storage: AuthStorage): Promise<boolean> {
+  return !!(await storage.get("id_token"));
 }
 
 export async function buildLoginUrl(
-  config: Pick<AuthConfig, "oauthServer" | "clientId" | "redirectUrl"> & {
-    scopes?: string[];
-    state?: string;
-    nonce?: string;
-  },
+  config: Pick<AuthConfig, "clientId" | "redirectUrl"> &
+    Partial<Pick<AuthConfig, "oauthServer">> & {
+      scopes?: string[];
+      state?: string;
+      nonce?: string;
+    },
   storage: AuthStorage,
 ): Promise<URL> {
   // generate a random state if not provided

package/src/services/AuthenticationService.ts

@@ -74,7 +74,6 @@ export class BrowserAuthenticationInitiator implements AuthenticationInitiator {
 
   constructor(config: typeof this.config) {
     this.config = config;
-    console.log("BrowserAuthenticationInitiator constructor", this.config);
   }
 
   async handleLoginAppPopupFailed(redirectUrl: string) {
@@ -97,27 +96,28 @@ export class BrowserAuthenticationInitiator implements AuthenticationInitiator {
         thisURL.hostname === "localhost"
       ) {
         if (!validateLoginAppPostMessage(event.data, this.config.clientId)) {
-          console.log("Received invalid message from login app", event.data);
           return;
         }
         const loginMessage = event.data as LoginPostMessage;
-        console.log("Received message from login app", event.data);
         this.handleLoginAppPopupFailed(loginMessage.data.url);
       }
     };
+
     window.addEventListener("message", this.postMessageHandler);
+
     if (this.config.displayMode === "iframe") {
       if (!iframeRef)
         throw new Error("iframeRef is required for displayMode 'iframe'");
       iframeRef.setAttribute("src", url.toString());
     }
+
     if (this.config.displayMode === "redirect") {
       window.location.href = url.toString();
     }
+
     if (this.config.displayMode === "new_tab") {
       try {
         const popupWindow = window.open(url.toString(), "_blank");
-        console.log("signIn", popupWindow);
         if (!popupWindow) {
           throw new PopupError("Failed to open popup window");
         }
@@ -128,13 +128,14 @@ export class BrowserAuthenticationInitiator implements AuthenticationInitiator {
         );
       }
     }
+
     return url;
   }
 
   async signOut(): Promise<URL> {
     const localStorage = new LocalStorageAdapter();
-    clearTokens(localStorage);
-    clearUser(localStorage);
+    await clearTokens(localStorage);
+    await clearUser(localStorage);
     // TODO open the iframe or new tab etc: the logout URL is not currently
     // supported by on the oauth, so just clear state until then
     const url = await generateOauthLogoutUrl(this.config);
@@ -168,9 +169,6 @@ export class GenericAuthenticationInitiator implements AuthenticationInitiator {
 
   constructor(config: typeof this.config) {
     this.config = config;
-    console.log("GenericAuthenticationInitiator constructor", {
-      config,
-    });
   }
 
   // Use the config (Client ID, scopes OAuth Server, Endpoints, PKCEConsumer) to generate a new login url
@@ -207,9 +205,6 @@ export class BrowserAuthenticationService extends BrowserAuthenticationInitiator
     // Since we are running fully on the client, we produce as well as consume the PKCE challenge
     protected pkceProducer = new BrowserPublicClientPKCEProducer(),
   ) {
-    console.log("BrowserAuthenticationService constructor", {
-      config,
-    });
     super({
       ...config,
       state: generateState(config.displayMode),
@@ -260,7 +255,7 @@ export class BrowserAuthenticationService extends BrowserAuthenticationInitiator
       this.endpoints!, // clean up types here to avoid the ! operator
     );
 
-    storeTokens(new LocalStorageAdapter(), tokens);
+    await storeTokens(new LocalStorageAdapter(), tokens);
 
     // cleanup the browser window if needed
     const parsedDisplayMode = displayModeFromState(
@@ -279,7 +274,7 @@ export class BrowserAuthenticationService extends BrowserAuthenticationInitiator
 
   // Get the session data from local storage
   async getSessionData(): Promise<SessionData | null> {
-    const storageData = retrieveTokens(new LocalStorageAdapter());
+    const storageData = await retrieveTokens(new LocalStorageAdapter());
 
     if (!storageData) return null;
 
@@ -296,7 +291,7 @@ export class BrowserAuthenticationService extends BrowserAuthenticationInitiator
       const sessionData = await this.getSessionData();
       if (!sessionData?.idToken || !sessionData.accessToken) {
         const unAuthenticatedSession = { ...sessionData, authenticated: false };
-        clearTokens(new LocalStorageAdapter());
+        await clearTokens(new LocalStorageAdapter());
         return unAuthenticatedSession;
       }
       if (!this.endpoints || !this.oauth2client) await this.init();
@@ -318,7 +313,7 @@ export class BrowserAuthenticationService extends BrowserAuthenticationInitiator
       const unAuthenticatedSession = {
         authenticated: false,
       };
-      clearTokens(new LocalStorageAdapter());
+      await clearTokens(new LocalStorageAdapter());
       return unAuthenticatedSession;
     }
   }

package/src/shared/components/CivicAuthIframeContainer.tsx

@@ -89,6 +89,7 @@ const CivicAuthIframeContainer = ({
   const { isLoading: isAuthLoading } = useAuth();
   const config = useConfig();
   const { setAuthResponseUrl, iframeRef } = useIframe();
+
   const processIframeUrl = useCallback(() => {
     if (iframeRef && iframeRef.current && iframeRef.current.contentWindow) {
       try {
@@ -106,9 +107,6 @@ const CivicAuthIframeContainer = ({
           // On the initial (3rd party) redirect from the auth server, the cookie won't be sent, so the server-side callback route will just render a blank page,
           // and we'll do the exchange request from here, which will include the cookies.
           if (iframeBody.includes(TOKEN_EXCHANGE_TRIGGER_TEXT)) {
-            console.log(
-              `${TOKEN_EXCHANGE_TRIGGER_TEXT}, calling callback URL again...`,
-            );
             const params = new URL(iframeUrl).searchParams;
             const appUrl = globalThis.window?.location?.origin;
             fetch(
@@ -155,22 +153,25 @@ const CivicAuthIframeContainer = ({
     return () => window.removeEventListener("keydown", handleEscape);
   });
 
-  const handleIframeLoad = () => {
+  const handleIframeLoad = useCallback(() => {
     setIsLoading(false);
-    console.log("handleIframeLoad");
-    if (processIframeUrl() && intervalId.current) {
+
+    const iframeHasUrl = processIframeUrl();
+
+    if (iframeHasUrl && intervalId.current) {
       clearInterval(intervalId.current);
     }
-  };
-  const showLoadingIcon =
-    isLoading || isAuthLoading || !iframeRef?.current?.getAttribute("src");
+  }, [processIframeUrl, setIsLoading, intervalId]);
+
+  const showLoadingIcon = isLoading || isAuthLoading;
 
   const WrapperComponent = config.modalIframe ? IframeChrome : NoChrome;
 
   return (
     <WrapperComponent onClose={onClose}>
-      {showLoadingIcon && (
+      {showLoadingIcon ? (
         <div
+          id="civic-auth-loading-icon-wrapper"
           style={{
             position: "absolute",
             inset: 0,
@@ -182,7 +183,7 @@ const CivicAuthIframeContainer = ({
         >
           <LoadingIcon />
         </div>
-      )}
+      ) : null}
 
       <CivicAuthIframe ref={iframeRef} onLoad={handleIframeLoad} />
     </WrapperComponent>

package/src/shared/components/LoadingIcon.tsx

@@ -1,7 +1,15 @@
 import React from "react";
 
 const LoadingIcon = () => (
-  <div role="status">
+  <div id="civic-auth-loading-icon" role="status">
+    <style>
+      {`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `}
+    </style>
     <svg
       aria-hidden="true"
       style={{

package/src/shared/lib/GenericAuthenticationRefresher.ts

@@ -16,12 +16,7 @@ export class GenericAuthenticationRefresher implements AuthenticationRefresher {
     private authConfig: AuthConfig,
     private storage: AuthStorage,
     private endpointOverrides?: Partial<Endpoints>,
-  ) {
-    console.log("GenericAuthenticationRefresher constructor", {
-      authConfig,
-      endpointOverrides,
-    });
-  }
+  ) {}
 
   async init(): Promise<this> {
     // resolve oauth config
@@ -59,7 +54,7 @@ export class GenericAuthenticationRefresher implements AuthenticationRefresher {
   async refreshTokens() {
     if (!this.oauth2client) await this.init();
 
-    const tokens = retrieveTokens(this.storage);
+    const tokens = await retrieveTokens(this.storage);
     if (!tokens?.refresh_token) throw new Error("No refresh token available");
 
     const oauth2Client = this.oauth2client!;
@@ -68,7 +63,7 @@ export class GenericAuthenticationRefresher implements AuthenticationRefresher {
         tokens.refresh_token,
       );
 
-    storeTokens(this.storage, refreshedTokens);
+    await storeTokens(this.storage, refreshedTokens);
 
     return tokens;
   }

package/src/shared/lib/UserSession.ts

@@ -3,23 +3,23 @@ import { UserStorage } from "@/shared/lib/types.js";
 import { convertForwardedTokenFormat } from "@/lib/jwt.js";
 
 export interface UserSession {
-  get(): User | null;
-  set(user: User): void;
+  get(): Promise<User | null>;
+  set(user: User): Promise<void>;
 }
 
 export class GenericUserSession implements UserSession {
   constructor(readonly storage: AuthStorage) {}
 
-  get(): User | null {
-    const user = this.storage.get(UserStorage.USER);
+  async get(): Promise<User | null> {
+    const user = await this.storage.get(UserStorage.USER);
     return user ? JSON.parse(user) : null;
   }
 
-  set(user: User | null): void {
+  async set(user: User | null): Promise<void> {
     const forwardedTokens = user?.forwardedTokens
       ? convertForwardedTokenFormat(user?.forwardedTokens as ForwardedTokensJWT)
       : null;
     const value = user ? JSON.stringify({ ...user, forwardedTokens }) : "";
-    this.storage.set(UserStorage.USER, value);
+    await this.storage.set(UserStorage.USER, value);
   }
 }

package/src/shared/lib/session.ts

@@ -3,7 +3,7 @@ import { parseJWT } from "oslo/jwt";
 import type { AuthStorage, User } from "@/types.js";
 
 export async function getUser(storage: AuthStorage): Promise<User | null> {
-  const tokens = retrieveTokens(storage);
+  const tokens = await retrieveTokens(storage);
   if (!tokens) return null;
 
   // Assumes all information is in the ID token

package/src/shared/lib/storage.ts

@@ -35,6 +35,6 @@ export abstract class CookieStorage implements AuthStorage {
       path: settings.path ?? "/",
     };
   }
-  abstract get(key: string): string | null;
-  abstract set(key: string, value: string): void;
+  abstract get(key: string): Promise<string | null>;
+  abstract set(key: string, value: string): Promise<void>;
 }

package/src/shared/lib/util.ts

@@ -7,7 +7,7 @@ import type {
   OIDCTokenResponseBody,
   ParsedTokens,
 } from "@/types.js";
-import { CodeVerifier, OAuthTokens } from "./types.js";
+import { OAuthTokens } from "./types.js";
 import { OAuth2Client } from "oslo/oauth2";
 import { getIssuerVariations, getOauthEndpoints } from "@/lib/oauth.js";
 import * as jose from "jose";
@@ -83,7 +83,6 @@ export async function generateOauthLoginUrl(config: {
   // Required by the auth server for offline_access scope
   oAuthUrl.searchParams.append("prompt", "consent");
 
-  console.log("Generated OAuth URL", oAuthUrl.toString());
   return oAuthUrl;
 }
 
@@ -139,36 +138,35 @@ export async function exchangeTokens(
   return tokens;
 }
 
-export function storeTokens(
+export async function storeTokens(
   storage: AuthStorage,
   tokens: OIDCTokenResponseBody,
 ) {
   // store tokens in storage ( TODO we should probably store them against the state to allow multiple logins )
-  storage.set(OAuthTokens.ID_TOKEN, tokens.id_token);
-  storage.set(OAuthTokens.ACCESS_TOKEN, tokens.access_token);
-  if (tokens.refresh_token)
-    storage.set(OAuthTokens.REFRESH_TOKEN, tokens.refresh_token);
+  await storage.set(OAuthTokens.ID_TOKEN, tokens.id_token);
+  await storage.set(OAuthTokens.ACCESS_TOKEN, tokens.access_token);
+  if (tokens.refresh_token) {
+    await storage.set(OAuthTokens.REFRESH_TOKEN, tokens.refresh_token);
+  }
 }
 
-export function clearTokens(storage: AuthStorage) {
-  Object.values(OAuthTokens).forEach((cookie) => {
-    storage.set(cookie, "");
-  });
-  Object.values(CodeVerifier.COOKIE_NAME).forEach((cookie) => {
+export async function clearTokens(storage: AuthStorage) {
+  const clearOAuthPromises = Object.values(OAuthTokens).map((cookie) => {
     storage.set(cookie, "");
   });
+  await Promise.all([...clearOAuthPromises]);
 }
-export function clearUser(storage: AuthStorage) {
+export async function clearUser(storage: AuthStorage) {
   const userSession = new GenericUserSession(storage);
-  userSession.set(null);
+  await userSession.set(null);
 }
 
-export function retrieveTokens(
+export async function retrieveTokens(
   storage: AuthStorage,
-): OIDCTokenResponseBody | null {
-  const idToken = storage.get(OAuthTokens.ID_TOKEN);
-  const accessToken = storage.get(OAuthTokens.ACCESS_TOKEN);
-  const refreshToken = storage.get(OAuthTokens.REFRESH_TOKEN);
+): Promise<OIDCTokenResponseBody | null> {
+  const idToken = await storage.get(OAuthTokens.ID_TOKEN);
+  const accessToken = await storage.get(OAuthTokens.ACCESS_TOKEN);
+  const refreshToken = await storage.get(OAuthTokens.REFRESH_TOKEN);
 
   if (!idToken || !accessToken) return null;