Adding recaptcha_v3 #2031

LauraPinilla · 2024-03-20T22:20:33Z

If you have not filled out the checklist below, the pr is not ready for review.

Description

Render reCaptcha v3 in case the tenant has this config.

We are passing a parameter

reCaptcha V3 is the invisible reCaptcha provided by google. Once it's included on the page should look like the image below.

By default, google includes this in the bottom right corner.
reCaptcha v3 does not require action by the user, the recaptcha is returned automatically.

BotChallengeProtection component will accept a challengeIn attribute. This attribute could be one of:
'signup' || ‘signin’ || ‘magiclink’ || ‘checkout’

IF !!`${challengeIn}Recaptcha && (0 <=recaptchaScore && recaptchaScore <= 1) && !!recaptchaSiteKey
THEN render reCaptchaV3. reCaptchaV3 should be initialized by passing the recaptchaSiteKey

Currently, we have this enabled for org:subssinglesite site:the-daily-intelligencer env: sandbox admin.
findeIn case you need this setting for any tenant, please let us know.

Jira Ticket

ASUB-8193

Acceptance Criteria

Update BotChallengeProtection component in identity-block

BotChallengeProtection will accept a challengeIn attribute. This attribute could be one of:
'signup' || ‘signin’ || ‘magiclink’ || ‘checkout’

IF !!`${challengeIn}Recaptcha && recaptchaScore between 0 - 1 &&!!recaptchaSiteKey
THEN render reCaptchaV3. reCaptchaV3 should be initialized by passing the recaptchaSiteKey

Every time you grab a response token from reCAPTCHA component, store the response in localStorage.

The BotChallengeProtection should be part of the Login block, and the reCaptcha token should be sent during the call to Identity.login();
User should be successfully Logged In when reCaptcha v3 is enabled for signin.

Test Steps

Figma file

Checkout this branch git checkout ASUB-8193_ReCaptcha_V3
npx fusion start -l @wpmedia/identity-block
point the site configs on blocks.json to https://subssinglesite-the-daily-intelligencer-sandbox.api.cdn.arcpublishing.com/ (It has recaptchav3 enabled for signin), or enable the config for the tenant you are using.
Create a page and includeIdentity Log In - Arc Block component. Check the component BotChallengeProtection is being rendered (reCaptcha v2 or reCaptchaV3, depending on the configs), and after ask for login the user should be logged In successfully.

Effect Of Changes

Before

Example: When I clicked the search button, the button turned red.

[include screenshot or gif or link to video, storybook would be awesome]

After

Example: When I clicked the search button, the button turned green.

[include screenshot or gif or link to video, storybook would be awesome]

Dependencies or Side Effects

Examples of dependencies or side effects are:

Manifest pr for new block:
Feature pack pr for local development:
How to deploy to news: https://arcpublishing.atlassian.net/wiki/spaces/TI/pages/3138682964/News+Theme+2.0+Migration+Development+Deployment+Notes
Additional settings that will be required in the blocks.json
Changes to the custom fields which will require users to reconfigure features
Dependency on another PR that needs to be merged first

Author Checklist

The author of the PR should fill out the following sections to ensure this PR is ready for review.

Confirmed all the test steps a reviewer will follow above are working.
Confirmed there are no linter errors. Please run npm run lint to check for errors. Often, npm run lint:fix will fix those errors and warnings.
Ran this code locally and checked that there are not any unintended side effects. For example, that a CSS selector is scoped only to a particular block.
Confirmed this PR has reasonable code coverage. You can run npm run test:coverage to see your progress.
- Confirmed this PR has unit test files
- Ran npm run test, made sure all tests are passing
- If the amount of work to write unit tests for this change are excessive,
  please explain why (so that we can fix it whenever it gets refactored).
Confirmed relevant documentation has been updated/added.

Reviewer Checklist

The reviewer of the PR should copy-paste this template into the review comments on review.

Linting code actions have passed.
Ran the code locally based on the test instructions.
- I don’t think this is needed to be tested locally. For example, a padding style change (storybook?) or a logic change (write a test).
I am a member of the engine theme team so that I can approve and merge this. If you're not on the team, you won't have access to approve and merge this pr.
Looked to see that the new or changed code has code coverage, specifically. We want the global code coverage to keep on going up with targeted testing.

edwardcho1231 · 2024-03-22T00:58:29Z

blocks/identity-block/features/login/default.jsx

 	const { Identity, isInitialized } = useIdentity();
+	const [captchaToken, setCaptchaToken] = useState();
+	const [resetRecaptcha, setResetRecaptcha] = useState(true);


what's the purpose of this variable?

Hi @edwardcho1231 similar to reCaptchav2, reCaptchav3 also expires, but in order to grab a new token we need to call executeRecaptcha(). Thus, resetRecaptcha is changing from true to false and viceversa everytime the reCaptcha3 is expired, thus the useEffect() detects this change and we need to grab a new one.

edwardcho1231 · 2024-03-22T01:04:49Z

blocks/identity-block/utils/useRecaptcha.js

+
+	const checkCaptcha = async () => {
+		const identityConfig = await Identity.getConfig();
+		console.log(identityConfig);


console.log

edwardcho1231 · 2024-03-22T01:13:52Z

blocks/identity-block/components/bot-challenge-protection/index.js

+					data-testid="bot-challege-protection-container"
+				>
+					<ReCAPTCHA sitekey={siteKey} onChange={onChange} onExpired={() => {}}/>
+					{captchaError && <Paragraph>{phrases.t("identity-block.bot-protection-error")}</Paragraph>}


I'm getting an error when trying to log-in with recaptcha v2 without clicking reCaptcha box. Error says that Paragraph is not defined. I think we need import statement for Paragraph.

…cha_V3

edwardcho1231

LGTM Thanks.

vgalatro

Just a few issues I see, should be quick fixes. One other thing to note, the root package-lock.json has a lot of changes, please make sure this branch is up to date and you're using Node 18 when running npm i.

vgalatro · 2024-03-26T13:17:53Z

blocks/identity-block/package.json

+    "react-google-recaptcha": "^3.1.0",
+    "react-google-recaptcha-v3": "^1.10.1"


Make sure these are included as devDependencies in the root package.json, otherwise unit tests will fail (and they are in the test and lint action).

vgalatro · 2024-03-26T13:19:49Z

blocks/identity-block/themes/news.json

+				"width": "100%",
+				"margin": 0,
+				"line-height": "150%",
+				"font-size": "1rem",
+				"margin-bottom": "var(--global-spacing-5)",


width, margin, and margin-bottom need to be converted to logical properties.

vgalatro · 2024-03-26T13:21:38Z

blocks/identity-block/themes/news.json

+				"margin-bottom": "var(--global-spacing-5)",
+				"components": {
+					"paragraph": {
+						"font-family": "Inter",


Is there a reason this font-family is hard coded to Inter and not using "var(--font-family-primary)" (which defaults to Inter out of the box)? I'm seeing this in a few other places too.

vgalatro · 2024-03-26T13:22:03Z

blocks/identity-block/themes/news.json

+			"default": {
+				"font-family": "inter",
+				"text-align": "center",
+				"margin-bottom": "var(--global-spacing-4)",


Should be margin-block-end.

vgalatro · 2024-03-26T17:09:04Z

blocks/identity-block/themes/commerce.json

-				"font-family": "var(--font-family-primary)",
+				"font-family": "Inter",


@LauraPinilla , looks like this got flipped. Can it use the var like news.json does?

vgalatro · 2024-03-26T18:27:08Z

There are two failing tests, and some linting errors. Run npm run test:changed-feature-branch and npm run lint:changed-feature-branch to see them.

…cha_V3

vgalatro · 2024-03-27T13:09:21Z

@LauraPinilla , it looks like the last tests you added have a couple of small linting errors. Could you fix those? Thanks.

We just re-enabled our pre-commit and pre-push hooks so you should see any linting errors before hand if you pull the latest from arc-themes-release-version2.3.0.

vgalatro

Everything looks good now, approving!

recaptcha_v3

4ea7443

LauraPinilla requested a review from a team as a code owner March 20, 2024 22:20

LauraPinilla requested review from vgalatro and edwardcho1231 March 20, 2024 22:20

edwardcho1231 reviewed Mar 22, 2024

View reviewed changes

LauraPinilla added 2 commits March 25, 2024 12:40

attending feedback

7dd5bbb

Merge branch 'arc-themes-release-version-2.3.0' into ASUB-8193_ReCapt…

9c37b1a

…cha_V3

LauraPinilla requested a review from edwardcho1231 March 25, 2024 20:09

edwardcho1231 reviewed Mar 25, 2024

View reviewed changes

LauraPinilla added the ready for review The PR author has completed the PR template and is ready for a review label Mar 25, 2024

vgalatro self-assigned this Mar 26, 2024

vgalatro added review in progress A review is underway. Even if an approval has been submitted, wait for all reviews to be completed. and removed ready for review The PR author has completed the PR template and is ready for a review labels Mar 26, 2024

vgalatro suggested changes Mar 26, 2024

View reviewed changes

vgalatro added needs changes The reviewer has requested changes from the PR author and removed review in progress A review is underway. Even if an approval has been submitted, wait for all reviews to be completed. labels Mar 26, 2024

attending feedback

21e8573

LauraPinilla requested a review from vgalatro March 26, 2024 14:19

LauraPinilla added ready for review The PR author has completed the PR template and is ready for a review and removed needs changes The reviewer has requested changes from the PR author labels Mar 26, 2024

attending feedback

ce3a2da

vgalatro reviewed Mar 26, 2024

View reviewed changes

LauraPinilla added 5 commits March 26, 2024 11:19

attending feedback

07ccd82

fixing package-lock.json

ead9e95

fixing package-lock

499cbc4

fixing package-lock

1f8ac1f

fixing lock file

4131a9b

LauraPinilla added 5 commits March 26, 2024 16:07

fixing test and linting errors

2b728c2

Merge branch 'arc-themes-release-version-2.3.0' into ASUB-8193_ReCapt…

3d2daec

…cha_V3

fixing test

257dbf6

add tests

a02b0cf

fixing tests

bbb4714

LauraPinilla requested a review from vgalatro March 27, 2024 02:51

vgalatro added needs changes The reviewer has requested changes from the PR author and removed ready for review The PR author has completed the PR template and is ready for a review labels Mar 27, 2024

fixing linting errors

eaa8e91

LauraPinilla added ready for review The PR author has completed the PR template and is ready for a review and removed needs changes The reviewer has requested changes from the PR author labels Mar 27, 2024

vgalatro approved these changes Mar 27, 2024

View reviewed changes

vgalatro merged commit 20be316 into arc-themes-release-version-2.3.0 Mar 27, 2024
3 of 5 checks passed

vgalatro deleted the ASUB-8193_ReCaptcha_V3 branch March 27, 2024 15:04

LauraPinilla mentioned this pull request Apr 5, 2024

ASUB-8193 ASUB-8192 Google reCaptcha v2 & v3 WPMedia/arc-themes-components#251

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding recaptcha_v3 #2031

Adding recaptcha_v3 #2031

LauraPinilla commented Mar 20, 2024 •

edited by jira bot

Loading

edwardcho1231 Mar 22, 2024

LauraPinilla Mar 25, 2024

edwardcho1231 Mar 22, 2024

edwardcho1231 Mar 22, 2024

edwardcho1231 left a comment

vgalatro left a comment

vgalatro Mar 26, 2024

vgalatro Mar 26, 2024

vgalatro Mar 26, 2024

vgalatro Mar 26, 2024

vgalatro Mar 26, 2024

vgalatro commented Mar 26, 2024

vgalatro commented Mar 27, 2024

vgalatro left a comment

		"react-google-recaptcha": "^3.1.0",
		"react-google-recaptcha-v3": "^1.10.1"

		"font-family": "var(--font-family-primary)",
		"font-family": "Inter",

Adding recaptcha_v3 #2031

Adding recaptcha_v3 #2031

Conversation

LauraPinilla commented Mar 20, 2024 • edited by jira bot Loading

Description

Jira Ticket

Acceptance Criteria

Test Steps

Effect Of Changes

Before

After

Dependencies or Side Effects

Author Checklist

Reviewer Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

edwardcho1231 left a comment

Choose a reason for hiding this comment

vgalatro left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vgalatro commented Mar 26, 2024

vgalatro commented Mar 27, 2024

vgalatro left a comment

Choose a reason for hiding this comment

LauraPinilla commented Mar 20, 2024 •

edited by jira bot

Loading