Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: test
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -10,3 +10,6 @@ NEXT_PUBLIC_ASPECTA_ID=

NEXT_PUBLIC_GA_ID=
NEXT_PUBLIC_GA_KEY=

NEXT_PUBLIC_WEB3BIO=
NEXT_PUBLIC_TURNSTILE_SITEKEY=
7 changes: 4 additions & 3 deletions src/app/(uc)/signin/page.js
Original file line number Diff line number Diff line change
@@ -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 { NavButtonStyle } from '../helper';
@@ -42,6 +43,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');

@@ -153,6 +155,7 @@ export default function Login() {
<button
type="submit"
disabled={
!humanVerified ||
!watchAllFields.Email ||
(loginType === 'password' && !watchAllFields.Password) ||
(loginType === 'verifyCode' && !watchAllFields.VerifyCode) ||
@@ -164,20 +167,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;
5 changes: 4 additions & 1 deletion src/app/(uc)/signup/page.js
Original file line number Diff line number Diff line change
@@ -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 '../helper';
@@ -41,6 +42,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);
@@ -150,6 +152,7 @@ export default function SignUp() {
<button
type="submit"
disabled={
!humanVerified ||
watchAllFields.Email === '' ||
watchAllFields.ConfirmPassword === '' ||
watchAllFields.VerificationCode === '' ||
@@ -167,7 +170,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
26 changes: 17 additions & 9 deletions src/app/oauth/page.js
Original file line number Diff line number Diff line change
@@ -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,18 @@ export default function Page() {
}
}, [status]); // eslint-disable-line react-hooks/exhaustive-deps

const handleVerify = verified => {
setDisabled(!verified);
};

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" fill />
</div>
<div className="flex items-center gap-2 relative">
<SvgIcon name="circle-check" size={20} />
@@ -123,13 +128,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} />
43 changes: 43 additions & 0 deletions src/domain/auth/widgets/human-proof/HumanProof.js
Original file line number Diff line number Diff line change
@@ -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;
17 changes: 17 additions & 0 deletions src/domain/auth/widgets/human-proof/index.js
Original file line number Diff line number Diff line change
@@ -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';

Unchanged files with check annotations Beta

}}
>
{chain.iconUrl && (
<img

Check warning on line 136 in src/entry/components/Header/CustomConnectButton.js

GitHub Actions / lint

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
alt={chain.name ?? 'Chain icon'}
src={chain.iconUrl}
style={{ width: 18, height: 18 }}
onUploading={setLoading}
onChange={handleImageFileChange}
>
<img className={clsx({'animate-spin': loading})} src={'/images/svg/refetch.svg'} alt="" />

Check warning on line 42 in src/domain/profile/widgets/banner/ImageUpload.js

GitHub Actions / lint

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
Change cover
</FileUploadWidget>
</button>
setApproveConfirmLoading(false);
toast.error(err.message);
}
}, [_contracts, approveConfirmIds, bounty, currUser, payToken, updateList]);

Check warning on line 115 in src/domain/bounty/widgets/process-list/AppliedModal.js

GitHub Actions / lint

React Hook useCallback has a missing dependency: 'revalidatePathAction'. Either include it or remove the dependency array. If 'revalidatePathAction' changes too often, find the parent component that defines it and wrap that definition in useCallback
const approveConfirm = useCallback(async () => {
setApproveConfirmLoading(true);
</div>
<div className="flex flex-wrap">
{nfts.map((i, k) => (
<img

Check warning on line 113 in src/app/shilling/[id]/page.js

GitHub Actions / lint

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
width={64}
height={64}
className="mr-4 mb-4 rounded-full"
key={`contributor-slider-item-${k}-${t}`}
className={clsx('relative group w-full rounded-full hover:w-[calc(100%)]')}
>
<img src={j.picture.src} alt="" className={clsx('w-full aspect-square object-cover rounded-full relative z-[2] group-hover:z-10')} />

Check warning on line 142 in src/app/home/Contributor.js

GitHub Actions / lint

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
<div className={clsx('text-white box-border py-6 absolute top-[1px] left-[1px] w-[99%] h-[99%] transition-width !duration-300 overflow-hidden bg-gray rounded-full z-0',
'group-hover:w-[calc(200%+40px)] group-hover:pl-[100%] group-hover:ml-2 group-hover:z-[3]',