Add feature flag for Google Login (#222)

NethermindEth · Oct 14, 2024 · 1a48f94 · 1a48f94
1 parent 3e8b8bb
commit 1a48f94
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 61 deletions.
diff --git a/.env.development b/.env.development
@@ -1,3 +1,4 @@
 VITE_API_BASE_URL=http://localhost:3000
 VITE_CLERK_PUBLISHABLE_KEY=pk_test_b3B0aW1hbC1jaGlja2VuLTU3LmNsZXJrLmFjY291bnRzLmRldiQ
+VITE_GOOGLE_REDIRECT_URL=https://optimal-chicken-57.clerk.accounts.dev/v1/oauth_callback
 VITE_LOG_LEVEL=debug
diff --git a/src/onboarding/Login.jsx b/src/onboarding/Login.jsx
@@ -1,4 +1,4 @@
-import { Button, Input } from '@nextui-org/react';
+import { Button, Divider, Image, Input } from '@nextui-org/react';
 import { Link, Navigate, useNavigate } from 'react-router-dom';
 import { useSignIn, useUser } from '@clerk/clerk-react';
 import { reduceState } from '../shared/helpers';
@@ -54,14 +54,13 @@ export default function Login() {
     }
   };
 
-  // const handleGoogleLogin = async () => {
-  //   await signIn.authenticateWithRedirect({
-  //     strategy: 'oauth_google',
-  //     redirectUrl:
-  //       'https://hip-primate-84.clerk.accounts.dev/v1/oauth_callback',
-  //     redirectUrlComplete: '/'
-  //   });
-  // };
+  const handleGoogleLogin = async () => {
+    await signIn.authenticateWithRedirect({
+      strategy: 'oauth_google',
+      redirectUrl: import.meta.env.VITE_GOOGLE_REDIRECT_URL,
+      redirectUrlComplete: '/'
+    });
+  };
 
   if (isSignedIn) {
     return <Navigate to={'/'} />;
@@ -78,8 +77,6 @@ export default function Login() {
         </p>
       </div>
 
-      {/* <GoogleOneTap /> */}
-
       <form
         className="flex w-full flex-col items-center justify-center gap-y-5 rounded-lg border border-outline bg-content1 p-5 md:w-[31rem]"
         onSubmit={handleSubmit(handleLogin)}
@@ -133,20 +130,24 @@ export default function Login() {
           })}
         />
 
-        {/* <div className="flex w-full items-center gap-x-2">
-          <Divider className="w-[46.5%] bg-outline" />
-          <p>or</p>
-          <Divider className="w-[46.5%] bg-outline" />
-        </div> */}
-        {/* <Button
-          className="rounded-sm border border-outline"
-          fullWidth
-          onPress={handleGoogleLogin}
-          startContent={<Image src="/images/google.svg" />}
-          variant="bordered"
-        >
-          Continue with Google
-        </Button> */}
+        {localStorage.getItem('isGoogleOAuthEnabled') && (
+          <div className="flex w-full items-center gap-x-2">
+            <Divider className="w-[46.5%] bg-outline" />
+            <p>or</p>
+            <Divider className="w-[46.5%] bg-outline" />
+          </div>
+        )}
+        {localStorage.getItem('isGoogleOAuthEnabled') && (
+          <Button
+            className="rounded-sm border border-outline"
+            fullWidth
+            onPress={handleGoogleLogin}
+            startContent={<Image src="/images/google.svg" />}
+            variant="bordered"
+          >
+            Continue with Google
+          </Button>
+        )}
 
         <Button
           className="rounded-sm border border-secondary text-secondary hover:border-focus hover:text-focus"

diff --git a/src/onboarding/Register.jsx b/src/onboarding/Register.jsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, cn, Input } from '@nextui-org/react';
+import { Button, Checkbox, cn, Divider, Image, Input } from '@nextui-org/react';
 import { Link, Navigate, useNavigate } from 'react-router-dom';
 import { useSignUp, useUser } from '@clerk/clerk-react';
 import { OTPInput } from 'input-otp';
@@ -12,8 +12,8 @@ export default function Register() {
     handleSubmit,
     getValues,
     setError,
-    // clearErrors,
-    // reset,
+    clearErrors,
+    reset,
     formState: { errors }
   } = useForm();
   const { isLoaded: isClerkLoaded, signUp, setActive } = useSignUp();
@@ -90,23 +90,22 @@ export default function Register() {
     }
   };
 
-  // const handleGoogleLogin = async () => {
-  //   reset();
-  //   if (!getValues('terms')) {
-  //     setError('terms', {
-  //       message: 'Please accept terms and conditions',
-  //       type: 'required'
-  //     });
-  //     return;
-  //   }
-  //   clearErrors('terms');
-  //   await signUp.authenticateWithRedirect({
-  //     strategy: 'oauth_google',
-  //     redirectUrl:
-  //       'https://hip-primate-84.clerk.accounts.dev/v1/oauth_callback',
-  //     redirectUrlComplete: '/'
-  //   });
-  // };
+  const handleGoogleLogin = async () => {
+    reset();
+    if (!getValues('terms')) {
+      setError('terms', {
+        message: 'Please accept terms and conditions',
+        type: 'required'
+      });
+      return;
+    }
+    clearErrors('terms');
+    await signUp.authenticateWithRedirect({
+      strategy: 'oauth_google',
+      redirectUrl: import.meta.env.VITE_GOOGLE_REDIRECT_URL,
+      redirectUrlComplete: '/'
+    });
+  };
 
   if (isSignedIn) {
     return <Navigate to={'/'} />;
@@ -181,8 +180,6 @@ export default function Register() {
         </p>
       </div>
 
-      {/* <GoogleOneTap /> */}
-
       <form
         className="flex w-full flex-col items-center justify-center gap-y-5 rounded-lg border border-outline bg-content1 p-5 md:w-[31rem]"
         onSubmit={handleSubmit(handleSignUp)}
@@ -236,21 +233,25 @@ export default function Register() {
           })}
         />
 
-        {/* <div className="flex w-full items-center gap-x-2">
-          <Divider className="w-[46.5%] bg-outline" />
-          <p>or</p>
-          <Divider className="w-[46.5%] bg-outline" />
-        </div> */}
+        {localStorage.getItem('isGoogleOAuthEnabled') && (
+          <div className="flex w-full items-center gap-x-2">
+            <Divider className="w-[46.5%] bg-outline" />
+            <p>or</p>
+            <Divider className="w-[46.5%] bg-outline" />
+          </div>
+        )}
 
-        {/* <Button
-          className="rounded-sm border border-outline"
-          fullWidth
-          onPress={handleGoogleLogin}
-          startContent={<Image src="/images/google.svg" />}
-          variant="bordered"
-        >
-          Continue with Google
-        </Button> */}
+        {localStorage.getItem('isGoogleOAuthEnabled') && (
+          <Button
+            className="rounded-sm border border-outline"
+            fullWidth
+            onPress={handleGoogleLogin}
+            startContent={<Image src="/images/google.svg" />}
+            variant="bordered"
+          >
+            Continue with Google
+          </Button>
+        )}
 
         <div className="flex w-full flex-col">
           <Checkbox