Merge branch 'AS-914-reading-streak-fix-1' into AS-914-reading-streak…

…-warning-prompt
dailydotdev · Jan 16, 2025 · 2a6fead · 2a6fead
2 parents 0305674 + a020659
commit 2a6fead
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 6 deletions.
diff --git a/packages/shared/jest.config.js b/packages/shared/jest.config.js
@@ -13,5 +13,6 @@ module.exports = {
     '\\.svg$': '<rootDir>/__mocks__/svgrMock.ts',
     '\\.css$': 'identity-obj-proxy',
     'react-markdown': '<rootDir>/__mocks__/reactMarkdownMock.tsx',
+    'react-turnstile': 'identity-obj-proxy',
   },
 };
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -102,6 +102,7 @@
   "dependencies": {
     "@growthbook/growthbook": "https://gitpkg.now.sh/dailydotdev/growthbook/packages/sdk-js?b8f31f9e80879fe2bcc42b275087b50e1357f1cb",
     "@growthbook/growthbook-react": "^0.17.0",
+    "@marsidev/react-turnstile": "^1.1.0",
     "@paddle/paddle-js": "^1.3.2",
     "@tippyjs/react": "^4.2.6",
     "check-password-strength": "^2.0.10",

diff --git a/packages/shared/src/components/auth/RegistrationForm.tsx b/packages/shared/src/components/auth/RegistrationForm.tsx
@@ -1,6 +1,8 @@
 import classNames from 'classnames';
 import type { MutableRefObject, ReactElement } from 'react';
-import React, { useContext, useEffect, useId, useState } from 'react';
+import React, { useContext, useEffect, useId, useRef, useState } from 'react';
+import type { TurnstileInstance } from '@marsidev/react-turnstile';
+import { Turnstile } from '@marsidev/react-turnstile';
 import type {
   AuthTriggersType,
   RegistrationError,
@@ -25,6 +27,7 @@ import AuthContainer from './AuthContainer';
 import { onValidateHandles } from '../../hooks/useProfileForm';
 import ExperienceLevelDropdown from '../profile/ExperienceLevelDropdown';
 import { LanguageDropdown } from '../profile/LanguageDropdown';
+import Alert, { AlertType } from '../widgets/Alert';
 
 export interface RegistrationFormProps extends AuthFormProps {
   email: string;
@@ -40,7 +43,9 @@ export interface RegistrationFormProps extends AuthFormProps {
 export type RegistrationFormValues = Omit<
   RegistrationParameters,
   'method' | 'provider'
->;
+> & {
+  headers?: Record<string, string>;
+};
 
 const RegistrationForm = ({
   email,
@@ -54,10 +59,12 @@ const RegistrationForm = ({
   simplified,
 }: RegistrationFormProps): ReactElement => {
   const { logEvent } = useContext(LogContext);
+  const [turnstileError, setTurnstileError] = useState<boolean>(false);
   const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
   const [name, setName] = useState('');
   const isAuthorOnboarding = trigger === AuthTriggers.Author;
   const { username, setUsername } = useGenerateUsername(name);
+  const ref = useRef<TurnstileInstance>(null);
 
   useEffect(() => {
     logEvent({
@@ -73,6 +80,9 @@ const RegistrationForm = ({
         event_name: AuthEventNames.SubmitSignUpFormError,
         extra: JSON.stringify({ error: hints }),
       });
+      if (hints?.csrf_token) {
+        setTurnstileError(true);
+      }
     }
     // @NOTE see https://dailydotdev.atlassian.net/l/cp/dK9h1zoM
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -81,6 +91,7 @@ const RegistrationForm = ({
   const onSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
+    setTurnstileError(false);
     logEvent({
       event_name: AuthEventNames.SubmitSignUpForm,
     });
@@ -90,6 +101,7 @@ const RegistrationForm = ({
     const { optOutMarketing, ...values } = formToJson<RegistrationFormValues>(
       formRef?.current ?? form,
     );
+    delete values?.['cf-turnstile-response'];
 
     if (
       !values['traits.name']?.length ||
@@ -112,6 +124,17 @@ const RegistrationForm = ({
       return;
     }
 
+    if (!ref?.current?.getResponse()) {
+      logEvent({
+        event_name: AuthEventNames.SubmitSignUpFormError,
+        extra: JSON.stringify({
+          error: 'Turnstile not valid',
+        }),
+      });
+      setTurnstileError(true);
+      return;
+    }
+
     const error = onValidateHandles(
       {},
       {
@@ -138,6 +161,9 @@ const RegistrationForm = ({
     onSignup({
       ...values,
       'traits.acceptedMarketing': !optOutMarketing,
+      headers: {
+        'True-Client-Ip': ref?.current?.getResponse(),
+      },
     });
   };
 
@@ -285,6 +311,17 @@ const RegistrationForm = ({
             </AuthContainer>
           )}
         >
+          <Turnstile
+            ref={ref}
+            siteKey={process.env.NEXT_PUBLIC_TURNSTILE_KEY}
+            className="mx-auto"
+          />
+          {turnstileError ? (
+            <Alert
+              type={AlertType.Error}
+              title="Please complete the security check."
+            />
+          ) : undefined}
           <Button
             form="auth-form"
             type="submit"

diff --git a/packages/shared/src/hooks/useRegistration.ts b/packages/shared/src/hooks/useRegistration.ts
@@ -7,7 +7,12 @@ import type {
   RegistrationParameters,
   ValidateRegistrationParams,
 } from '../lib/auth';
-import { AuthEventNames, errorsToJson, getNodeValue } from '../lib/auth';
+import {
+  AuthEventNames,
+  errorsToJson,
+  getNodeByKey,
+  getNodeValue,
+} from '../lib/auth';
 import type {
   InitializationData,
   SuccessfulRegistrationData,
@@ -157,9 +162,15 @@ const useRegistration = ({
         return displayToast('An error occurred, please refresh the page.');
       }
 
+      const turnstileError = getNodeByKey('csrf_token', error.ui.nodes);
       const emailExists = error?.ui?.messages?.find(
         (message) => message.id === EMAIL_EXISTS_ERROR_ID,
       );
+      if (turnstileError?.messages?.length > 0) {
+        return onInvalidRegistration?.({
+          csrf_token: 'Turnstile error',
+        });
+      }
       if (emailExists) {
         return onInvalidRegistration?.({
           'traits.email': 'Email is already taken!',

diff --git a/packages/shared/src/lib/kratos.ts b/packages/shared/src/lib/kratos.ts
@@ -278,6 +278,7 @@ export interface RequestResponse<TData = unknown, TError = InitializationData> {
 
 export interface AuthPostParams {
   csrf_token: string;
+  headers?: Record<string, string>;
 }
 
 export interface KratosFormParams<T extends AuthPostParams> {
@@ -311,15 +312,17 @@ export const submitKratosFlow = async <
   params,
   method = 'POST',
 }: KratosFormParams<T>): Promise<RequestResponse<R, E>> => {
+  const { headers, ...rest } = params;
   const res = await fetch(action, {
     method,
     credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
-      'X-CSRF-Token': params.csrf_token,
+      'X-CSRF-Token': rest.csrf_token,
       Accept: 'application/json',
+      ...headers,
     },
-    body: method === 'GET' ? undefined : JSON.stringify(params),
+    body: method === 'GET' ? undefined : JSON.stringify(rest),
   });
 
   if (res.status === 204) {

diff --git a/packages/webapp/.env b/packages/webapp/.env
@@ -16,4 +16,6 @@ NEXT_PUBLIC_GB_DEV_MODE=false
 NEXT_PUBLIC_SLACK_CLIENT_ID=1137730955072.7361269413077
 NEXT_PUBLIC_PADDLE_TOKEN=topsecret
 
-NEXT_PUBLIC_ANDROID_APP="https://play.google.com/store/apps/details?id=dev.daily"
+NEXT_PUBLIC_ANDROID_APP="https://play.google.com/store/apps/details?id=dev.daily"
+
+NEXT_PUBLIC_TURNSTILE_KEY=1x00000000000000000000AA
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@dailydotdev/react-contexify": "^5.0.2",
     "@dailydotdev/shared": "workspace:*",
+    "@marsidev/react-turnstile": "1.1.0",
     "@paddle/paddle-js": "^1.3.2",
     "@serwist/next": "^9.0.9",
     "@tanstack/react-query": "^5.59.16",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml