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

package/src/reactjs/components/UserButton.tsx

@@ -0,0 +1,153 @@
+"use client";
+import { useUser } from "@/reactjs/hooks/index.js";
+import type { DisplayMode } from "@/types.js";
+import { cn } from "@/utils.js";
+import React, { useCallback, useEffect, useState } from "react";
+
+const ChevronDown = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-chevron-down"
+  >
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+
+const ChevronUp = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-chevron-up"
+  >
+    <path d="m18 15-6-6-6 6" />
+  </svg>
+);
+
+const UserButton = ({
+  displayMode,
+  className,
+}: {
+  displayMode?: DisplayMode;
+  className?: string;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { user, signIn, signOut } = useUser();
+
+  const handleClickOutside = useCallback((event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+
+    if (!target.closest("#civic-dropdown-container")) {
+      setIsOpen(false);
+    }
+  }, []);
+
+  const handleSignOut = useCallback(async () => {
+    signOut();
+
+    setIsOpen(false);
+  }, [signOut]);
+
+  const handleSignIn = useCallback(async () => {
+    await signIn(displayMode);
+
+    setIsOpen(false);
+  }, [signIn, displayMode]);
+
+  const handleEscape = useCallback((event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      setIsOpen(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      window.addEventListener("click", handleClickOutside);
+
+      window.addEventListener("keydown", handleEscape);
+    }
+
+    return () => {
+      window.removeEventListener("click", handleClickOutside);
+
+      window.removeEventListener("keydown", handleEscape);
+    };
+  }, [handleClickOutside, handleEscape, isOpen]);
+
+  if (user) {
+    return (
+      <div className="cac-relative" id="civic-dropdown-container">
+        <button
+          className={cn(
+            "cac-flex cac-w-full cac-items-center cac-justify-between cac-gap-2 cac-rounded-full cac-border cac-border-neutral-500 cac-px-3 cac-py-2 cac-text-neutral-500 cac-transition-colors hover:cac-bg-neutral-200 hover:cac-bg-opacity-50",
+            className,
+          )}
+          onClick={() => setIsOpen((isOpen) => !isOpen)}
+        >
+          {user?.picture ? (
+            <span className="cac-relative cac-flex cac-h-10 cac-w-10 cac-shrink-0 cac-gap-2 cac-overflow-hidden cac-rounded-full">
+              <img
+                className="cac-h-full cac-w-full cac-object-cover"
+                src={user.picture}
+                alt={user?.name || user?.email}
+              />
+            </span>
+          ) : (
+            <div />
+          )}
+
+          <span>{user?.name || user?.email}</span>
+
+          {isOpen ? <ChevronUp /> : <ChevronDown />}
+        </button>
+        <div
+          className={
+            isOpen
+              ? "cac-absolute cac-right-0 cac-mt-2 cac-w-full cac-rounded-lg cac-bg-white cac-py-2 cac-text-neutral-500 cac-shadow-xl"
+              : "cac-hidden"
+          }
+        >
+          <ul>
+            <li>
+              <button
+                className="cac-block cac-w-full cac-px-4 cac-py-2 cac-transition-colors hover:cac-bg-neutral-200 hover:cac-bg-opacity-50"
+                onClick={handleSignOut}
+              >
+                Logout
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      data-testid="sign-in-button"
+      className={cn(
+        "cac-rounded-full cac-border cac-border-neutral-500 cac-px-3 cac-py-2 cac-transition-colors hover:cac-bg-neutral-200 hover:cac-bg-opacity-50",
+        className,
+      )}
+      onClick={handleSignIn}
+    >
+      Sign in
+    </button>
+  );
+};
+
+export { UserButton };

package/src/reactjs/components/index.ts

@@ -0,0 +1,5 @@
+export { CivicAuthIframe } from "@/shared/components/CivicAuthIframe.js";
+export { CivicAuthIframeContainer } from "@/shared/components/CivicAuthIframeContainer.js";
+export { UserButton } from "@/reactjs/components/UserButton.js";
+export { SignInButton } from "@/reactjs/components/SignInButton.js";
+export { SignOutButton } from "@/reactjs/components/SignOutButton.js";

package/src/reactjs/hooks/index.ts

@@ -0,0 +1,8 @@
+export { useUser } from "@/reactjs/hooks/useUser.js";
+export { useUserCookie } from "@/nextjs/hooks/useUserCookie.js";
+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/reactjs/hooks/useAuth.ts

@@ -0,0 +1,15 @@
+"use client";
+import { useContext } from "react";
+import { AuthContext } from "@/shared/providers/AuthContext.js";
+
+const useAuth = () => {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+
+  return context;
+};
+
+export { useAuth };

package/src/reactjs/hooks/useUser.ts

@@ -0,0 +1,20 @@
+"use client";
+import { useContext } from "react";
+import {
+  UserContext,
+  type UserContextType,
+} from "@/shared/providers/UserProvider.js";
+
+const useUser = <
+  T extends Record<string, unknown> = Record<string, never>,
+>(): UserContextType<T> => {
+  const context = useContext(UserContext);
+
+  if (!context) {
+    throw new Error("useUser must be used within a UserProvider");
+  }
+
+  return context as UserContextType<T>;
+};
+
+export { useUser };

package/src/reactjs/index.ts

@@ -0,0 +1,19 @@
+// These are the default exports of the project.
+// They are limited by design to ensure that the public API does not expose any internal implementation details.
+// Do not change this without thinking carefully about the impact on the client-facing public API.
+export * from "@/reactjs/hooks/index.js";
+export {
+  CivicAuthProvider,
+  type CivicAuthProviderProps,
+} from "@/reactjs/providers/index.js";
+export type {
+  AuthContextType,
+  TokenContextType,
+  UserContextType,
+} from "@/reactjs/providers/index.js";
+export { CivicAuthIframeContainer } from "@/shared/components/CivicAuthIframeContainer.js";
+export {
+  UserButton,
+  SignInButton,
+  SignOutButton,
+} from "@/reactjs/components/index.js";

package/src/reactjs/providers/index.ts

@@ -0,0 +1,27 @@
+export {
+  UserProvider,
+  UserContext,
+  type UserContextType,
+} from "@/shared/providers/UserProvider.js";
+
+export {
+  TokenProvider,
+  TokenContext,
+  type TokenContextType,
+} from "@/shared/providers/TokenProvider.js";
+
+export { AuthProvider } from "@/shared/providers/AuthProvider.js";
+
+export {
+  SessionProvider,
+  SessionContext,
+  type SessionContextType,
+} from "@/shared/providers/SessionProvider.js";
+
+export {
+  CivicAuthProvider,
+  type CivicAuthProviderProps,
+} from "@/shared/providers/CivicAuthProvider.js";
+
+export { AuthContext } from "@/shared/providers/AuthContext.js";
+export type { AuthContextType } from "@/shared/providers/AuthContext.js";

package/src/server/ServerAuthenticationResolver.ts

@@ -0,0 +1,107 @@
+import { GenericPublicClientPKCEProducer } from "@/services/PKCE.js";
+import { OAuth2Client } from "oslo/oauth2";
+import type {
+  AuthStorage,
+  Endpoints,
+  OIDCTokenResponseBody,
+  SessionData,
+} from "@/types.js";
+import type { AuthConfig } from "@/server/config.js";
+import {
+  exchangeTokens,
+  getEndpointsWithOverrides,
+  retrieveTokens,
+  storeTokens,
+} from "@/shared/lib/util.js";
+import type { AuthenticationResolver, PKCEProducer } from "@/services/types.ts";
+
+export class ServerAuthenticationResolver implements AuthenticationResolver {
+  private pkceProducer: PKCEProducer;
+  private oauth2client: OAuth2Client | undefined;
+  private endpoints: Endpoints | undefined;
+
+  private constructor(
+    readonly authConfig: AuthConfig,
+    readonly storage: AuthStorage,
+    readonly endpointOverrides?: Partial<Endpoints>,
+  ) {
+    console.log("ServerAuthenticationResolver constructor", {
+      authConfig,
+      storage,
+      endpointOverrides,
+    });
+    this.pkceProducer = new GenericPublicClientPKCEProducer(storage);
+  }
+  validateExistingSession(): Promise<SessionData> {
+    throw new Error("Method not implemented.");
+  }
+
+  async init(): Promise<this> {
+    // resolve oauth config
+    this.endpoints = await getEndpointsWithOverrides(
+      this.authConfig.oauthServer,
+      this.endpointOverrides,
+    );
+    this.oauth2client = new OAuth2Client(
+      this.authConfig.clientId,
+      this.endpoints.auth,
+      this.endpoints.token,
+      {
+        redirectURI: this.authConfig.redirectUrl,
+      },
+    );
+
+    return this;
+  }
+
+  async tokenExchange(
+    code: string,
+    state: string,
+  ): Promise<OIDCTokenResponseBody> {
+    if (!this.oauth2client) await this.init();
+    const codeVerifier = await this.pkceProducer.getCodeVerifier();
+    if (!codeVerifier) throw new Error("Code verifier not found in storage");
+
+    // exchange auth code for tokens
+    const tokens = await exchangeTokens(
+      code,
+      state,
+      this.pkceProducer,
+      this.oauth2client!, // clean up types here to avoid the ! operator
+      this.authConfig.oauthServer,
+      this.endpoints!, // clean up types here to avoid the ! operator
+    );
+
+    storeTokens(this.storage, tokens);
+
+    return tokens;
+  }
+
+  async getSessionData(): Promise<SessionData | null> {
+    const storageData = retrieveTokens(this.storage);
+
+    if (!storageData) return null;
+
+    return {
+      authenticated: !!storageData.id_token,
+      idToken: storageData.id_token,
+      accessToken: storageData.access_token,
+      refreshToken: storageData.refresh_token,
+    };
+  }
+
+  static async build(
+    authConfig: AuthConfig,
+    storage: AuthStorage,
+    endpointOverrides?: Partial<Endpoints>,
+  ): Promise<AuthenticationResolver> {
+    const resolver = new ServerAuthenticationResolver(
+      authConfig,
+      storage,
+      endpointOverrides,
+    );
+    await resolver.init();
+
+    return resolver;
+  }
+}

package/src/server/config.ts

@@ -0,0 +1,17 @@
+import type { Endpoints } from "@/types.ts";
+
+export type CookieConfig = {
+  secure?: boolean;
+  sameSite?: "strict" | "lax" | "none";
+  domain?: string;
+  path?: string;
+  maxAge?: number;
+};
+
+export type AuthConfig = {
+  clientId: string;
+  oauthServer: string;
+  redirectUrl: string;
+  challengeUrl?: string;
+  endpointOverrides?: Partial<Endpoints> | undefined;
+};

package/src/server/index.ts

@@ -0,0 +1,12 @@
+export { CookieStorage } from "@/shared/lib/storage.js";
+export type {
+  SessionStorage,
+  CookieStorageSettings,
+} from "@/shared/lib/storage.js";
+export {
+  resolveOAuthAccessCode,
+  isLoggedIn,
+  buildLoginUrl,
+} from "@/server/login.js";
+export { getUser } from "@/shared/lib/session.js";
+export { refreshTokens } from "@/server/refresh.js";

package/src/server/login.ts

@@ -0,0 +1,58 @@
+import type { AuthStorage, OIDCTokenResponseBody } from "@/types.js";
+import { DEFAULT_AUTH_SERVER, DEFAULT_SCOPES } from "@/constants.js";
+import { GenericAuthenticationInitiator } from "@/services/AuthenticationService.js";
+import { GenericPublicClientPKCEProducer } from "@/services/PKCE.js";
+import { ServerAuthenticationResolver } from "@/server/ServerAuthenticationResolver.js";
+import type { AuthConfig } from "@/server/config.ts";
+/**
+ * Resolve an OAuth access code to a set of OIDC tokens
+ * @param code The access code, typically from a query parameter in the redirect url
+ * @param state The oauth random state string, used to distinguish between requests. Typically also passed in the redirect url
+ * @param storage The place that this server uses to store session data (e.g. a cookie store)
+ * @param config Oauth Server configuration
+ */
+export async function resolveOAuthAccessCode(
+  code: string,
+  state: string,
+  storage: AuthStorage,
+  config: AuthConfig,
+): Promise<OIDCTokenResponseBody> {
+  const authSessionService = await ServerAuthenticationResolver.build(
+    {
+      ...config,
+      oauthServer: config.oauthServer ?? DEFAULT_AUTH_SERVER,
+    },
+    storage,
+    config.endpointOverrides,
+  );
+
+  return authSessionService.tokenExchange(code, state);
+}
+
+export function isLoggedIn(storage: AuthStorage): boolean {
+  return !!storage.get("id_token");
+}
+
+export async function buildLoginUrl(
+  config: Pick<AuthConfig, "oauthServer" | "clientId" | "redirectUrl"> & {
+    scopes?: string[];
+    state?: string;
+    nonce?: string;
+  },
+  storage: AuthStorage,
+): Promise<URL> {
+  // generate a random state if not provided
+  const state = config.state ?? Math.random().toString(36).substring(2);
+  const scopes = config.scopes ?? DEFAULT_SCOPES;
+  const pkceProducer = new GenericPublicClientPKCEProducer(storage);
+  const authInitiator = new GenericAuthenticationInitiator({
+    ...config,
+    state,
+    scopes,
+    oauthServer: config.oauthServer ?? DEFAULT_AUTH_SERVER,
+    // When retrieving the PKCE challenge on the server-side, we produce it and store it in the session
+    pkceConsumer: pkceProducer,
+  });
+
+  return authInitiator.signIn();
+}

package/src/server/refresh.ts

@@ -0,0 +1,23 @@
+import type { AuthStorage, OIDCTokenResponseBody } from "@/types.js";
+import { DEFAULT_AUTH_SERVER } from "@/constants.js";
+import { GenericAuthenticationRefresher } from "@/shared/lib/GenericAuthenticationRefresher.js";
+import type { AuthConfig } from "@/server/config.ts";
+
+/**
+ * Refresh the current set of OIDC tokens
+ */
+export async function refreshTokens(
+  storage: AuthStorage,
+  config: AuthConfig,
+): Promise<OIDCTokenResponseBody> {
+  const refresher = await GenericAuthenticationRefresher.build(
+    {
+      ...config,
+      oauthServer: config.oauthServer ?? DEFAULT_AUTH_SERVER,
+    },
+    storage,
+    config.endpointOverrides,
+  );
+
+  return refresher.refreshTokens();
+}