feat(app): add Cloudflare Turnstile widget for OpenBuild OAuth

.env.example

@@ -10,3 +10,6 @@ NEXT_PUBLIC_ASPECTA_ID=
 
 NEXT_PUBLIC_GA_ID=
 NEXT_PUBLIC_GA_KEY=
+
+NEXT_PUBLIC_WEB3BIO=
+NEXT_PUBLIC_TURNSTILE_SITEKEY=

src/app/(uc)/signin/page.js

@@ -30,6 +30,7 @@ import { isEmpty } from '@/utils';
 import { wrapOnChange } from '@/utils/form';
 
 import { getOauthSourceFromParams } from '#/domain/auth/helper';
+import HumanProofWidget from '#/domain/auth/widgets/human-proof';
 import { signin, emailCodeLogin } from '#/services/auth';
 
 import LoginTypeSwitcher from './LoginTypeSwitcher';
@@ -44,6 +45,7 @@ export default function Login() {
   const emailFieldName = 'Email';
   const searchParams = useSearchParams();
   const [loading, setLoading] = useState(false);
+  const [humanVerified, setHumanVerified] = useState(false);
   const [passwordType, setPasswordType] = useState('password');
   const [loginType, setLoginType] = useState('verifyCode');
 
@@ -155,6 +157,7 @@ export default function Login() {
             <button
               type="submit"
               disabled={
+                !humanVerified ||
                 !watchAllFields.Email ||
                 (loginType === 'password' && !watchAllFields.Password) ||
                 (loginType === 'verifyCode' && !watchAllFields.VerifyCode) ||
@@ -166,20 +169,18 @@ export default function Login() {
               <span>Continue</span>
             </button>
           </form>
-
+          <HumanProofWidget onVerify={setHumanVerified} />
           {!isEmpty(errors) && watchAllFields.Email !== '' && (
             <p className="mt-4 text-xs text-center text-red">
               {loginType === 'password'
                 ? 'The email or password is wrong.'
                 : 'The email or code is wrong.'}
             </p>
           )}
-
           <LoginTypeSwitcher
             loginType={loginType}
             handleChangeLoginType={handleChangeLoginType}
           />
-
           {loginType == 'password' && (
             <div className="mt-6 text-center">
               Forget your password?&nbsp;

src/app/(uc)/signup/page.js

@@ -30,6 +30,7 @@ import { useAccount } from 'wagmi';
 import { EyeIcon, EyeSlashIcon } from '@/components/icon/outlined';
 import Loader from '@/components/Loader';
 
+import HumanProofWidget from '#/domain/auth/widgets/human-proof';
 import { registerEmail, sendCode } from '#/services/auth';
 
 import { NavButtonStyle } from '../signin/page';
@@ -40,6 +41,7 @@ export default function SignUp() {
   const router = useRouter();
   const [cdMss, setCdMss] = useState(0);
   const [loading, setLoading] = useState(false);
+  const [humanVerified, setHumanVerified] = useState(false);
   const { address } = useAccount();
   const searchParams = useSearchParams();
   const [sendLoading, setSendLoading] = useState(false);
@@ -149,6 +151,7 @@ export default function SignUp() {
           <button
             type="submit"
             disabled={
+              !humanVerified ||
               watchAllFields.Email === '' ||
               watchAllFields.ConfirmPassword === '' ||
               watchAllFields.VerificationCode === '' ||
@@ -166,7 +169,7 @@ export default function SignUp() {
           {watchAllFields.ConfirmPassword !== watchAllFields.Password && (
             <p className="mt-4 text-center text-xs text-red">The passwords entered twice are inconsistent</p>
           )}
-
+          <HumanProofWidget onVerify={setHumanVerified} />
           <div className="mt-6 text-center">
             Already have an account?&nbsp;
             <span

src/app/oauth/page.js

@@ -30,6 +30,7 @@ import { getCopyrightText } from '@/utils/app';
 
 import { setOauthSource } from '#/domain/auth/helper';
 import { fetchOauthClientInfo, fetchOauthClientCode } from '#/domain/auth/repository';
+import HumanProofWidget from '#/domain/auth/widgets/human-proof';
 
 import Link from './Link';
 import NoteItem from './NoteItem';
@@ -43,7 +44,7 @@ export default function Page() {
 
   const { status } = useSession();
 
-  const [disabled, setDisabled] = useState(false);
+  const [disabled, setDisabled] = useState(true);
   const [loading, setLoading] = useState(true);
   const [clientInfo, setClientInfo] = useState(null);
 
@@ -92,14 +93,22 @@ export default function Page() {
     }
   }, [status]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const handleVerify = token => {
+    if (!token)  {
+      return;
+    }
+
+    setDisabled(false);
+  };
+
   return (
     loading ? <Loader /> : (
       <div className="flex min-h-screen flex-col items-center pt-9 md:pt-[60px] p-4 font-['Nunito_Sans'] relative">
         <div className="relative w-[192px] md:w-[320px]">
           <div className="absolute top-1/2 left-0 w-full border-b-2 border-dashed border-[#d1d9e0]" />
           <div className="flex items-center justify-between py-9">
             <div className="relative bg-white rounded-full size-[60px] md:size-[100px]">
-              <img src={clientInfo?.icon} alt="Logo" className="!size-full" />
+              <Image src={clientInfo?.icon} alt="Logo" className="!size-full" fill />
             </div>
             <div className="flex items-center gap-2 relative">
               <SvgIcon name="circle-check" size={20} />
@@ -123,13 +132,16 @@ export default function Page() {
             <NoteItem icon="personal" title="Personal user data" description="Email addresses (read-only), profile information (read-only)" />
             <NoteItem icon="international" title="Public data only" description="Limited access to your public data" />
           </div>
-          <div className="flex gap-3 border-y border-gray-600 p-6 mx-[-24px]">
-            <Button variant="outlined" className="flex-1" onClick={handleCancel}>
-              Cancel
-            </Button>
-            <Button variant="contained" className="flex-1" onClick={authorize} disabled={disabled}>
-            Authorize
-            </Button>
+          <div className="mx-[-24px] p-6 border-y border-gray-600">
+            <HumanProofWidget className="mb-2" onVerify={handleVerify} />
+            <div className="flex gap-3">
+              <Button variant="outlined" className="flex-1" onClick={handleCancel}>
+                Cancel
+              </Button>
+              <Button variant="contained" className="flex-1" onClick={authorize} disabled={disabled}>
+                Authorize
+              </Button>
+            </div>
           </div>
           <div className="pt-6 flex items-center gap-3">
             <SvgIcon name="lock" size={16} />

src/domain/auth/widgets/human-proof/HumanProof.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright 2024 OpenBuild
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Script from 'next/script';
+
+import { isFunction } from '../../../../shared/utils';
+
+const sitekey = process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY;
+
+function HumanProof({ className, onVerify }) {
+  const handleScriptLoad = () => {
+    window.turnstile.render('#cfTurnstile', {
+      sitekey,
+      callback: token => isFunction(onVerify) && onVerify(token),
+    });
+  };
+
+  return sitekey && (
+    <>
+      <Script
+        src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+        strategy="afterInteractive"
+        onLoad={handleScriptLoad}
+      />
+      <div id="cfTurnstile" className={className} />
+    </>
+  );
+};
+
+export default HumanProof;

src/domain/auth/widgets/human-proof/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2024 OpenBuild
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default } from './HumanProof';