@civic/auth 0.0.1-beta.26 → 0.0.1-beta.27

package/dist/vitest.config.js

@@ -29,10 +29,10 @@ export default defineConfig({
             reportsDirectory: "../../coverage/apps/civic-auth-client",
             provider: "v8",
             thresholds: {
-                lines: 85,
-                functions: 73,
+                lines: 80,
+                functions: 70,
                 branches: 85,
-                statements: 85,
+                statements: 80,
             },
         },
     },

package/dist/vitest.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"vitest.config.js","sourceRoot":"","sources":["../vitest.config.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,eAAe,YAAY,CAAC;IAC1B,OAAO,EAAE;QACP,KAAK,EAAE;YACL,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC;SACtC;KACF;IAED,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,OAAO;QACpB,OAAO,EAAE,CAAC,uDAAuD,CAAC;QAClE,GAAG,EAAE;YACH,QAAQ,EAAE,aAAa;SACxB;QACD,SAAS,EAAE,CAAC,SAAS,CAAC;QACtB,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,oBAAoB;gBACpB,YAAY;gBACZ,aAAa;gBACb,oBAAoB;gBACpB,oBAAoB;gBACpB,cAAc;gBACd,gBAAgB;gBAChB,kBAAkB;aACnB;YACD,gBAAgB,EAAE,uCAAuC;YACzD,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE;gBACV,KAAK,EAAE,EAAE;gBACT,SAAS,EAAE,EAAE;gBACb,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE;aACf;SACF;KACF;CACF,CAAC,CAAC","sourcesContent":["/// <reference types='vitest' />\nimport { defineConfig } from \"vite\";\nimport path from \"path\";\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      \"@\": path.resolve(__dirname, \"./src\"),\n    },\n  },\n\n  test: {\n    globals: true,\n    environment: \"jsdom\",\n    include: [\"test/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}\"],\n    env: {\n      NODE_ENV: \"development\",\n    },\n    reporters: [\"default\"],\n    coverage: {\n      exclude: [\n        \"**/node_modules/**\",\n        \"**/dist/**\",\n        \"**/build/**\",\n        \"postcss.config.cjs\",\n        \"tailwind.config.js\",\n        \".eslintrc.js\",\n        \"tsup.config.ts\",\n        \"vitest.config.ts\",\n      ],\n      reportsDirectory: \"../../coverage/apps/civic-auth-client\",\n      provider: \"v8\",\n      thresholds: {\n        lines: 85,\n        functions: 73,\n        branches: 85,\n        statements: 85,\n      },\n    },\n  },\n});\n"]}
+{"version":3,"file":"vitest.config.js","sourceRoot":"","sources":["../vitest.config.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,eAAe,YAAY,CAAC;IAC1B,OAAO,EAAE;QACP,KAAK,EAAE;YACL,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC;SACtC;KACF;IAED,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,OAAO;QACpB,OAAO,EAAE,CAAC,uDAAuD,CAAC;QAClE,GAAG,EAAE;YACH,QAAQ,EAAE,aAAa;SACxB;QACD,SAAS,EAAE,CAAC,SAAS,CAAC;QACtB,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,oBAAoB;gBACpB,YAAY;gBACZ,aAAa;gBACb,oBAAoB;gBACpB,oBAAoB;gBACpB,cAAc;gBACd,gBAAgB;gBAChB,kBAAkB;aACnB;YACD,gBAAgB,EAAE,uCAAuC;YACzD,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE;gBACV,KAAK,EAAE,EAAE;gBACT,SAAS,EAAE,EAAE;gBACb,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE;aACf;SACF;KACF;CACF,CAAC,CAAC","sourcesContent":["/// <reference types='vitest' />\nimport { defineConfig } from \"vite\";\nimport path from \"path\";\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      \"@\": path.resolve(__dirname, \"./src\"),\n    },\n  },\n\n  test: {\n    globals: true,\n    environment: \"jsdom\",\n    include: [\"test/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}\"],\n    env: {\n      NODE_ENV: \"development\",\n    },\n    reporters: [\"default\"],\n    coverage: {\n      exclude: [\n        \"**/node_modules/**\",\n        \"**/dist/**\",\n        \"**/build/**\",\n        \"postcss.config.cjs\",\n        \"tailwind.config.js\",\n        \".eslintrc.js\",\n        \"tsup.config.ts\",\n        \"vitest.config.ts\",\n      ],\n      reportsDirectory: \"../../coverage/apps/civic-auth-client\",\n      provider: \"v8\",\n      thresholds: {\n        lines: 80,\n        functions: 70,\n        branches: 85,\n        statements: 80,\n      },\n    },\n  },\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civic/auth",
-  "version": "0.0.1-beta.26",
+  "version": "0.0.1-beta.27",
   "type": "module",
   "module": "dist/index.js",
   "main": "dist/index.ts",
@@ -89,8 +89,8 @@
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.2.3",
     "vitest": "^2.1.2",
-    "@repo/typescript-config": "0.0.0",
-    "@repo/eslint-config": "0.0.0"
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
   },
   "peerDependencies": {
     "next": "^14"
@@ -102,7 +102,7 @@
     "prepublish": "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/nextjs/index.ts

@@ -1,8 +1,4 @@
-export {
-  createCivicAuthPlugin,
-  defaultAuthConfig,
-  resolveAuthConfig,
-} 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/reactjs/components/UserButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useUser } from "@/reactjs/hooks/index.js";
 import type { DisplayMode } from "@/types.js";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 const ChevronDown = () => (
   <svg
@@ -45,12 +45,26 @@ const UserButton = ({
   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 (!target.closest("#civic-dropdown-container")) {
+    if (
+      buttonRef.current &&
+      dropdownRef.current &&
+      !buttonRef.current.contains(target) &&
+      !dropdownRef.current.contains(target)
+    ) {
       setIsOpen(false);
     }
   }, []);
@@ -89,11 +103,15 @@ const UserButton = ({
 
   if (user) {
     return (
-      <div style={{ position: "relative" }} id="civic-dropdown-container">
+      <div
+        style={{ position: "relative", width: "auto" }}
+        id="civic-dropdown-container"
+      >
         <button
+          ref={buttonRef}
           style={{
             display: "flex",
-            width: "100%",
+            minWidth: "10rem",
             alignItems: "center",
             justifyContent: "space-between",
             gap: "0.5rem",
@@ -104,15 +122,17 @@ const UserButton = ({
             transition: "background-color 0.2s",
           }}
           className={className}
-          onClick={() => setIsOpen((isOpen) => !isOpen)}
+          onClick={() => {
+            setIsOpen((isOpen) => !isOpen);
+          }}
         >
           {user?.picture ? (
             <span
               style={{
                 position: "relative",
                 display: "flex",
-                height: "2.5rem",
-                width: "2.5rem",
+                height: "1.5rem",
+                width: "1.5rem",
                 flexShrink: 0,
                 gap: "0.5rem",
                 overflow: "hidden",
@@ -131,16 +151,19 @@ const UserButton = ({
 
           <span>{user?.name || user?.email}</span>
 
-          {isOpen ? <ChevronUp /> : <ChevronDown />}
+          <div style={{ pointerEvents: "none" }}>
+            {isOpen ? <ChevronUp /> : <ChevronDown />}
+          </div>
         </button>
         <div
+          ref={dropdownRef}
           style={
             isOpen
               ? {
                   position: "absolute",
-                  right: 0,
+                  left: 0,
+                  width: buttonWidth || "auto",
                   marginTop: "0.5rem",
-                  width: "100%",
                   borderRadius: "0.5rem",
                   backgroundColor: "white",
                   padding: "0.5rem 0",
@@ -173,6 +196,7 @@ const UserButton = ({
 
   return (
     <button
+      ref={buttonRef}
       data-testid="sign-in-button"
       style={{
         borderRadius: "9999px",

package/src/reactjs/hooks/index.ts

@@ -1,5 +1,4 @@
 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";

package/test/unit/publicApi/__snapshots__/apiSnapshot.test.ts.snap

@@ -20,6 +20,5 @@ exports[`Auth Client Public API Snapshot > should match the previous API snapsho
   "useToken": [Function],
   "useTokenCookie": [Function],
   "useUser": [Function],
-  "useUserCookie": [Function],
 }
 `;

package/src/nextjs/client/index.ts

@@ -1,4 +0,0 @@
-export {
-  CivicNextAuthProvider as CivicAuthProvider,
-  type NextCivicAuthProviderProps as AuthProviderProps,
-} from "@/nextjs/providers/NextAuthProvider.jsx";