From cd09a5649158f7c24ebb36696b7fd058cb0c11e1 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Sun, 29 Sep 2024 20:34:27 -0400
Subject: [PATCH] fix hydration error from html mismatch (#16876)

---
 apps/web/modules/auth/login-view.tsx |  4 +---
 packages/lib/hooks/useLastUsed.tsx   | 19 +++++++++++++------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/web/modules/auth/login-view.tsx b/apps/web/modules/auth/login-view.tsx
index b8dd5afde2..c8341098b7 100644
--- a/apps/web/modules/auth/login-view.tsx
+++ b/apps/web/modules/auth/login-view.tsx
@@ -281,9 +281,7 @@ PageProps & WithNonceProps<{}>) {
                 disabled={formState.isSubmitting}
                 className="w-full justify-center">
                 <span>{twoFactorRequired ? t("submit") : t("sign_in")}</span>
-                {lastUsed === "credentials" && (
-                  <span className="absolute right-3 text-xs text-gray-600">{t("last_used")}</span>
-                )}
+                {lastUsed === "credentials" && <LastUsed className="text-gray-600" />}
               </Button>
             </div>
           </form>
diff --git a/packages/lib/hooks/useLastUsed.tsx b/packages/lib/hooks/useLastUsed.tsx
index 1c3333eb4c..e6ba6cc2b3 100644
--- a/packages/lib/hooks/useLastUsed.tsx
+++ b/packages/lib/hooks/useLastUsed.tsx
@@ -1,15 +1,20 @@
 import { useState, useEffect } from "react";
 
+import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
 
-type LoginType = "saml" | "google" | "credentials" | undefined;
+type LoginType = "saml" | "google" | "credentials";
 
 export function useLastUsed() {
-  const [lastUsed, setLastUsed] = useState<LoginType>(() => {
+  const [lastUsed, setLastUsed] = useState<LoginType>();
+
+  useEffect(() => {
     const storedValue = localStorage.getItem("last_cal_login");
-    return storedValue ? (storedValue as LoginType) : undefined;
-  });
+    if (storedValue) {
+      setLastUsed(storedValue as LoginType);
+    }
+  }, []);
 
   useEffect(() => {
     if (lastUsed) {
@@ -22,7 +27,9 @@ export function useLastUsed() {
   return [lastUsed, setLastUsed] as const;
 }
 
-export const LastUsed = () => {
+export const LastUsed = ({ className }: { className?: string }) => {
   const { t } = useLocale();
-  return <span className="text-subtle absolute right-3 text-xs">{t("last_used")}</span>;
+  return (
+    <span className={classNames("text-subtle absolute right-3 text-xs", className)}>{t("last_used")}</span>
+  );
 };