Invite prefill email (#43)

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

packages/features/accounts/package.json

@@ -35,7 +35,7 @@
     "@kit/ui": "workspace:^",
     "@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",
     "@types/react-dom": "^18.3.0",
     "lucide-react": "^0.407.0",

packages/features/accounts/src/components/index.ts

@@ -1 +1 @@
-export * from './user-workspace-context';
+export * from './user-workspace-context';

packages/features/admin/package.json

@@ -22,7 +22,7 @@
     "@makerkit/data-loader-supabase-core": "^0.0.8",
     "@makerkit/data-loader-supabase-nextjs": "^1.2.3",
     "@supabase/supabase-js": "^2.44.3",
-    "@tanstack/react-query": "5.50.1",
+    "@tanstack/react-query": "5.51.1",
     "@tanstack/react-table": "^8.19.2",
     "@types/react": "^18.3.3",
     "lucide-react": "^0.407.0",

packages/features/admin/src/components/admin-account-page.tsx

@@ -8,7 +8,6 @@ import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
 import { ProfileAvatar } from '@kit/ui/profile-avatar';
-
 import {
   Table,
   TableBody,

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'}>

packages/features/notifications/package.json

@@ -21,7 +21,7 @@
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@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",
     "react": "18.3.1",

packages/features/team-accounts/package.json

@@ -33,7 +33,7 @@
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:^",
     "@supabase/supabase-js": "^2.44.3",
-    "@tanstack/react-query": "5.50.1",
+    "@tanstack/react-query": "5.51.1",
     "@tanstack/react-table": "^8.19.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

packages/features/team-accounts/src/components/index.ts

@@ -5,4 +5,4 @@ export * from './invitations/account-invitations-table';
 export * from './settings/team-account-settings-container';
 export * from './invitations/accept-invitation-container';
 export * from './create-team-account-dialog';
-export * from './team-account-workspace-context';
+export * from './team-account-workspace-context';

packages/features/team-accounts/src/server/services/webhooks/account-invitations-webhook.service.ts

@@ -102,9 +102,10 @@ class AccountInvitationsWebhookService {
       const { getMailer } = await import('@kit/mailers');
 
       const mailer = await getMailer();
+      const link = this.getInvitationLink(invitation.invite_token, invitation.email);
 
       const { html, subject } = await renderInviteEmail({
-        link: this.getInvitationLink(invitation.invite_token),
+        link,
         invitedUserEmail: invitation.email,
         inviter: inviter.data.name ?? inviter.data.email ?? '',
         productName: env.productName,
@@ -141,7 +142,14 @@ class AccountInvitationsWebhookService {
     }
   }
 
-  private getInvitationLink(token: string) {
-    return new URL(env.invitePath, env.siteURL).href + `?invite_token=${token}`;
+  private getInvitationLink(token: string, email: string) {
+    const searchParams = new URLSearchParams({
+      invite_token: token,
+      email,
+    }).toString();
+
+    const href = new URL(env.invitePath, env.siteURL).href;
+
+    return `${href}?${searchParams}`;
   }
 }