@civic/auth 0.1.2 → 0.1.4-beta.0

package/src/reactjs/components/SignOutButton.tsx

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

@@ -1,239 +0,0 @@
-"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={{
-            cursor: "pointer",
-            display: "flex",
-            minWidth: "10rem",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: "0.5rem",
-            borderRadius: "9999px",
-            border: "1px solid #6b7280",
-            padding: "0.75rem 1rem",
-            color: "#6b7280",
-            background: "none",
-            transition: "background-color 0.2s",
-          }}
-          className={className}
-          onMouseEnter={(e) =>
-            (e.currentTarget.style.backgroundColor = "#f3f4f6")
-          }
-          onMouseLeave={(e) =>
-            (e.currentTarget.style.backgroundColor = "transparent")
-          }
-          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 style={{ listStyleType: "none", margin: 0, padding: 0 }}>
-            <li>
-              <button
-                style={{
-                  display: "block",
-                  width: "100%",
-                  padding: "0.5rem 1rem",
-                  transition: "background-color 0.2s",
-                  background: "none",
-                  border: "none",
-                  textAlign: "center",
-                  cursor: "pointer",
-                }}
-                onClick={handleSignOut}
-                onMouseEnter={(e) =>
-                  (e.currentTarget.style.backgroundColor = "#f3f4f6")
-                }
-                onMouseLeave={(e) =>
-                  (e.currentTarget.style.backgroundColor = "transparent")
-                }
-              >
-                Logout
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <button
-      ref={buttonRef}
-      data-testid="sign-in-button"
-      style={{
-        cursor: "pointer",
-        borderRadius: "9999px",
-        border: "1px solid #6b7280",
-        padding: "0.75rem 1rem",
-        background: "none",
-        transition: "background-color 0.2s",
-      }}
-      className={className}
-      onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "#f3f4f6")}
-      onMouseLeave={(e) =>
-        (e.currentTarget.style.backgroundColor = "transparent")
-      }
-      onClick={handleSignIn}
-    >
-      Sign in
-    </button>
-  );
-};
-
-export { UserButton };

package/src/reactjs/components/index.ts

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

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

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

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

@@ -1,19 +0,0 @@
-// 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

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

@@ -1,107 +0,0 @@
-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";
-import { DEFAULT_AUTH_SERVER } from "@/constants.js";
-
-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.");
-  }
-
-  get oauthServer(): string {
-    return this.authConfig.oauthServer || DEFAULT_AUTH_SERVER;
-  }
-
-  async init(): Promise<this> {
-    // resolve oauth config
-    this.endpoints = await getEndpointsWithOverrides(
-      this.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.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

@@ -1,9 +0,0 @@
-import type { Endpoints } from "@/types.ts";
-
-export type AuthConfig = {
-  clientId: string;
-  redirectUrl: string;
-  oauthServer?: string;
-  challengeUrl?: string;
-  endpointOverrides?: Partial<Endpoints> | undefined;
-};

package/src/server/index.ts

@@ -1,13 +0,0 @@
-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 type { AuthConfig } from "@/server/config.js";
-export { getUser } from "@/shared/lib/session.js";
-export { refreshTokens } from "@/server/refresh.js";

package/src/server/login.ts

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

@@ -1,23 +0,0 @@
-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();
-}