feat: Implement reCAPTCHA

www/package.json

@@ -88,6 +88,7 @@
     "react-dom": "18.3.1",
     "react-file-icon": "1.3.0",
     "react-file-picker": "0.0.6",
+    "react-google-recaptcha-v3": "1.10.1",
     "react-icons": "4.9.0",
     "react-json-view": "1.21.3",
     "react-multiline-clamp": "2.0.0",

www/src/App.tsx

@@ -30,6 +30,7 @@ import { growthbook } from './helpers/growthbook'
 import { OverlayContextProvider } from './components/layout/Overlay'
 import NavContextProvider from './contexts/NavigationContext'
 import { CursorPositionProvider } from './components/utils/CursorPosition'
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
 
 const Plural = lazy(() => import('./components/Plural'))
 const Invite = lazy(() => import('./components/Invite'))
@@ -169,37 +170,44 @@ function App() {
 
   return (
     <Suspense>
-      <ApolloProvider client={client}>
-        <IntercomProvider appId={INTERCOM_APP_ID}>
-          <ThemeProvider theme={honorableTheme}>
-            <StyledThemeProvider theme={mergedStyledTheme}>
-              <GrowthBookProvider growthbook={growthbook as any as GrowthBook}>
-                <CursorPositionProvider>
-                  <MarkdocContextProvider value={{ variant: 'console' }}>
-                    <NavContextProvider>
-                      <OverlayContextProvider>
-                        <BreadcrumbsProvider>
-                          <CssBaseline />
-                          <GlobalStyle />
-                          <Grommet
-                            full
-                            theme={mergedStyledTheme as any as ThemeType}
-                            themeMode="dark"
-                          >
-                            <PluralErrorBoundary>
-                              <RootBoxSC>{routes}</RootBoxSC>
-                            </PluralErrorBoundary>
-                          </Grommet>
-                        </BreadcrumbsProvider>
-                      </OverlayContextProvider>
-                    </NavContextProvider>
-                  </MarkdocContextProvider>
-                </CursorPositionProvider>
-              </GrowthBookProvider>
-            </StyledThemeProvider>
-          </ThemeProvider>
-        </IntercomProvider>
-      </ApolloProvider>
+      <GoogleReCaptchaProvider
+        reCaptchaKey="6LcKLkQqAAAAABfRRfhQGp3c0rcytvDzcx8cddcq"
+        language="en"
+      >
+        <ApolloProvider client={client}>
+          <IntercomProvider appId={INTERCOM_APP_ID}>
+            <ThemeProvider theme={honorableTheme}>
+              <StyledThemeProvider theme={mergedStyledTheme}>
+                <GrowthBookProvider
+                  growthbook={growthbook as any as GrowthBook}
+                >
+                  <CursorPositionProvider>
+                    <MarkdocContextProvider value={{ variant: 'console' }}>
+                      <NavContextProvider>
+                        <OverlayContextProvider>
+                          <BreadcrumbsProvider>
+                            <CssBaseline />
+                            <GlobalStyle />
+                            <Grommet
+                              full
+                              theme={mergedStyledTheme as any as ThemeType}
+                              themeMode="dark"
+                            >
+                              <PluralErrorBoundary>
+                                <RootBoxSC>{routes}</RootBoxSC>
+                              </PluralErrorBoundary>
+                            </Grommet>
+                          </BreadcrumbsProvider>
+                        </OverlayContextProvider>
+                      </NavContextProvider>
+                    </MarkdocContextProvider>
+                  </CursorPositionProvider>
+                </GrowthBookProvider>
+              </StyledThemeProvider>
+            </ThemeProvider>
+          </IntercomProvider>
+        </ApolloProvider>
+      </GoogleReCaptchaProvider>
     </Suspense>
   )
 }

www/src/components/users/MagicLogin.tsx

@@ -12,8 +12,12 @@ import { useApolloClient } from '@apollo/client'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import queryString from 'query-string'
 import { A, Button, Div, Flex, Icon } from 'honorable'
-
-import styled from 'styled-components'
+import {
+  GoogleReCaptchaProvider,
+  GoogleReCaptcha,
+  useGoogleReCaptcha,
+} from 'react-google-recaptcha-v3'
+import styled, { useTheme } from 'styled-components'
 
 import {
   AcceptLoginDocument,
@@ -45,6 +49,7 @@ import {
 import { finishedDeviceLogin } from './DeviceLoginNotif'
 import { LabelledInput } from './LabelledInput'
 import { LOGIN_BREAKPOINT, LoginPortal } from './LoginPortal'
+import { HintText } from '@pluralsh/design-system/dist/stories/FormField.stories'
 
 export function PasswordlessLogin() {
   const { token } = useParams()
@@ -237,6 +242,8 @@ const setInputFocus = (ref: RefObject<any>) => {
 }
 
 export function Login() {
+  const theme = useTheme()
+  const navigate = useNavigate()
   const [state, setState] = useState<LoginState>(State.Initial)
   const prevState = useRef<LoginState>(State.Initial)
   const history = useHistory()
@@ -249,10 +256,21 @@ export function Login() {
   )
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
-  const navigate = useNavigate()
   const passwordRef = useRef<HTMLElement>()
   const emailRef = useRef<HTMLElement>()
 
+  const { executeRecaptcha } = useGoogleReCaptcha()
+  const [captcha, setCaptcha] = useState('')
+  const handleReCaptchaVerify = useCallback(async () => {
+    if (!executeRecaptcha) return
+
+    setCaptcha(await executeRecaptcha('login'))
+  }, [executeRecaptcha, setCaptcha])
+
+  useEffect(() => {
+    handleReCaptchaVerify()
+  }, [handleReCaptchaVerify])
+
   useEffect(() => {
     setInputFocus(emailRef)
   }, [])
@@ -277,6 +295,7 @@ export function Login() {
         email,
         password,
         deviceToken: typeof deviceToken === 'string' ? deviceToken : undefined,
+        captcha,
       },
       onCompleted: ({ login }) => {
         setToken(login?.jwt)
@@ -386,7 +405,7 @@ export function Login() {
     state === State.PwdLogin_CheckingPwd ||
     state === State.PwdLogin_CheckPwd
   const disableSubmit = isPasswordLogin
-    ? password.length === 0
+    ? password.length === 0 || !captcha
     : !isValidEmail(email)
 
   const onSubmit = useCallback(
@@ -499,6 +518,19 @@ export function Login() {
                   placeholder="Enter password"
                 />
               </Collapsible>
+              {!captcha && (
+                <div
+                  css={{
+                    ...theme.partials.text.inlineLink,
+                    textAlign: 'end',
+                    cursor: 'pointer',
+                    marginBottom: theme.spacing.xsmall,
+                  }}
+                  onClick={handleReCaptchaVerify}
+                >
+                  verify reCAPTCHA
+                </div>
+              )}
               <Button
                 type="submit"
                 width="100%"

www/src/generated/graphql.ts

@@ -6011,6 +6011,7 @@ export type LoginMutationVariables = Exact<{
   email: Scalars['String']['input'];
   password: Scalars['String']['input'];
   deviceToken?: InputMaybe<Scalars['String']['input']>;
+  captcha?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
@@ -10777,8 +10778,13 @@ export type DevLoginMutationHookResult = ReturnType<typeof useDevLoginMutation>;
 export type DevLoginMutationResult = Apollo.MutationResult<DevLoginMutation>;
 export type DevLoginMutationOptions = Apollo.BaseMutationOptions<DevLoginMutation, DevLoginMutationVariables>;
 export const LoginDocument = gql`
-    mutation Login($email: String!, $password: String!, $deviceToken: String) {
-  login(email: $email, password: $password, deviceToken: $deviceToken) {
+    mutation Login($email: String!, $password: String!, $deviceToken: String, $captcha: String) {
+  login(
+    email: $email
+    password: $password
+    deviceToken: $deviceToken
+    captcha: $captcha
+  ) {
     jwt
   }
 }
@@ -10801,6 +10807,7 @@ export type LoginMutationFn = Apollo.MutationFunction<LoginMutation, LoginMutati
  *      email: // value for 'email'
  *      password: // value for 'password'
  *      deviceToken: // value for 'deviceToken'
+ *      captcha: // value for 'captcha'
  *   },
  * });
  */