From c8b82ece055efca32050f39145a93f1d195479de Mon Sep 17 00:00:00 2001
From: Daniel <revogabe.dev@gmail.com>
Date: Fri, 21 Mar 2025 18:33:55 -0300
Subject: [PATCH 1/2] fix: update OAuthButton to accept button props and handle
 disabled state

---
 apps/dashboard/app/auth/oauth-button.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/app/auth/oauth-button.tsx b/apps/dashboard/app/auth/oauth-button.tsx
index 2b680cebf0..4bafd657ea 100644
--- a/apps/dashboard/app/auth/oauth-button.tsx
+++ b/apps/dashboard/app/auth/oauth-button.tsx
@@ -1,15 +1,15 @@
 "use client";
 
-import type { PropsWithChildren } from "react";
+import type { ComponentProps } from "react";
 
-type Props = {
-  onClick: () => Promise<unknown>;
-};
-export const OAuthButton: React.FC<PropsWithChildren<Props>> = ({ onClick, children }) => {
+type ButtonElementProps = ComponentProps<"button">;
+
+export const OAuthButton: React.FC<ButtonElementProps> = ({ onClick, disabled, children }) => {
   return (
     <button
       type="button"
-      className="relative flex items-center justify-center h-10 gap-2 px-4 text-sm font-semibold text-white duration-500 border rounded-lg bg-white/10 hover:bg-white hover:text-black border-white/10"
+      disabled={disabled}
+      className="relative flex items-center justify-center h-10 gap-2 px-4 text-sm font-semibold text-white duration-500 border rounded-lg bg-white/10 enabled:hover:bg-white enabled:hover:text-black border-white/10 disabled:opacity-50 disabled:cursor-not-allowed"
       onClick={onClick}
     >
       {children}

From d9b8014a236364563c264d7b114c9387757dd394 Mon Sep 17 00:00:00 2001
From: Daniel <revogabe.dev@gmail.com>
Date: Fri, 21 Mar 2025 18:34:57 -0300
Subject: [PATCH 2/2] fix: hydratation error on last-used component

---
 apps/dashboard/app/auth/sign-in/oauth-signin.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/app/auth/sign-in/oauth-signin.tsx b/apps/dashboard/app/auth/sign-in/oauth-signin.tsx
index a51d6c6267..a0793bee5e 100644
--- a/apps/dashboard/app/auth/sign-in/oauth-signin.tsx
+++ b/apps/dashboard/app/auth/sign-in/oauth-signin.tsx
@@ -5,10 +5,12 @@ import { toast } from "@/components/ui/toaster";
 import { useSignIn } from "@clerk/nextjs";
 import type { OAuthStrategy } from "@clerk/types";
 import * as React from "react";
+import { useIsClient } from "usehooks-ts";
 import { OAuthButton } from "../oauth-button";
 import { LastUsed, useLastUsed } from "./last_used";
 
 export const OAuthSignIn: React.FC = () => {
+  const isClient = useIsClient();
   const [isLoading, setIsLoading] = React.useState<OAuthStrategy | null>(null);
   const { signIn, isLoaded: signInLoaded } = useSignIn();
   const [lastUsed, setLastUsed] = useLastUsed();
@@ -35,21 +37,27 @@ export const OAuthSignIn: React.FC = () => {
 
   return (
     <div className="flex flex-col gap-2">
-      <OAuthButton onClick={() => oauthSignIn("oauth_github")}>
+      <OAuthButton
+        disabled={isLoading === "oauth_github"}
+        onClick={() => oauthSignIn("oauth_github")}
+      >
         {isLoading === "oauth_github" ? (
           <Loading className="w-6 h-6" />
         ) : (
           <GitHub className="w-6 h-6" />
         )}
-        GitHub {lastUsed === "github" ? <LastUsed /> : null}
+        GitHub {isClient && lastUsed === "github" ? <LastUsed /> : null}
       </OAuthButton>
-      <OAuthButton onClick={() => oauthSignIn("oauth_google")}>
+      <OAuthButton
+        disabled={isLoading === "oauth_google"}
+        onClick={() => oauthSignIn("oauth_google")}
+      >
         {isLoading === "oauth_google" ? (
           <Loading className="w-6 h-6" />
         ) : (
           <Google className="w-6 h-6" />
         )}
-        Google {lastUsed === "google" ? <LastUsed /> : null}
+        Google {isClient && lastUsed === "google" ? <LastUsed /> : null}
       </OAuthButton>
     </div>
   );