@sparkstudio/authentication-ui 1.0.28 → 1.0.30

package/dist/index.cjs

@@ -177,7 +177,10 @@ function UserProvider({
 }) {
   const [user, setUserState] = (0, import_react.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const hasFetchedRef = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
+    if (hasFetchedRef.current) return;
+    hasFetchedRef.current = true;
     const fetchUser = async () => {
       setIsLoading(true);
       try {
@@ -189,20 +192,19 @@ function UserProvider({
           localStorage.setItem("auth_token", authResponseDTO?.Token ?? "");
           const user2 = authResponseDTO?.User ?? null;
           setUser(user2);
-          onLoginSuccess?.(user2);
         } else {
           throw new Error("Authenticated user in cache does not exist.");
         }
       } catch (error) {
         console.warn("No user logged in", error);
-        setUserState(null);
+        setUser(null);
         onLoginFailed?.(error);
       } finally {
         setIsLoading(false);
       }
     };
     fetchUser();
-  }, [authenticationUrl]);
+  }, [authenticationUrl, accountsUrl]);
   const setUser = (user2) => {
     setUserState(user2);
     if (user2) {
@@ -222,7 +224,8 @@ function UserProvider({
       );
       onLogoutFailed?.(err);
     }
-    setUserState(null);
+    setUser(null);
+    setIsLoading(false);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     UserContext.Provider,
@@ -279,8 +282,9 @@ var import_common_ui = require("@sparkstudio/common-ui");
 var import_accounts_sdk2 = require("@sparkstudio/accounts-sdk");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function LoginButton({ onLogin, onLoginFailed }) {
-  const { setUser, authenticationUrl, accountsUrl } = useUser();
-  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const { setUser, authenticationUrl, accountsUrl, isLoading } = useUser();
+  const [buttonLoading, setButtonLoading] = (0, import_react2.useState)(false);
+  const loading = isLoading || buttonLoading;
   const login = (0, import_google2.useGoogleLogin)({
     flow: "implicit",
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -301,29 +305,29 @@ function LoginButton({ onLogin, onLoginFailed }) {
         console.error("\u{1F534} Login failed (Google or backend SignIn)", error);
         onLoginFailed?.(error);
       } finally {
-        setLoading(false);
+        setButtonLoading(false);
       }
     },
     onError: (error) => {
       console.error("\u274C Google OAuth Login Failed", error);
       onLoginFailed?.(error);
-      setLoading(false);
+      setButtonLoading(false);
     },
     onNonOAuthError: (nonOAuthError) => {
       console.error("\u26A0\uFE0F Google Non-OAuth error", nonOAuthError);
       onLoginFailed?.(nonOAuthError);
-      setLoading(false);
+      setButtonLoading(false);
     }
   });
   const handleClick = () => {
     if (loading) return;
-    setLoading(true);
+    setButtonLoading(true);
     try {
       login();
     } catch (err) {
       console.error("Error starting Google login", err);
       onLoginFailed?.(err);
-      setLoading(false);
+      setButtonLoading(false);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_common_ui.Button, { onClick: handleClick, disabled: loading, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
@@ -342,7 +346,8 @@ function LoginButton({ onLogin, onLoginFailed }) {
       {
         src: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Google_Favicon_2025.svg/960px-Google_Favicon_2025.svg.png",
         alt: "Google",
-        style: { width: "21px", height: "21px", margin: 0, padding: 0 }
+        style: { width: "21px", height: "21px", margin: 0, padding: 0 },
+        className: "rounded-circle"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "d-none d-sm-inline ms-2", children: "Login" })
@@ -374,7 +379,8 @@ function UserInfoCard({ onLogin, onLogout, onLoginFailed }) {
           {
             src: user.ProfilePicture,
             alt: "Profile",
-            style: { width: "21px", height: "21px", margin: 0, padding: 0 }
+            style: { width: "21px", height: "21px", margin: 0, padding: 0 },
+            className: "rounded-circle"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "d-none d-sm-inline ms-2", children: "Logout" })

package/dist/index.js

@@ -127,9 +127,12 @@ import {
   createContext,
   useContext,
   useState,
-  useEffect
+  useEffect,
+  useRef
 } from "react";
-import { SparkStudioAccountsSDK } from "@sparkstudio/accounts-sdk";
+import {
+  SparkStudioAccountsSDK
+} from "@sparkstudio/accounts-sdk";
 import { jsx } from "react/jsx-runtime";
 var UserContext = createContext(void 0);
 function UserProvider({
@@ -143,7 +146,10 @@ function UserProvider({
 }) {
   const [user, setUserState] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
+  const hasFetchedRef = useRef(false);
   useEffect(() => {
+    if (hasFetchedRef.current) return;
+    hasFetchedRef.current = true;
     const fetchUser = async () => {
       setIsLoading(true);
       try {
@@ -155,20 +161,19 @@ function UserProvider({
           localStorage.setItem("auth_token", authResponseDTO?.Token ?? "");
           const user2 = authResponseDTO?.User ?? null;
           setUser(user2);
-          onLoginSuccess?.(user2);
         } else {
           throw new Error("Authenticated user in cache does not exist.");
         }
       } catch (error) {
         console.warn("No user logged in", error);
-        setUserState(null);
+        setUser(null);
         onLoginFailed?.(error);
       } finally {
         setIsLoading(false);
       }
     };
     fetchUser();
-  }, [authenticationUrl]);
+  }, [authenticationUrl, accountsUrl]);
   const setUser = (user2) => {
     setUserState(user2);
     if (user2) {
@@ -188,7 +193,8 @@ function UserProvider({
       );
       onLogoutFailed?.(err);
     }
-    setUserState(null);
+    setUser(null);
+    setIsLoading(false);
   };
   return /* @__PURE__ */ jsx(
     UserContext.Provider,
@@ -242,11 +248,14 @@ function AuthenticatorProvider({
 import { useState as useState2 } from "react";
 import { useGoogleLogin } from "@react-oauth/google";
 import { Button } from "@sparkstudio/common-ui";
-import { SparkStudioAccountsSDK as SparkStudioAccountsSDK2 } from "@sparkstudio/accounts-sdk";
+import {
+  SparkStudioAccountsSDK as SparkStudioAccountsSDK2
+} from "@sparkstudio/accounts-sdk";
 import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function LoginButton({ onLogin, onLoginFailed }) {
-  const { setUser, authenticationUrl, accountsUrl } = useUser();
-  const [loading, setLoading] = useState2(false);
+  const { setUser, authenticationUrl, accountsUrl, isLoading } = useUser();
+  const [buttonLoading, setButtonLoading] = useState2(false);
+  const loading = isLoading || buttonLoading;
   const login = useGoogleLogin({
     flow: "implicit",
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -267,29 +276,29 @@ function LoginButton({ onLogin, onLoginFailed }) {
         console.error("\u{1F534} Login failed (Google or backend SignIn)", error);
         onLoginFailed?.(error);
       } finally {
-        setLoading(false);
+        setButtonLoading(false);
       }
     },
     onError: (error) => {
       console.error("\u274C Google OAuth Login Failed", error);
       onLoginFailed?.(error);
-      setLoading(false);
+      setButtonLoading(false);
     },
     onNonOAuthError: (nonOAuthError) => {
       console.error("\u26A0\uFE0F Google Non-OAuth error", nonOAuthError);
       onLoginFailed?.(nonOAuthError);
-      setLoading(false);
+      setButtonLoading(false);
     }
   });
   const handleClick = () => {
     if (loading) return;
-    setLoading(true);
+    setButtonLoading(true);
     try {
       login();
     } catch (err) {
       console.error("Error starting Google login", err);
       onLoginFailed?.(err);
-      setLoading(false);
+      setButtonLoading(false);
     }
   };
   return /* @__PURE__ */ jsx3(Button, { onClick: handleClick, disabled: loading, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -308,7 +317,8 @@ function LoginButton({ onLogin, onLoginFailed }) {
       {
         src: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Google_Favicon_2025.svg/960px-Google_Favicon_2025.svg.png",
         alt: "Google",
-        style: { width: "21px", height: "21px", margin: 0, padding: 0 }
+        style: { width: "21px", height: "21px", margin: 0, padding: 0 },
+        className: "rounded-circle"
       }
     ),
     /* @__PURE__ */ jsx3("span", { className: "d-none d-sm-inline ms-2", children: "Login" })
@@ -340,7 +350,8 @@ function UserInfoCard({ onLogin, onLogout, onLoginFailed }) {
           {
             src: user.ProfilePicture,
             alt: "Profile",
-            style: { width: "21px", height: "21px", margin: 0, padding: 0 }
+            style: { width: "21px", height: "21px", margin: 0, padding: 0 },
+            className: "rounded-circle"
           }
         ),
         /* @__PURE__ */ jsx4("span", { className: "d-none d-sm-inline ms-2", children: "Logout" })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/authentication-ui",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -37,8 +37,8 @@
   "dependencies": {
     "@react-oauth/google": "^0.13.4",
     "@sparkstudio/accounts-sdk": "^1.1.73",
-    "@sparkstudio/accounts-ui": "^1.1.73",
-    "@sparkstudio/common-ui": "^1.0.5",
+    "@sparkstudio/accounts-ui": "^1.1.78",
+    "@sparkstudio/common-ui": "^1.0.29",
     "rimraf": "^6.1.2"
   },
   "devDependencies": {