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

package/src/nextjs/providers/NextAuthProvider.tsx

@@ -0,0 +1,87 @@
+"use client";
+/**
+ * A very small context provider for the user object - it takes the user object from the cookie and provides it to the app.
+ */
+import React, { useEffect, useState } from "react";
+import type { AuthProviderProps } from "@/shared/providers/AuthProvider.js";
+import { AuthProvider } from "@/shared/providers/AuthProvider.js";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { User } from "@/types.js";
+import { resolveAuthConfig } from "@/nextjs/config.js";
+import { resolveCallbackUrl } from "@/nextjs/utils.js";
+import { ConfidentialClientPKCEConsumer } from "@/services/PKCE.js";
+import { NextjsClientStorage } from "@/nextjs/cookies.js";
+import { UserProvider } from "@/shared/providers/UserProvider.js";
+import { OAuthTokens } from "@/shared/lib/types.js";
+import { useUserCookie } from "@/nextjs/hooks/useUserCookie.js";
+import { useTokenCookie } from "@/nextjs/hooks/index.js";
+
+const queryClient = new QueryClient();
+
+type NextCivicAuthProviderProps = Omit<AuthProviderProps, "clientId">;
+
+const CivicNextAuthProviderInternal = ({
+  children,
+  ...props
+}: NextCivicAuthProviderProps) => {
+  const [redirectUrl, setRedirectUrl] = useState<string>("");
+  const resolvedConfig = resolveAuthConfig();
+  const { clientId, oauthServer, callbackUrl, challengeUrl, logoutUrl } =
+    resolvedConfig;
+
+  useEffect(() => {
+    if (typeof globalThis.window !== "undefined") {
+      const appUrl = globalThis.window.location.origin;
+      setRedirectUrl(resolveCallbackUrl(resolvedConfig, appUrl));
+    }
+  }, [callbackUrl, resolvedConfig]);
+
+  const user = useUserCookie();
+  const idToken = useTokenCookie(OAuthTokens.ID_TOKEN);
+  const combinedUser = user ? ({ ...(user || {}), idToken } as User) : null;
+  const sessionData = {
+    authenticated: !!user,
+    ...(idToken ? { idToken } : {}),
+  };
+  const signOut = async (): Promise<void> => {
+    if (props.onSignOut) {
+      await props.onSignOut();
+    }
+    const appUrl = globalThis.window.location.origin;
+    window.location.href = `${logoutUrl}?appUrl=${appUrl}`;
+    return;
+  };
+  return (
+    <AuthProvider
+      {...props}
+      redirectUrl={redirectUrl}
+      config={{ oauthServer }}
+      clientId={clientId}
+      pkceConsumer={new ConfidentialClientPKCEConsumer(challengeUrl)}
+      sessionData={sessionData}
+    >
+      <UserProvider
+        storage={new NextjsClientStorage()}
+        user={combinedUser}
+        signOut={signOut}
+      >
+        {children}
+      </UserProvider>
+    </AuthProvider>
+  );
+};
+
+const CivicNextAuthProvider = ({
+  children,
+  ...props
+}: NextCivicAuthProviderProps) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <CivicNextAuthProviderInternal {...props}>
+        {children}
+      </CivicNextAuthProviderInternal>
+    </QueryClientProvider>
+  );
+};
+
+export { CivicNextAuthProvider, type NextCivicAuthProviderProps };

package/src/nextjs/routeHandler.ts

@@ -0,0 +1,297 @@
+import type { NextRequest } from "next/server.js";
+import { NextResponse } from "next/server.js";
+import { revalidatePath } from "next/cache.js";
+import type { AuthConfig } from "@/nextjs/config.js";
+import { resolveAuthConfig } from "@/nextjs/config.js";
+import { loggers } from "@/lib/logger.js";
+import {
+  clearAuthCookies,
+  NextjsClientStorage,
+  NextjsCookieStorage,
+} from "@/nextjs/cookies.js";
+import { GenericPublicClientPKCEProducer } from "@/services/PKCE.js";
+import { resolveOAuthAccessCode } from "@/server/login.js";
+import { getUser } from "@/shared/lib/session.js";
+import { resolveCallbackUrl } from "@/nextjs/utils.js";
+import { GenericUserSession } from "@/shared/lib/UserSession.js";
+import {
+  TOKEN_EXCHANGE_SUCCESS_TEXT,
+  TOKEN_EXCHANGE_TRIGGER_TEXT,
+} from "@/constants.js";
+import { serverTokenExchangeFromState } from "@/lib/oauth.js";
+import { CodeVerifier } from "@/shared/lib/types.js";
+
+const logger = loggers.nextjs.handlers.auth;
+
+class AuthError extends Error {
+  constructor(
+    message: string,
+    public readonly status: number = 401,
+  ) {
+    super(message);
+    this.name = "AuthError";
+  }
+}
+
+/**
+ * create a code verifier and challenge for PKCE
+ * saving the verifier in a cookie for later use
+ * @returns {Promise<NextResponse>}
+ */
+async function handleChallenge(
+  request: NextRequest,
+  config: AuthConfig,
+): Promise<NextResponse> {
+  const cookieStorage = new NextjsCookieStorage(config.cookies?.tokens ?? {});
+  const pkceProducer = new GenericPublicClientPKCEProducer(cookieStorage);
+
+  const challenge = await pkceProducer.getCodeChallenge();
+  const appUrl = request.nextUrl.searchParams.get("appUrl");
+  if (appUrl) {
+    cookieStorage.set(CodeVerifier.APP_URL, appUrl);
+  }
+  return NextResponse.json({ status: "success", challenge });
+}
+
+async function performTokenExchangeAndSetCookies(
+  request: NextRequest,
+  config: AuthConfig,
+  code: string,
+  state: string,
+  appUrl: string,
+) {
+  const resolvedConfigs = resolveAuthConfig(config);
+  const cookieStorage = new NextjsCookieStorage(resolvedConfigs.cookies.tokens);
+
+  const callbackUrl = resolveCallbackUrl(resolvedConfigs, appUrl);
+  try {
+    await resolveOAuthAccessCode(code, state, cookieStorage, {
+      ...resolvedConfigs,
+      redirectUrl: callbackUrl,
+    });
+  } catch (error) {
+    logger.error("Token exchange failed:", error);
+    throw new AuthError("Failed to authenticate user", 401);
+  }
+
+  const user = await getUser(cookieStorage);
+  if (!user) {
+    throw new AuthError("Failed to get user info", 401);
+  }
+
+  const clientStorage = new NextjsClientStorage();
+  const userSession = new GenericUserSession(clientStorage);
+  userSession.set(user);
+}
+async function handleCallback(
+  request: NextRequest,
+  config: AuthConfig,
+): Promise<NextResponse> {
+  const resolvedConfigs = resolveAuthConfig(config);
+  console.log("handleCallback", { request, resolvedConfigs });
+  const code = request.nextUrl.searchParams.get("code");
+  const state = request.nextUrl.searchParams.get("state") || "";
+  if (!code || !state) throw new AuthError("Bad parameters", 400);
+
+  // appUrl is passed from the client to the server in the query string
+  // this is necessary because the server does not have access to the client's window.location.origin
+  // and can not accurately determine the appUrl (specially if the app is behind a reverse proxy)
+  const appUrl =
+    request.cookies.get(CodeVerifier.APP_URL)?.value ||
+    request.nextUrl.searchParams.get("appUrl");
+
+  // If we have a code_verifier cookie and the appUrl, we can do a token exchange.
+  // Otherwise, just render an empty page.
+  // The initial redirect back from the auth server does not send cookies, because the redirect is from a 3rd-party domain.
+  // The client will make an additional call to this route with cookies included, at which point we do the token exchange.
+  console.log("handleCallback", {
+    code,
+    state,
+    appUrl,
+  });
+
+  const codeVerifier = request.cookies.get(CodeVerifier.COOKIE_NAME);
+
+  if (!codeVerifier || !appUrl) {
+    console.log("handleCallback no code_verifier found", {
+      state,
+      serverTokenExchange: serverTokenExchangeFromState(`${state}`),
+    });
+    let response = new NextResponse(
+      `<html><body><span style="display:none">${TOKEN_EXCHANGE_TRIGGER_TEXT}</span></body></html>`,
+    );
+
+    // in server-side token exchange mode we need to launch a page that will trigger the token exchange
+    // from the same domain, allowing it access to the code_verifier cookie
+    // we only need to do this in redirect mode, as the iframe already triggers a client-side token exchange
+    // if no code-verifier cookie is found
+    if (state && serverTokenExchangeFromState(state)) {
+      console.log(
+        "handleCallback serverTokenExchangeFromState, launching redirect page...",
+        {
+          requestUrl: request.url,
+          configCallbackUrl: resolvedConfigs.callbackUrl,
+        },
+      );
+      // we need to replace the URL with resolved config in case the server is hosted
+      // behind a reverse proxy or load balancer
+      const requestUrl = new URL(request.url);
+      const fetchUrl = `${resolvedConfigs.callbackUrl}?${requestUrl.searchParams.toString()}&sameDomainServerTokenExchange=true`;
+      response = new NextResponse(
+        `<html>
+            <body>
+                <span style="display:none">
+                    <script>
+                        window.onload = function () {
+                            const appUrl = globalThis.window?.location?.origin;
+                            fetch('${fetchUrl}&appUrl=' + appUrl).then((response) => {
+                                response.json().then((jsonResponse) => {
+                                    if (jsonResponse.redirectUrl) {
+                                        window.location.href = jsonResponse.redirectUrl;
+                                    }
+                                });
+                            });
+                        };
+                    </script>
+                </span>
+            </body>
+        </html>
+        `,
+      );
+    }
+    response.headers.set("Content-Type", "text/html; charset=utf-8");
+    console.log(
+      `handleCallback no code_verifier found, returning ${TOKEN_EXCHANGE_TRIGGER_TEXT}`,
+    );
+    return response;
+  }
+
+  await performTokenExchangeAndSetCookies(
+    request,
+    resolvedConfigs,
+    code,
+    state,
+    appUrl,
+  );
+
+  if (request.url.includes("sameDomainServerTokenExchange=true")) {
+    console.log(
+      "handleCallback sameDomainServerTokenExchange = true, returnining redirectUrl",
+      appUrl,
+    );
+    return NextResponse.json({
+      status: "success",
+      redirectUrl: appUrl,
+    });
+  }
+
+  // this is the case where a 'normal' redirect is happening
+  if (serverTokenExchangeFromState(state)) {
+    console.log(
+      "handleCallback serverTokenExchangeFromState, redirect to appUrl",
+      appUrl,
+    );
+    if (!appUrl) {
+      throw new Error("appUrl undefined. Cannot redirect.");
+    }
+    return NextResponse.redirect(`${appUrl}`);
+  }
+  // return an empty HTML response so the iframe doesn't show any response
+  // in the short moment between the redirect and the parent window
+  // acknowledging the redirect and closing the iframe
+  const response = new NextResponse(
+    `<html><span style="display:none">${TOKEN_EXCHANGE_SUCCESS_TEXT}</span></html>`,
+  );
+  response.headers.set("Content-Type", "text/html; charset=utf-8");
+  return response;
+}
+
+/**
+ * If redirectPath is an absolute path, return it as-is.
+ * Otherwise for relative paths, append it to the current domain.
+ * @param redirectPath
+ * @returns
+ */
+const getAbsoluteRedirectPath = (
+  redirectPath: string,
+  currentBasePath: string,
+) => new URL(redirectPath, currentBasePath).href;
+
+export async function handleLogout(
+  request: NextRequest,
+  config: AuthConfig,
+): Promise<NextResponse> {
+  const resolvedConfigs = resolveAuthConfig(config);
+  const defaultRedirectPath = resolvedConfigs.loginUrl ?? "/";
+  const redirectTarget =
+    new URL(request.url).searchParams.get("redirect") || defaultRedirectPath;
+
+  const isAbsoluteRedirect = /^(https?:\/\/|www\.).+/i.test(redirectTarget);
+
+  const appUrl = request.nextUrl.searchParams.get("appUrl");
+
+  const finalRedirectUrl = isAbsoluteRedirect
+    ? redirectTarget
+    : getAbsoluteRedirectPath(
+        redirectTarget,
+        new URL(appUrl ?? request.url).origin,
+      );
+
+  const response = NextResponse.redirect(finalRedirectUrl);
+
+  await clearAuthCookies(config);
+
+  try {
+    revalidatePath(isAbsoluteRedirect ? finalRedirectUrl : redirectTarget);
+  } catch (error) {
+    logger.warn("Failed to revalidate path after logout:", error);
+  }
+
+  return response;
+}
+
+/**
+ * Creates an authentication handler for Next.js API routes
+ *
+ * Usage:
+ * ```ts
+ * // app/api/auth/[...civicauth]/route.ts
+ * import { handler } from '@civic/auth/nextjs'
+ * export const GET = handler({
+ *   // optional config overrides
+ * })
+ * ```
+ */
+export const handler =
+  (authConfig = {}) =>
+  async (request: NextRequest): Promise<NextResponse> => {
+    const config = resolveAuthConfig(authConfig);
+
+    try {
+      const pathname = request.nextUrl.pathname;
+      const pathSegments = pathname.split("/");
+      const lastSegment = pathSegments[pathSegments.length - 1];
+
+      switch (lastSegment) {
+        case "challenge":
+          return await handleChallenge(request, config);
+        case "callback":
+          return await handleCallback(request, config);
+        case "logout":
+          return await handleLogout(request, config);
+        default:
+          throw new AuthError(`Invalid auth route: ${pathname}`, 404);
+      }
+    } catch (error) {
+      logger.error("Auth handler error:", error);
+
+      const status = error instanceof AuthError ? error.status : 500;
+      const message =
+        error instanceof Error ? error.message : "Authentication failed";
+
+      const response = NextResponse.json({ error: message }, { status });
+
+      clearAuthCookies(config);
+      return response;
+    }
+  };

package/src/nextjs/utils.ts

@@ -0,0 +1,9 @@
+import type { AuthConfigWithDefaults } from "@/nextjs/config.js";
+
+export const resolveCallbackUrl = (
+  config: AuthConfigWithDefaults,
+  baseUrl?: string,
+): string => {
+  const callbackUrl = new URL(config?.callbackUrl, baseUrl).toString();
+  return callbackUrl.toString();
+};

package/src/reactjs/components/SignInButton.tsx

@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import type { DisplayMode } from "@/types.js";
+import { useUser } from "@/reactjs/hooks/useUser.js";
+
+const SignInButton = ({
+  displayMode,
+  className,
+}: {
+  displayMode?: DisplayMode;
+  className?: string;
+}) => {
+  const { signIn } = useUser();
+
+  return (
+    <button
+      data-testid="sign-in-button"
+      style={{
+        borderRadius: "9999px",
+        border: "1px solid #6b7280",
+        padding: "0.75rem 1rem",
+        transition: "background-color 0.2s",
+      }}
+      className={className}
+      onClick={() => signIn(displayMode)}
+    >
+      Sign In
+    </button>
+  );
+};
+
+export { SignInButton };

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 };