added google recaptcha in auth

Taskfile.yaml

@@ -66,14 +66,14 @@ tasks:
         cp -r ./static/{{.app}}/. ./public/
 
         case "{{.tscheck}}" in
-          "no")
-            GATEWAY_URL=$GATEWAY_URL URL_SUFFIX=$URL_SUFFIX APP={{.app}} PORT=$PORT BASE_URL=$BASE_URL REMIX_DEV_ORIGIN=$REMIX_DEV_ORIGIN DEVELOPER=$(whoami) pnpm dev
-            ;;
-
-          *)
+          "yes")
             GATEWAY_URL=$GATEWAY_URL URL_SUFFIX=$URL_SUFFIX APP={{.app}} PORT=$PORT BASE_URL=$BASE_URL REMIX_DEV_ORIGIN=$REMIX_DEV_ORIGIN DEVELOPER=$(whoami) pnpm dev & pnpm typecheck
            ;;
 
+          *)
+            GATEWAY_URL=$GATEWAY_URL URL_SUFFIX=$URL_SUFFIX APP={{.app}} PORT=$PORT BASE_URL=$BASE_URL REMIX_DEV_ORIGIN=$REMIX_DEV_ORIGIN DEVELOPER=$(whoami) pnpm dev
+            ;;
+
         esac
 
 

lib/app-setup/root.tsx

@@ -34,6 +34,7 @@ import Page404 from '~/components/organisms/page-404';
 import { getClientEnv, getServerEnv } from '~/root/lib/configs/base-url.cjs';
 import { useDataFromMatches } from '../client/hooks/use-custom-matches';
 import { TooltipContainer } from '~/components/atoms/tooltipV2';
+import { RECAPTCHA_SITE_KEY } from '~/auth/consts';
 
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: stylesUrl },

lib/client/components/g-recaptcha.tsx → lib/client/helpers/g-recaptcha.tsx

@@ -2,7 +2,7 @@ declare global {
   interface Window {
     grecaptcha: {
       enterprise: {
-        ready: (callback: Promise<void>) => void;
+        ready: (callback: () => Promise<void>) => void;
         execute: (
           sitekey: string,
           action: {
@@ -14,7 +14,7 @@ declare global {
   }
 }
 
-export const onReady = (callback: Promise<void>) => {
+export const onReady = (callback: () => Promise<void>) => {
   if (
     !window.grecaptcha ||
     !window.grecaptcha.enterprise ||

src/apps/auth/components/footer.tsx

@@ -36,15 +36,15 @@ const menu = [
   },
   {
     title: 'Changelog',
-    to: '/',
+    to: 'https://github.com/kloudlite/kloudlite/releases',
   },
   {
     title: 'Pricing',
-    to: '/',
+    to: `${mainUrl}/pricing`,
   },
   {
     title: 'Legal',
-    to: '/',
+    to: `${mainUrl}/legal/privacy-policy`,
   },
 ];
 
@@ -71,7 +71,7 @@ const Footer = () => {
       <Wrapper className="py-6xl flex flex-col gap-4xl">
         <div className="flex flex-row items-center justify-between">
           <div className="flex flex-col md:flex-row md:items-center gap-lg">
-            <a href="/" aria-label="kloudlite">
+            <a href={mainUrl} aria-label="kloudlite">
               <BrandLogo size={24} detailed />
             </a>
             <span className="text-text-soft bodyMd">

src/apps/auth/consts.tsx

@@ -1 +1,2 @@
 export const mainUrl = 'https://kloudlite.io';
+export const RECAPTCHA_SITE_KEY = '6LcxXUIqAAAAABtRW-S7Bov6z9PgUHhbNWjTLhND';

src/apps/auth/root.tsx

@@ -2,6 +2,10 @@ import Root, { links as baseLinks } from '~/lib/app-setup/root.jsx';
 import { ChildrenProps } from '~/components/types';
 import ThemeProvider from '~/root/lib/client/hooks/useTheme';
 import authStylesUrl from './styles/index.css';
+import { RECAPTCHA_SITE_KEY } from './consts';
+import { useEffect } from 'react';
+import { useLocation } from '@remix-run/react';
+import grecaptcha from '~/root/lib/client/helpers/g-recaptcha';
 
 export { loader } from '~/lib/app-setup/root.jsx';
 export { shouldRevalidate } from '~/lib/app-setup/root.jsx';
@@ -13,6 +17,39 @@ export const links = () => {
 export { ErrorBoundary } from '~/lib/app-setup/root';
 
 const Layout = ({ children }: ChildrenProps) => {
+  const { pathname, search } = useLocation();
+  const hideCaptcha = () => {
+    let x = document.querySelector('.grecaptcha-badge') as HTMLDivElement;
+    if (x) {
+      if (
+        (pathname.startsWith('/signup') && search === '?mode=email') ||
+        (pathname.startsWith('/login') && search === '?mode=email') ||
+        pathname.startsWith('/forgot-password')
+      ) {
+        x.style.setProperty('display', 'block', 'important');
+        x.style.setProperty('visibility', 'visible');
+      } else {
+        x.style.display = 'none';
+        x.style.setProperty('visibility', 'hidden');
+      }
+    }
+  };
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = `https://www.google.com/recaptcha/enterprise.js?render=${RECAPTCHA_SITE_KEY}`;
+    script.onload = () => {
+      grecaptcha.onReady(async () => {
+        hideCaptcha();
+      });
+    };
+    document.head.appendChild(script);
+  }, []);
+
+  useEffect(() => {
+    hideCaptcha();
+  }, [pathname, search]);
+
   return (
     // <SSRProvider>
     // eslint-disable-next-line react/jsx-no-useless-fragment

src/apps/auth/routes/_main+/forgot-password.tsx

@@ -9,6 +9,8 @@ import { handleError } from '~/root/lib/utils/common';
 import { useAuthApi } from '~/auth/server/gql/api-provider';
 import { ArrowRight } from '~/components/icons';
 import Container from '../../components/container';
+import grecaptcha from '~/root/lib/client/helpers/g-recaptcha';
+import { RECAPTCHA_SITE_KEY } from '~/auth/consts';
 
 const ForgetPassword = () => {
   const api = useAuthApi();
@@ -21,8 +23,13 @@ const ForgetPassword = () => {
     }),
     onSubmit: async (val) => {
       try {
+        const token = await grecaptcha.execute(RECAPTCHA_SITE_KEY, {
+          action: 'login',
+        });
         const { errors: e } = await api.requestResetPassword({
           email: val.email,
+          //@ts-ignore
+          token,
         });
         if (e) {
           throw e[0];

src/apps/auth/routes/_providers+/login.tsx

@@ -20,6 +20,8 @@ import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
 import Container from '../../components/container';
 import { IProviderContext } from './_layout';
+import grecaptcha from '~/root/lib/client/helpers/g-recaptcha';
+import { RECAPTCHA_SITE_KEY } from '~/auth/consts';
 
 const CustomGoogleIcon = (props: any) => {
   return <GoogleLogo {...props} weight={4} />;
@@ -41,14 +43,19 @@ const LoginWithEmail = () => {
     }),
     onSubmit: async (v) => {
       try {
+        const token = await grecaptcha.execute(RECAPTCHA_SITE_KEY, {
+          action: 'login',
+        });
         const { errors: _errors } = await api.login({
           email: v.email,
           password: v.password,
+          //@ts-ignore
+          token,
         });
         if (_errors) {
           throw _errors[0];
         }
-        toast.success('logged in success fully');
+        toast.success('Logged in successfully');
 
         const callback = searchParams.get('callback');
         if (callback) {

src/apps/auth/routes/_providers+/signup.tsx

@@ -19,9 +19,10 @@ import { useAPIClient } from '~/root/lib/client/hooks/api-provider';
 import { handleError } from '~/root/lib/utils/common';
 import { ArrowLeft, ArrowRight } from '~/components/icons';
 import { cn } from '~/components/utils';
-import { mainUrl } from '~/auth/consts';
+import { RECAPTCHA_SITE_KEY, mainUrl } from '~/auth/consts';
 import Container from '../../components/container';
 import { IProviderContext } from './_layout';
+import grecaptcha from '~/root/lib/client/helpers/g-recaptcha';
 
 const CustomGoogleIcon = (props: any) => {
   return <GoogleLogo {...props} weight={4} />;
@@ -47,10 +48,14 @@ const SignUpWithEmail = () => {
     }),
     onSubmit: async (v) => {
       try {
+        const token = await grecaptcha.execute(RECAPTCHA_SITE_KEY, {
+          action: 'login',
+        });
         const { errors: _errors } = await api.signUpWithEmail({
           email: v.email,
           name: v.name,
           password: v.password,
+          token,
         });
         if (_errors) {
           throw _errors[0];
@@ -229,7 +234,7 @@ const Signup = () => {
           <br />
           <span>
             <Button
-              to={`${mainUrl}/terms-of-services`}
+              to={`${mainUrl}/legal/terms-of-services`}
               linkComponent={Link}
               className="!inline-block align-bottom"
               variant="plain"
@@ -241,7 +246,7 @@ const Signup = () => {
             />
             <span> and </span>
             <Button
-              to={`${mainUrl}/privacy-policy`}
+              to={`${mainUrl}/legal/privacy-policy`}
               linkComponent={Link}
               className="!inline-block align-bottom"
               variant="plain"

src/design-system/index.css

@@ -76,3 +76,8 @@ select {
     overflow-x: hidden;
   }
 }
+
+.grecaptcha-badge {
+  z-index: 99;
+  visibility: hidden;
+}