bb/add turnstile (#537)

* use TAMAGUI_TARGET=web

* add cloudflare turnstile

.env.local.template

@@ -1,19 +1,20 @@
 # 🧑‍💻 DEVELOPMENT SETTING. Copy this file to .env.local and change the values as needed.
-NEXT_PUBLIC_SUPABASE_PROJECT_ID=default
-NEXT_PUBLIC_URL=http://localhost:3000
-NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
-NEXT_PUBLIC_SUPABASE_GRAPHQL_URL=http://localhost:54321/graphql/v1
-NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
-NEXT_PUBLIC_MAINNET_RPC_URL=http://localhost:8545
+NEXT_PUBLIC_BASE_CHAIN_ID=845337
 NEXT_PUBLIC_BASE_RPC_URL=http://localhost:8546
 NEXT_PUBLIC_BUNDLER_RPC_URL=http://localhost:3030/rpc
-SUPABASE_DB_URL=postgresql://postgres:postgres@localhost:54322/postgres
-SUPABASE_SERVICE_ROLE=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
-SUPABASE_JWT_SECRET=super-secret-jwt-token-with-at-least-32-characters-long
 NEXT_PUBLIC_MAINNET_CHAIN_ID=1337
-NEXT_PUBLIC_BASE_CHAIN_ID=845337
+NEXT_PUBLIC_MAINNET_RPC_URL=http://localhost:8545
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
+NEXT_PUBLIC_SUPABASE_GRAPHQL_URL=http://localhost:54321/graphql/v1
+NEXT_PUBLIC_SUPABASE_PROJECT_ID=default
+NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=1x00000000000000000000AA
+NEXT_PUBLIC_URL=http://localhost:3000
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=33fe0df7cd4f445f4e2ba7e0fd6ed314
-SNAPLET_HASH_KEY=sendapp
-SEND_ACCOUNT_FACTORY_PRIVATE_KEY=0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d
 SECRET_SHOP_PRIVATE_KEY=0x5de4111afa1a4b94908f83103eb1f1706367c2e68ca870fc3fb9a804cdab365a
+SEND_ACCOUNT_FACTORY_PRIVATE_KEY=0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d
+SNAPLET_HASH_KEY=sendapp
+SUPABASE_DB_URL=postgresql://postgres:postgres@localhost:54322/postgres
+SUPABASE_JWT_SECRET=super-secret-jwt-token-with-at-least-32-characters-long
+SUPABASE_SERVICE_ROLE=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
 # NEXT_PUBLIC_ENABLE_QUERY_DEV_TOOLS=1

apps/next/Dockerfile

@@ -72,6 +72,7 @@ ENV NEXT_PUBLIC_BUNDLER_RPC_URL=${NEXT_PUBLIC_BUNDLER_RPC_URL}
 ENV NEXT_PUBLIC_MAINNET_CHAIN_ID=${NEXT_PUBLIC_MAINNET_CHAIN_ID}
 ENV NEXT_PUBLIC_BASE_CHAIN_ID=${NEXT_PUBLIC_BASE_CHAIN_ID}
 ENV NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=${NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}
+ENV TAMAGUI_TARGET=web
 RUN --mount=type=cache,target=/tmp/yarn-cache \
   --mount=type=cache,target=/tmp/turbo-cache \
   --mount=type=secret,id=SUPABASE_DB_URL \

environment.d.ts

@@ -35,6 +35,10 @@ declare global {
        * Enables the query dev tool in the browser
        */
       NEXT_PUBLIC_ENABLE_QUERY_DEV_TOOLS: string
+      /**
+       * Cloudflare Turnstile site key
+       */
+      NEXT_PUBLIC_TURNSTILE_SITE_KEY: string
     }
   }
   /**

packages/api/src/routers/auth.ts

@@ -8,9 +8,11 @@ const log = debug('api:auth')
 
 export const authRouter = createTRPCRouter({
   signInWithOtp: publicProcedure
-    .input(z.object({ phone: z.string(), countrycode: z.string() }))
+    .input(
+      z.object({ phone: z.string(), countrycode: z.string(), captchaToken: z.string().optional() })
+    )
     .mutation(async ({ input }) => {
-      const { phone, countrycode } = input
+      const { phone, countrycode, captchaToken } = input
       if (!phone) {
         throw new TRPCError({
           code: 'BAD_REQUEST',
@@ -23,9 +25,15 @@ export const authRouter = createTRPCRouter({
           message: 'Country Code is required',
         })
       }
+      if (!!process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY && !captchaToken) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'Captcha token is required',
+        })
+      }
       try {
         const result = await supabaseAdmin.auth
-          .signInWithOtp({ phone: `${countrycode}${phone}` })
+          .signInWithOtp({ phone: `${countrycode}${phone}`, options: { captchaToken } })
           .then(async (r) => {
             // TODO: potentially add a fake numbers list for app store reviewers
             if (__DEV__ || process.env.CI) {

packages/api/src/trpc.ts

@@ -5,6 +5,12 @@ import type { CreateNextContextOptions } from '@trpc/server/adapters/next'
 import superJson from 'superjson'
 
 export const createTRPCContext = async (opts: CreateNextContextOptions) => {
+  console.log(
+    `${opts.req.url} - ${opts.req.headers['user-agent']}${
+      opts.req.headers['x-forwarded-for'] ? ` - ${opts.req.headers['x-forwarded-for']}` : ''
+    }`
+  )
+
   // if there's auth cookie it'll be authenticated by this helper
   const supabase = createPagesServerClient<Database>(opts)
 

packages/app/features/auth/sign-up/screen.tsx

@@ -1,19 +1,10 @@
-import { YStack, Anchor, Paragraph, XStack } from '@my/ui'
+import { YStack } from '@my/ui'
 import { SignUpForm } from 'app/features/auth/sign-up/sign-up-form'
-import { useLink } from 'solito/link'
 
 export const SignUpScreen = () => {
   return (
     <YStack h="100%" jc="center" ai="center" f={1}>
       <SignUpForm />
-      <XStack jc="center" ai="center" mt="$4">
-        <Paragraph size="$2" color="$color11">
-          Already have an account?{' '}
-          <Anchor color="$color12" {...useLink({ href: '/auth/sign-in' })}>
-            Sign in
-          </Anchor>
-        </Paragraph>
-      </XStack>
     </YStack>
   )
 }

packages/app/features/auth/sign-up/sign-up-form.tsx

@@ -1,9 +1,13 @@
-import { ButtonText, BigHeading, Paragraph, SubmitButton, XStack, YStack, H3 } from '@my/ui'
+import { Turnstile } from '@marsidev/react-turnstile'
+import { Anchor, BigHeading, ButtonText, H3, Paragraph, SubmitButton, XStack, YStack } from '@my/ui'
+import { TRPCClientError } from '@trpc/client'
+import { VerifyCode } from 'app/features/auth/components/VerifyCode'
 import { SchemaForm, formFields } from 'app/utils/SchemaForm'
-import { FormProvider, useForm } from 'react-hook-form'
 import { api } from 'app/utils/api'
+import { useState } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useLink } from 'solito/link'
 import { useRouter } from 'solito/router'
-import { VerifyCode } from 'app/features/auth/components/VerifyCode'
 import { z } from 'zod'
 
 const SignUpSchema = z.object({
@@ -15,16 +19,22 @@ export const SignUpForm = () => {
   const form = useForm<z.infer<typeof SignUpSchema>>()
   const signInWithOtp = api.auth.signInWithOtp.useMutation()
   const router = useRouter()
+  const [captchaToken, setCaptchaToken] = useState<string | undefined>()
+  const signInLink = useLink({ href: '/auth/sign-in' })
 
   async function signUpWithPhone({ phone, countrycode }: z.infer<typeof SignUpSchema>) {
     const { error } = await signInWithOtp
       .mutateAsync({
         phone,
         countrycode,
+        captchaToken,
       })
       .catch((e) => {
         console.error("Couldn't send OTP", e)
-        return { error: { message: 'Something went wrong' } }
+        if (e instanceof TRPCClientError) {
+          return { error: { message: e.message } }
+        }
+        return { error: { message: e.message } }
       })
 
     if (error) {
@@ -84,32 +94,58 @@ export const SignUpForm = () => {
             },
           }}
           renderAfter={({ submit }) => (
-            <XStack
-              f={1}
-              mt={'0'}
-              jc={'space-between'}
-              $sm={{ jc: 'center', height: '100%' }}
-              ai={'center'}
-            >
-              <SubmitButton
-                onPress={() => submit()}
-                br="$3"
-                bc={'$green9Light'}
-                $sm={{ w: '100%' }}
-                $gtMd={{
-                  mt: '0',
-                  als: 'flex-end',
-                  mx: 0,
-                  ml: 'auto',
-                  w: '$10',
-                  h: '$3.5',
-                }}
+            <YStack jc="center" ai="center" mt="$4">
+              <XStack
+                f={1}
+                mt={'0'}
+                jc={'space-between'}
+                $sm={{ jc: 'center', height: '100%' }}
+                ai={'center'}
               >
-                <ButtonText size={'$2'} padding={'unset'} ta="center" margin={'unset'} col="black">
-                  {'/SIGN UP'}
-                </ButtonText>
-              </SubmitButton>
-            </XStack>
+                <SubmitButton
+                  onPress={() => submit()}
+                  br="$3"
+                  bc={'$green9Light'}
+                  $sm={{ w: '100%' }}
+                  $gtMd={{
+                    mt: '0',
+                    als: 'flex-end',
+                    mx: 0,
+                    ml: 'auto',
+                    w: '$10',
+                    h: '$3.5',
+                  }}
+                >
+                  <ButtonText
+                    size={'$2'}
+                    padding={'unset'}
+                    ta="center"
+                    margin={'unset'}
+                    col="black"
+                  >
+                    {'/SIGN UP'}
+                  </ButtonText>
+                </SubmitButton>
+              </XStack>
+              <XStack jc="center" ai="center" mt="$4">
+                <Paragraph size="$2" color="$color11">
+                  Already have an account?{' '}
+                  <Anchor color="$color12" {...signInLink}>
+                    Sign in
+                  </Anchor>
+                </Paragraph>
+              </XStack>
+              <YStack pt="$4">
+                {!!process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY && (
+                  <Turnstile
+                    siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
+                    onSuccess={(token) => {
+                      setCaptchaToken(token)
+                    }}
+                  />
+                )}
+              </YStack>
+            </YStack>
           )}
         >
           {({ countrycode: CountryCode, phone: Phone }) => (

packages/app/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@daimo/expo-passkeys": "workspace:*",
+    "@marsidev/react-turnstile": "^0.7.1",
     "@my/supabase": "workspace:*",
     "@my/ui": "workspace:*",
     "@my/wagmi": "workspace:*",

packages/playwright/tests/sign-up.anon.spec.ts

@@ -19,6 +19,10 @@ const randomCountry = () =>
 
 const signUp = async (page, phone, expect) => {
   await page.getByLabel('Phone number').fill(phone)
+  const captcha = page
+    .frameLocator('iframe[title="Widget containing a Cloudflare security challenge"]')
+    .locator('#success')
+  await expect(captcha).toBeVisible()
   const signUpButton = page.getByRole('button', { name: 'Sign Up' })
   await expect(signUpButton).toBeVisible()
   await signUpButton.click()

yarn.lock

@@ -5226,6 +5226,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@marsidev/react-turnstile@npm:^0.7.1":
+  version: 0.7.1
+  resolution: "@marsidev/react-turnstile@npm:0.7.1"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 6622ea1ad641dca1769160cf7785b4fbf59390e0dad81774aff1725504090e725e5eb69a1f71953eb555ecab075099328e07d16a1f9c86ad385ced97cb559306
+  languageName: node
+  linkType: hard
+
 "@metamask/abi-utils@npm:^1.2.0":
   version: 1.2.0
   resolution: "@metamask/abi-utils@npm:1.2.0"
@@ -12411,6 +12421,7 @@ __metadata:
   dependencies:
     "@daimo/expo-passkeys": "workspace:*"
     "@jest/globals": "npm:^29.7.0"
+    "@marsidev/react-turnstile": "npm:^0.7.1"
     "@my/supabase": "workspace:*"
     "@my/ui": "workspace:*"
     "@my/wagmi": "workspace:*"