@civic/auth 0.0.1-beta.3 → 0.0.1-beta.31

package/src/reactjs/components/SignOutButton.tsx

@@ -0,0 +1,24 @@
+"use client";
+import React from "react";
+import { useUser } from "@/reactjs/hooks/useUser.js";
+
+const SignOutButton = ({ className }: { className?: string }) => {
+  const { signOut } = useUser();
+
+  return (
+    <button
+      style={{
+        borderRadius: "9999px",
+        border: "1px solid #6b7280",
+        padding: "0.75rem 1rem",
+        transition: "background-color 0.2s",
+      }}
+      className={className}
+      onClick={() => signOut()}
+    >
+      Sign Out
+    </button>
+  );
+};
+
+export { SignOutButton };

package/src/reactjs/components/UserButton.tsx

@@ -0,0 +1,215 @@
+"use client";
+import { useUser } from "@/reactjs/hooks/index.js";
+import type { DisplayMode } from "@/types.js";
+import React, { useCallback, useEffect, useRef, 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 [buttonWidth, setButtonWidth] = useState<number | null>(null);
+  const { user, signIn, signOut } = useUser();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (buttonRef.current) {
+      setButtonWidth(buttonRef.current.offsetWidth);
+    }
+  }, [isOpen]);
+
+  const handleClickOutside = useCallback((event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+
+    if (
+      buttonRef.current &&
+      dropdownRef.current &&
+      !buttonRef.current.contains(target) &&
+      !dropdownRef.current.contains(target)
+    ) {
+      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
+        style={{ position: "relative", width: "auto" }}
+        id="civic-dropdown-container"
+      >
+        <button
+          ref={buttonRef}
+          style={{
+            display: "flex",
+            minWidth: "10rem",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "0.5rem",
+            borderRadius: "9999px",
+            border: "1px solid #6b7280",
+            padding: "0.75rem 1rem",
+            color: "#6b7280",
+            transition: "background-color 0.2s",
+          }}
+          className={className}
+          onClick={() => {
+            setIsOpen((isOpen) => !isOpen);
+          }}
+        >
+          {user?.picture ? (
+            <span
+              style={{
+                position: "relative",
+                display: "flex",
+                height: "1.5rem",
+                width: "1.5rem",
+                flexShrink: 0,
+                gap: "0.5rem",
+                overflow: "hidden",
+                borderRadius: "9999px",
+              }}
+            >
+              <img
+                style={{ height: "100%", width: "100%", objectFit: "cover" }}
+                src={user.picture}
+                alt={user?.name || user?.email}
+              />
+            </span>
+          ) : (
+            <div />
+          )}
+
+          <span>{user?.name || user?.email}</span>
+
+          <div style={{ pointerEvents: "none" }}>
+            {isOpen ? <ChevronUp /> : <ChevronDown />}
+          </div>
+        </button>
+        <div
+          ref={dropdownRef}
+          style={
+            isOpen
+              ? {
+                  position: "absolute",
+                  left: 0,
+                  width: buttonWidth || "auto",
+                  marginTop: "0.5rem",
+                  borderRadius: "0.5rem",
+                  backgroundColor: "white",
+                  padding: "0.5rem 0",
+                  color: "#6b7280",
+                  boxShadow:
+                    "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+                }
+              : { display: "none" }
+          }
+        >
+          <ul>
+            <li>
+              <button
+                style={{
+                  display: "block",
+                  width: "100%",
+                  padding: "0.5rem 1rem",
+                  transition: "background-color 0.2s",
+                }}
+                onClick={handleSignOut}
+              >
+                Logout
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      ref={buttonRef}
+      data-testid="sign-in-button"
+      style={{
+        borderRadius: "9999px",
+        border: "1px solid #6b7280",
+        padding: "0.75rem 1rem",
+        transition: "background-color 0.2s",
+      }}
+      className={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,6 @@
+export { useUser } from "@/reactjs/hooks/useUser.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 { 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,102 @@
+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>,
+  ) {
+    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
+    );
+
+    await storeTokens(this.storage, tokens);
+
+    return tokens;
+  }
+
+  async getSessionData(): Promise<SessionData | null> {
+    const storageData = await 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,59 @@
+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 async function isLoggedIn(storage: AuthStorage): Promise<boolean> {
+  return !!(await storage.get("id_token"));
+}
+
+export async function buildLoginUrl(
+  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
+  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();
+}