fix: update authentication hooks to use public config endpoints and bump version to v0.9.56

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.9.55",
+  "version": "0.9.56",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",

src/app/services/base.query.ts

@@ -14,8 +14,8 @@ const whiteList = [
   "sendRegMagicLink",
   "checkEmail",
   "checkMagicTokenValid",
-  "getGoogleAuthConfig",
-  "getGithubAuthConfig",
+  "getGoogleAuthPublicConfig",
+  "getGithubAuthPublicConfig",
   "getSMTPStatus",
   "getLoginConfig",
   "getServerVersion",
@@ -32,12 +32,21 @@ const whiteList = [
   "passkeyLoginStart",
   "passkeyLoginFinish",
 ];
-const whiteList401 = ["getAgoraVoicingList", "getAgoraChannels"];
+const whiteList401 = [
+  "getAgoraVoicingList",
+  "getAgoraChannels",
+  "getGoogleAuthConfig",
+  "getGithubAuthConfig",
+];
 const errorWhiteList = [
   "preCheckFileFromUrl",
   "getFavoriteDetails",
   "getOGInfo",
   "getArchiveMessage",
+  "getGoogleAuthPublicConfig",
+  "getGithubAuthPublicConfig",
+  "getGoogleAuthConfig",
+  "getGithubAuthConfig",
 ];
 const whiteList404 = [
   "login",

src/app/services/server.ts

@@ -91,6 +91,9 @@ export const serverApi = createApi({
     getGoogleAuthConfig: builder.query<GoogleAuthConfig, void>({
       query: () => ({ url: `/admin/google_auth/config` }),
     }),
+    getGoogleAuthPublicConfig: builder.query<GoogleAuthConfig, void>({
+      query: () => ({ url: `/admin/google_auth/public_config` }),
+    }),
     updateGoogleAuthConfig: builder.mutation<void, GoogleAuthConfig>({
       query: (data) => ({
         url: `/admin/google_auth/config`,
@@ -101,6 +104,9 @@ export const serverApi = createApi({
     getGithubAuthConfig: builder.query<GithubAuthConfig, void>({
       query: () => ({ url: `/admin/github_auth/config` }),
     }),
+    getGithubAuthPublicConfig: builder.query<Pick<GithubAuthConfig, 'client_id'>, void>({
+      query: () => ({ url: `/admin/github_auth/public_config` }),
+    }),
     updateGithubAuthConfig: builder.mutation<void, GithubAuthConfig>({
       query: (data) => ({
         url: `/admin/github_auth/config`,
@@ -485,8 +491,10 @@ export const {
   useLazyGetServerVersionQuery,
   useGetServerVersionQuery,
   useGetGithubAuthConfigQuery,
+  useGetGithubAuthPublicConfigQuery,
   useUpdateGithubAuthConfigMutation,
   useGetGoogleAuthConfigQuery,
+  useGetGoogleAuthPublicConfigQuery,
   useUpdateGoogleAuthConfigMutation,
   useGetSMTPStatusQuery,
   useSendTestEmailMutation,

src/hooks/useGithubAuthPublicConfig.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import {
+  useGetGithubAuthPublicConfigQuery,
+  useGetGithubAuthConfigQuery
+} from "@/app/services/server";
+
+export default function useGithubAuthPublicConfig() {
+  const [shouldUseFallback, setShouldUseFallback] = useState(false);
+
+  // Try public config first
+  const { data: publicData, error: publicError } = useGetGithubAuthPublicConfigQuery(undefined, {
+    refetchOnMountOrArgChange: true,
+    skip: shouldUseFallback
+  });
+
+  // Fallback to old config endpoint if public config returns 404
+  const { data: fallbackData, error: fallbackError } = useGetGithubAuthConfigQuery(undefined, {
+    refetchOnMountOrArgChange: true,
+    skip: !shouldUseFallback
+  });
+
+  useEffect(() => {
+    // If public config returns 404, switch to fallback
+    if (publicError && 'status' in publicError && publicError.status === 404) {
+      setShouldUseFallback(true);
+    }
+  }, [publicError]);
+
+  // Use public data if available, otherwise use fallback data
+  // Ignore fallback errors (401 means new server requiring auth, 404 means very old server)
+  const data = shouldUseFallback ? fallbackData : publicData;
+
+  return {
+    clientId: data?.client_id || ""
+  };
+}

src/hooks/useGoogleAuthPublicConfig.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import {
+  useGetGoogleAuthPublicConfigQuery,
+  useGetGoogleAuthConfigQuery
+} from "@/app/services/server";
+
+export default function useGoogleAuthPublicConfig() {
+  const [shouldUseFallback, setShouldUseFallback] = useState(false);
+
+  // Try public config first
+  const { data: publicData, error: publicError } = useGetGoogleAuthPublicConfigQuery(undefined, {
+    refetchOnMountOrArgChange: true,
+    skip: shouldUseFallback
+  });
+
+  // Fallback to old config endpoint if public config returns 404
+  const { data: fallbackData, error: fallbackError } = useGetGoogleAuthConfigQuery(undefined, {
+    refetchOnMountOrArgChange: true,
+    skip: !shouldUseFallback
+  });
+
+  useEffect(() => {
+    // If public config returns 404, switch to fallback
+    if (publicError && 'status' in publicError && publicError.status === 404) {
+      setShouldUseFallback(true);
+    }
+  }, [publicError]);
+
+  // Use public data if available, otherwise use fallback data
+  // Ignore fallback errors (401 means new server requiring auth, 404 means very old server)
+  const data = shouldUseFallback ? fallbackData : publicData;
+
+  return {
+    clientId: data?.client_id || ""
+  };
+}

src/routes/login/SocialLoginButtons.tsx

@@ -5,8 +5,8 @@ import { useTranslation } from "react-i18next";
 import { useGetLoginConfigQuery } from "@/app/services/server";
 import GithubLoginButton from "@/components/GithubLoginButton";
 import GoogleLoginButton from "@/components/GoogleLoginButton";
-import useGithubAuthConfig from "@/hooks/useGithubAuthConfig";
-import useGoogleAuthConfig from "@/hooks/useGoogleAuthConfig";
+import useGithubAuthPublicConfig from "@/hooks/useGithubAuthPublicConfig";
+import useGoogleAuthPublicConfig from "@/hooks/useGoogleAuthPublicConfig";
 import { useLoginMutation } from "../../app/services/auth";
 import { AuthType } from "../../types/common";
 import MetamaskLoginButton from "./MetamaskLoginButton";
@@ -19,9 +19,9 @@ type Props = {
 const SocialLoginButtons = ({ type = "login" }: Props) => {
   const { t: ct } = useTranslation();
   const [login, { isSuccess }] = useLoginMutation();
-  const { config: githubAuthConfig } = useGithubAuthConfig();
+  const { clientId: githubClientId } = useGithubAuthPublicConfig();
   const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
-  const { clientId } = useGoogleAuthConfig();
+  const { clientId } = useGoogleAuthPublicConfig();
 
   useEffect(() => {
     if (isSuccess) {
@@ -41,7 +41,7 @@ const SocialLoginButtons = ({ type = "login" }: Props) => {
     <>
       {googleLogin && <GoogleLoginButton type={type} clientId={clientId} />}
       {enableGithubLogin && (
-        <GithubLoginButton type={type} client_id={githubAuthConfig?.client_id} />
+        <GithubLoginButton type={type} client_id={githubClientId} />
       )}
       {enableMetamaskLogin && <MetamaskLoginButton type={type} login={login} />}
       {oidc.length > 0 && <OidcLoginButton type={type} issuers={oidc} />}

src/widget/Popup/Login/index.tsx

@@ -13,8 +13,8 @@ import GithubLoginButton from "../../../components/GithubLoginButton";
 import GoogleLoginButton from "../../../components/GoogleLoginButton";
 import StyledButton from "../../../components/styled/Button";
 import Input from "../../../components/styled/Input";
-import useGithubAuthConfig from "../../../hooks/useGithubAuthConfig";
-import useGoogleAuthConfig from "../../../hooks/useGoogleAuthConfig";
+import useGithubAuthPublicConfig from "../../../hooks/useGithubAuthPublicConfig";
+import useGoogleAuthPublicConfig from "../../../hooks/useGoogleAuthPublicConfig";
 import { useWidget } from "../../WidgetContext";
 import Loading from "@/components/Loading";
 import { WIDGET_USER_PWD } from "@/app/config";
@@ -26,8 +26,8 @@ const Login = () => {
   const { t } = useTranslation("widget");
   const dispatch = useDispatch();
   const { color, fgColor, from, autoReg, token, id } = useWidget();
-  const { clientId } = useGoogleAuthConfig();
-  const { config: githubAuthConfig } = useGithubAuthConfig();
+  const { clientId } = useGoogleAuthPublicConfig();
+  const { clientId: githubClientId } = useGithubAuthPublicConfig();
   const [register, { isLoading, isSuccess, data, error }] = useRegisterMutation();
   const [loginByToken, { isLoading: isLogging, isError: tokenLoginError }] = useLoginMutation();
   //  const [login]= useLoginMutation();
@@ -121,7 +121,7 @@ const Login = () => {
           {hasSocialLogins && <Divider content="OR" />}
           {googleLogin && <GoogleLoginButton clientId={clientId} />}
           {enableGithubLogin && (
-            <GithubLoginButton client_id={githubAuthConfig?.client_id} source="widget" />
+            <GithubLoginButton client_id={githubClientId} source="widget" />
           )}
         </form>
       </div>