Captcha Refactoring (#397)

* refactor: replace useCaptchaToken with useCaptcha hook and integrate CaptchaField across forms

apps/web/app/auth/sign-in/page.tsx

@@ -46,7 +46,11 @@ async function SignInPage({ searchParams }: SignInPageProps) {
         </p>
       </div>
 
-      <SignInMethodsContainer paths={paths} providers={authConfig.providers} />
+      <SignInMethodsContainer
+        paths={paths}
+        providers={authConfig.providers}
+        captchaSiteKey={authConfig.captchaTokenSiteKey}
+      />
 
       <div className={'flex justify-center'}>
         <Button asChild variant={'link'} size={'sm'}>

apps/web/components/root-providers.tsx

@@ -2,11 +2,8 @@
 
 import { useMemo } from 'react';
 
-import dynamic from 'next/dynamic';
-
 import { ThemeProvider } from 'next-themes';
 
-import { CaptchaProvider } from '@kit/auth/captcha/client';
 import { I18nProvider } from '@kit/i18n/provider';
 import { MonitoringProvider } from '@kit/monitoring/components';
 import { AppEventsProvider } from '@kit/shared/events';
@@ -16,27 +13,12 @@ import { VersionUpdater } from '@kit/ui/version-updater';
 import { AnalyticsProvider } from '~/components/analytics-provider';
 import { AuthProvider } from '~/components/auth-provider';
 import appConfig from '~/config/app.config';
-import authConfig from '~/config/auth.config';
 import featuresFlagConfig from '~/config/feature-flags.config';
 import { i18nResolver } from '~/lib/i18n/i18n.resolver';
 import { getI18nSettings } from '~/lib/i18n/i18n.settings';
 
 import { ReactQueryProvider } from './react-query-provider';
 
-const captchaSiteKey = authConfig.captchaTokenSiteKey;
-
-const CaptchaTokenSetter = dynamic(async () => {
-  if (!captchaSiteKey) {
-    return Promise.resolve(() => null);
-  }
-
-  const { CaptchaTokenSetter } = await import('@kit/auth/captcha/client');
-
-  return {
-    default: CaptchaTokenSetter,
-  };
-});
-
 type RootProvidersProps = React.PropsWithChildren<{
   // The language to use for the app (optional)
   lang?: string;
@@ -60,22 +42,18 @@ export function RootProviders({
         <AnalyticsProvider>
           <ReactQueryProvider>
             <I18nProvider settings={i18nSettings} resolver={i18nResolver}>
-              <CaptchaProvider>
-                <CaptchaTokenSetter siteKey={captchaSiteKey} nonce={nonce} />
-
-                <AuthProvider>
-                  <ThemeProvider
-                    attribute="class"
-                    enableSystem
-                    disableTransitionOnChange
-                    defaultTheme={theme}
-                    enableColorScheme={false}
-                    nonce={nonce}
-                  >
-                    {children}
-                  </ThemeProvider>
-                </AuthProvider>
-              </CaptchaProvider>
+              <AuthProvider>
+                <ThemeProvider
+                  attribute="class"
+                  enableSystem
+                  disableTransitionOnChange
+                  defaultTheme={theme}
+                  enableColorScheme={false}
+                  nonce={nonce}
+                >
+                  {children}
+                </ThemeProvider>
+              </AuthProvider>
 
               <If condition={featuresFlagConfig.enableVersionUpdater}>
                 <VersionUpdater />