chore(social-login): disable social login buttons when env vars are not set (#7238)

Author: paabloLC

ui/app/(auth)/sign-in/page.tsx

@@ -1,7 +1,14 @@
 import { AuthForm } from "@/components/auth/oss";
+import { isGithubOAuthEnabled, isGoogleOAuthEnabled } from "@/lib/helper";
 
 const SignIn = () => {
-  return <AuthForm type="sign-in" />;
+  return (
+    <AuthForm
+      type="sign-in"
+      isGoogleOAuthEnabled={isGoogleOAuthEnabled}
+      isGithubOAuthEnabled={isGithubOAuthEnabled}
+    />
+  );
 };
 
 export default SignIn;

ui/app/(auth)/sign-up/page.tsx

@@ -1,4 +1,6 @@
 import { AuthForm } from "@/components/auth/oss";
+import { isGithubOAuthEnabled } from "@/lib/helper";
+import { isGoogleOAuthEnabled } from "@/lib/helper";
 import { SearchParamsProps } from "@/types";
 
 const SignUp = ({ searchParams }: { searchParams: SearchParamsProps }) => {
@@ -7,7 +9,14 @@ const SignUp = ({ searchParams }: { searchParams: SearchParamsProps }) => {
       ? searchParams.invitation_token
       : null;
 
-  return <AuthForm type="sign-up" invitationToken={invitationToken} />;
+  return (
+    <AuthForm
+      type="sign-up"
+      invitationToken={invitationToken}
+      isGoogleOAuthEnabled={isGoogleOAuthEnabled}
+      isGithubOAuthEnabled={isGithubOAuthEnabled}
+    />
+  );
 };
 
 export default SignUp;

ui/components/auth/oss/auth-form.tsx

@@ -25,10 +25,14 @@ export const AuthForm = ({
   type,
   invitationToken,
   isCloudEnv,
+  isGoogleOAuthEnabled,
+  isGithubOAuthEnabled,
 }: {
   type: string;
   invitationToken?: string | null;
   isCloudEnv?: boolean;
+  isGoogleOAuthEnabled?: boolean;
+  isGithubOAuthEnabled?: boolean;
 }) => {
   const formSchema = authFormSchema(type);
   const router = useRouter();
@@ -302,9 +306,11 @@ export const AuthForm = ({
                   variant="bordered"
                   as="a"
                   href={getAuthUrl("google")}
+                  isDisabled={!isGoogleOAuthEnabled}
                 >
                   Continue with Google
                 </Button>
+
                 <Button
                   startContent={
                     <Icon
@@ -316,6 +322,7 @@ export const AuthForm = ({
                   variant="bordered"
                   as="a"
                   href={getAuthUrl("github")}
+                  isDisabled={!isGithubOAuthEnabled}
                 >
                   Continue with Github
                 </Button>

ui/lib/helper.ts

@@ -34,6 +34,14 @@ export const getAuthUrl = (provider: AuthSocialProvider) => {
   return url.toString();
 };
 
+export const isGoogleOAuthEnabled =
+  process.env.SOCIAL_GOOGLE_OAUTH_CLIENT_ID !== "" &&
+  process.env.SOCIAL_GOOGLE_OAUTH_CLIENT_SECRET !== "";
+
+export const isGithubOAuthEnabled =
+  process.env.SOCIAL_GITHUB_OAUTH_CLIENT_ID !== "" &&
+  process.env.SOCIAL_GITHUB_OAUTH_CLIENT_SECRET !== "";
+
 export async function checkTaskStatus(
   taskId: string,
 ): Promise<{ completed: boolean; error?: string }> {