B2B-88: add starter kit structure and elements

packages/features/auth/src/hooks/use-sign-up-flow.ts

@@ -0,0 +1,91 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { useAppEvents } from '@kit/shared/events';
+import { useSignUpWithEmailAndPassword } from '@kit/supabase/hooks/use-sign-up-with-email-password';
+
+type SignUpCredentials = {
+  email: string;
+  password: string;
+};
+
+type UseSignUpFlowProps = {
+  emailRedirectTo: string;
+  onSignUp?: (userId?: string) => unknown;
+  captchaToken?: string;
+  resetCaptchaToken?: () => void;
+};
+
+/**
+ * @name usePasswordSignUpFlow
+ * @description
+ * This hook is used to handle the sign up flow using the email and password method.
+ */
+export function usePasswordSignUpFlow({
+  emailRedirectTo,
+  onSignUp,
+  captchaToken,
+  resetCaptchaToken,
+}: UseSignUpFlowProps) {
+  const router = useRouter();
+  const signUpMutation = useSignUpWithEmailAndPassword();
+  const appEvents = useAppEvents();
+
+  const signUp = useCallback(
+    async (credentials: SignUpCredentials) => {
+      if (signUpMutation.isPending) {
+        return;
+      }
+
+      try {
+        const data = await signUpMutation.mutateAsync({
+          ...credentials,
+          emailRedirectTo,
+          captchaToken,
+        });
+
+        // emit event to track sign up
+        appEvents.emit({
+          type: 'user.signedUp',
+          payload: {
+            method: 'password',
+          },
+        });
+
+        // Update URL with success status. This is useful for password managers
+        // to understand that the form was submitted successfully.
+        const url = new URL(window.location.href);
+        url.searchParams.set('status', 'success');
+        router.replace(url.pathname + url.search);
+
+        if (onSignUp) {
+          onSignUp(data.user?.id);
+        }
+      } catch (error) {
+        console.error(error);
+        throw error;
+      } finally {
+        resetCaptchaToken?.();
+      }
+    },
+    [
+      signUpMutation,
+      emailRedirectTo,
+      captchaToken,
+      appEvents,
+      router,
+      onSignUp,
+      resetCaptchaToken,
+    ],
+  );
+
+  return {
+    signUp,
+    loading: signUpMutation.isPending,
+    error: signUpMutation.error,
+    showVerifyEmailAlert: signUpMutation.isSuccess,
+  };
+}