Integrate captcha token in password sign-in process

In this update, a captcha token is introduced in the password sign-in process to improve security. A `useCaptchaToken` hook has been added to the `PasswordSignInContainer` and corresponding adjustments have been made in the `useSignInWithEmailPassword` hook. The SignInWithPasswordCredentials type is now used for credentials instead of a locally defined interface.

packages/features/auth/src/components/password-sign-in-container.tsx

@@ -6,6 +6,7 @@ import type { z } from 'zod';
 
 import { useSignInWithEmailPassword } from '@kit/supabase/hooks/use-sign-in-with-email-password';
 
+import { useCaptchaToken } from '../captcha/client';
 import type { PasswordSignInSchema } from '../schemas/password-sign-in.schema';
 import { AuthErrorAlert } from './auth-error-alert';
 import { PasswordSignInForm } from './password-sign-in-form';
@@ -13,23 +14,28 @@ import { PasswordSignInForm } from './password-sign-in-form';
 export const PasswordSignInContainer: React.FC<{
   onSignIn?: (userId?: string) => unknown;
 }> = ({ onSignIn }) => {
+  const { captchaToken } = useCaptchaToken();
   const signInMutation = useSignInWithEmailPassword();
   const isLoading = signInMutation.isPending;
 
   const onSubmit = useCallback(
     async (credentials: z.infer<typeof PasswordSignInSchema>) => {
       try {
-        const data = await signInMutation.mutateAsync(credentials);
+        const data = await signInMutation.mutateAsync({
-        const userId = data?.user?.id;
+          ...credentials,
+          options: { captchaToken },
+        });
 
         if (onSignIn) {
+          const userId = data?.user?.id;
+
           onSignIn(userId);
         }
       } catch (e) {
         // wrong credentials, do nothing
       }
     },
-    [onSignIn, signInMutation],
+    [captchaToken, onSignIn, signInMutation],
   );
 
   return (

packages/supabase/src/hooks/use-sign-in-with-email-password.ts

@@ -1,17 +1,14 @@
+import type { SignInWithPasswordCredentials } from '@supabase/supabase-js';
+
 import { useMutation } from '@tanstack/react-query';
 
 import { useSupabase } from './use-supabase';
 
-interface Credentials {
-  email: string;
-  password: string;
-}
-
 export function useSignInWithEmailPassword() {
   const client = useSupabase();
   const mutationKey = ['auth', 'sign-in-with-email-password'];
 
-  const mutationFn = async (credentials: Credentials) => {
+  const mutationFn = async (credentials: SignInWithPasswordCredentials) => {
     const response = await client.auth.signInWithPassword(credentials);
 
     if (response.error) {