Skip to content

Google Recaptcha support for login screen#607

Merged
rajat1saxena merged 5 commits intomainfrom
feat/recaptcha-login-form
Aug 7, 2025
Merged

Google Recaptcha support for login screen#607
rajat1saxena merged 5 commits intomainfrom
feat/recaptcha-login-form

Conversation

@rajat1saxena
Copy link
Copy Markdown
Member

No description provided.

google-labs-jules bot and others added 5 commits August 7, 2025 00:34
Integrates Google reCAPTCHA v3 into the login form located at
`apps/web/app/(with-contexts)/(with-layout)/login/login-form.tsx`.

This change utilizes the existing reCAPTCHA framework:
- The `useRecaptcha` hook is used to generate a token for the 'login_code_request' action.
- The token is verified by the `/api/recaptcha` endpoint.
- If reCAPTCHA verification is successful and the score is adequate,
  the request to generate a login code proceeds.
- If verification fails or the score is too low, an error message is
  displayed to you via a toast notification, and the login code
  request is blocked.
- Loading states and error handling have been updated to incorporate
  the reCAPTCHA verification step.
… `apps/web` directory as you requested. The reCAPTCHA integration itself is still in place, but this particular documentation file has been deleted.
Deletes the `recaptcha-example-form.tsx` file from `apps/web/components`
as per your request. The reCAPTCHA integration into the login form
remains, but this standalone example component has been removed.
I've refactored the reCAPTCHA v3 integration to obtain the site key at runtime
via the `/api/config` endpoint and a React context, instead of relying
on build-time environment variables (`process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY`)
for client-side usage.

Here's what I changed:
- Modified `apps/web/app/api/config/route.ts` to include `recaptchaSiteKey`
  (sourced from server-side `process.env.RECAPTCHA_SITE_KEY`) in its response.
- Updated the `ServerConfig` interface in `packages/common-models/src/server-config.ts`
  to include `recaptchaSiteKey`.
- Updated `apps/web/app/(with-contexts)/layout.tsx` to populate the
  `recaptchaSiteKey` in the `config` object passed to `LayoutWithContext`,
  making it available via `ServerConfigContext`.
- Removed the reCAPTCHA script loading from `apps/web/app/layout.tsx`.
- Created `apps/web/components/recaptcha-script-loader.tsx`, a client
  component that loads the reCAPTCHA script using the site key from
  `ServerConfigContext`. This loader is rendered in
  `apps/web/app/(with-contexts)/layout-with-context.tsx`.
- Updated `apps/web/hooks/use-recaptcha.ts` to consume `ServerConfigContext`
  to get the `recaptchaSiteKey`, instead of using `process.env`.
@rajat1saxena rajat1saxena self-assigned this Aug 7, 2025
@vercel
Copy link
Copy Markdown

vercel bot commented Aug 7, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
courselit-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 7, 2025 5:18am

@rajat1saxena rajat1saxena merged commit 20f35fe into main Aug 7, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant