Invite prefill email (#43)

* Add prepopulation of email field in sign-up form
* Updated packages

packages/features/auth/package.json

@@ -26,10 +26,10 @@
     "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:^",
-    "@marsidev/react-turnstile": "^0.7.1",
+    "@marsidev/react-turnstile": "^0.7.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@supabase/supabase-js": "^2.44.3",
-    "@tanstack/react-query": "5.50.1",
+    "@tanstack/react-query": "5.51.1",
     "@types/react": "^18.3.3",
     "lucide-react": "^0.407.0",
     "next": "14.2.5",

packages/features/auth/src/components/magic-link-auth-container.tsx

@@ -28,10 +28,14 @@ export function MagicLinkAuthContainer({
   inviteToken,
   redirectUrl,
   shouldCreateUser,
+  defaultValues,
 }: {
   inviteToken?: string;
   redirectUrl: string;
   shouldCreateUser: boolean;
+  defaultValues?: {
+    email: string;
+  };
 }) {
   const { captchaToken, resetCaptchaToken } = useCaptchaToken();
   const { t } = useTranslation();
@@ -44,7 +48,7 @@ export function MagicLinkAuthContainer({
       }),
     ),
     defaultValues: {
-      email: '',
+      email: defaultValues?.email ?? ''
     },
   });
 

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

@@ -14,11 +14,16 @@ import { AuthErrorAlert } from './auth-error-alert';
 import { PasswordSignUpForm } from './password-sign-up-form';
 
 interface EmailPasswordSignUpContainerProps {
+  defaultValues?: {
+    email: string;
+  };
+
   onSignUp?: (userId?: string) => unknown;
   emailRedirectTo: string;
 }
 
 export function EmailPasswordSignUpContainer({
+  defaultValues,
   onSignUp,
   emailRedirectTo,
 }: EmailPasswordSignUpContainerProps) {
@@ -72,7 +77,11 @@ export function EmailPasswordSignUpContainer({
       <If condition={!showVerifyEmailAlert}>
         <AuthErrorAlert error={signUpMutation.error} />
 
-        <PasswordSignUpForm onSubmit={onSignupRequested} loading={loading} />
+        <PasswordSignUpForm
+          onSubmit={onSignupRequested}
+          loading={loading}
+          defaultValues={defaultValues}
+        />
       </If>
     </>
   );

packages/features/auth/src/components/password-sign-up-form.tsx

@@ -22,9 +22,14 @@ import { Trans } from '@kit/ui/trans';
 import { PasswordSignUpSchema } from '../schemas/password-sign-up.schema';
 
 export function PasswordSignUpForm({
+  defaultValues,
   onSubmit,
   loading,
 }: {
+  defaultValues?: {
+    email: string;
+  };
+
   onSubmit: (params: {
     email: string;
     password: string;
@@ -37,7 +42,7 @@ export function PasswordSignUpForm({
   const form = useForm({
     resolver: zodResolver(PasswordSignUpSchema),
     defaultValues: {
-      email: '',
+      email: defaultValues?.email ?? '',
       password: '',
       repeatPassword: '',
     },

packages/features/auth/src/components/sign-up-methods-container.tsx

@@ -27,7 +27,8 @@ export function SignUpMethodsContainer(props: {
   inviteToken?: string;
 }) {
   const redirectUrl = getCallbackUrl(props);
-
+  const defaultValues = getDefaultValues();
+  
   return (
     <>
       <If condition={props.inviteToken}>
@@ -35,7 +36,10 @@ export function SignUpMethodsContainer(props: {
       </If>
 
       <If condition={props.providers.password}>
-        <EmailPasswordSignUpContainer emailRedirectTo={redirectUrl} />
+        <EmailPasswordSignUpContainer
+          emailRedirectTo={redirectUrl}
+          defaultValues={defaultValues}
+        />
       </If>
 
       <If condition={props.providers.magicLink}>
@@ -43,6 +47,7 @@ export function SignUpMethodsContainer(props: {
           inviteToken={props.inviteToken}
           redirectUrl={redirectUrl}
           shouldCreateUser={true}
+          defaultValues={defaultValues}
         />
       </If>
 
@@ -93,6 +98,23 @@ function getCallbackUrl(props: {
   return url.href;
 }
 
+function getDefaultValues() {
+  if (!isBrowser()) {
+    return { email: '' };
+  }
+
+  const searchParams = new URLSearchParams(window.location.search);
+  const inviteToken = searchParams.get('invite_token');
+
+  if (!inviteToken) {
+    return { email: '' };
+  }
+
+  return {
+    email: searchParams.get('email') ?? '',
+  };
+}
+
 function InviteAlert() {
   return (
     <Alert variant={'info'}>