@baseplate-dev/plugin-auth 0.6.17 → 0.6.19

package/dist/local-auth/core/generators/auth-routes/templates/routes/auth_/login-otp.js

@@ -0,0 +1,184 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import { EMAIL_OTP_LENGTH, EMAIL_OTP_RESEND_COOLDOWN_SEC } from '$otpConstants';
+import { getApolloErrorCode } from '%apolloErrorImports';
+import { graphql } from '%graphqlImports';
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, InputFieldController, InputOtpFieldController, toast, } from '%reactComponentsImports';
+import { logAndFormatError, logError } from '%reactErrorImports';
+import { userSessionClient } from '%reactSessionImports';
+import { useMutation } from '@apollo/client/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { createFileRoute, Link, redirect, useNavigate, } from '@tanstack/react-router';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+export const Route = createFileRoute('/auth_/login-otp')({
+    validateSearch: z.object({
+        return_to: z
+            .string()
+            .refine((v) => v.startsWith('/') && !v.startsWith('//'))
+            .optional(),
+    }),
+    component: LoginOtpPage,
+    beforeLoad: ({ search: { return_to }, context: { userId } }) => {
+        if (userId) {
+            throw redirect({ to: return_to ?? '/' });
+        }
+    },
+});
+const emailSchema = z.object({
+    email: z
+        .email('Please enter a valid email address')
+        .transform((value) => value.toLowerCase()),
+});
+const codeSchema = z.object({
+    code: z
+        .string()
+        .length(EMAIL_OTP_LENGTH, `Enter the ${EMAIL_OTP_LENGTH}-digit code`),
+    name: z.string().max(100).optional(),
+});
+const requestEmailOtpMutation = graphql(`
+  mutation RequestEmailOtp($input: RequestEmailOtpInput!) {
+    requestEmailOtp(input: $input) {
+      success
+    }
+  }
+`);
+const signInWithEmailOtpMutation = graphql(`
+  mutation SignInWithEmailOtp($input: SignInWithEmailOtpInput!) {
+    signInWithEmailOtp(input: $input) {
+      session {
+        userId
+        roles
+      }
+    }
+  }
+`);
+function LoginOtpPage() {
+    const [sentToEmail, setSentToEmail] = useState();
+    // Set once the server reports the code is valid but the address is new and
+    // needs a name. Revealing the field any earlier would leak whether an
+    // account exists.
+    const [needsName, setNeedsName] = useState(false);
+    const [resendCooldown, setResendCooldown] = useState(0);
+    const navigate = useNavigate();
+    const { return_to } = Route.useSearch();
+    useEffect(() => {
+        if (resendCooldown <= 0)
+            return;
+        const timer = setTimeout(() => {
+            setResendCooldown((seconds) => seconds - 1);
+        }, 1000);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [resendCooldown]);
+    const emailForm = useForm({
+        resolver: zodResolver(emailSchema),
+        reValidateMode: 'onBlur',
+    });
+    const codeForm = useForm({
+        resolver: zodResolver(codeSchema),
+        reValidateMode: 'onBlur',
+    });
+    const [requestEmailOtp, { loading: isRequesting }] = useMutation(requestEmailOtpMutation);
+    const [signInWithEmailOtp, { loading: isVerifying }] = useMutation(signInWithEmailOtpMutation);
+    const onRequestCode = ({ email }) => {
+        requestEmailOtp({ variables: { input: { email } } })
+            .then(() => {
+            setSentToEmail(email);
+            setResendCooldown(EMAIL_OTP_RESEND_COOLDOWN_SEC);
+            // Only the code is cleared: a resend keeps any name already collected
+            // so the user does not have to type it a second time.
+            codeForm.resetField('code');
+        })
+            .catch((err) => {
+            const errorCode = getApolloErrorCode(err, ['too-many-requests']);
+            if (errorCode === 'too-many-requests') {
+                const message = 'Too many sign-in code requests. Please try again later.';
+                // The email form is unmounted once a code has been sent, so a
+                // rate-limited resend has nowhere to show a field error.
+                if (sentToEmail) {
+                    toast.error(message);
+                }
+                else {
+                    emailForm.setError('email', { message });
+                }
+                return;
+            }
+            toast.error(logAndFormatError(err, 'Sorry, we could not send you a code.'));
+        });
+    };
+    const onVerifyCode = ({ code, name }) => {
+        if (!sentToEmail)
+            return;
+        const trimmedName = name?.trim();
+        // Send a blank name as absent so the server answers with `name-required`
+        // rather than a validation error.
+        const nameInput = trimmedName ? trimmedName : undefined;
+        if (needsName && !nameInput) {
+            codeForm.setError('name', { message: 'Please enter your name' }, { shouldFocus: true });
+            return;
+        }
+        signInWithEmailOtp({
+            variables: { input: { email: sentToEmail, code, name: nameInput } },
+        })
+            .then(({ data }) => {
+            if (!data) {
+                throw new Error('No data returned from sign-in mutation');
+            }
+            const { userId, roles } = data.signInWithEmailOtp.session;
+            userSessionClient.signIn(userId, roles);
+            navigate({ to: return_to ?? '/', replace: true }).catch(logError);
+        })
+            .catch((err) => {
+            const errorCode = getApolloErrorCode(err, [
+                'invalid-code',
+                'name-required',
+                'too-many-requests',
+                'verification-context-missing',
+            ]);
+            switch (errorCode) {
+                case 'invalid-code': {
+                    codeForm.setError('code', { message: 'That code is incorrect or has expired' }, { shouldFocus: true });
+                    break;
+                }
+                case 'verification-context-missing': {
+                    codeForm.setError('code', {
+                        message: 'Codes can only be used in the browser that requested them. Request a new one to continue.',
+                    });
+                    break;
+                }
+                case 'name-required': {
+                    // The code is still valid — collect a name and submit it again.
+                    setNeedsName(true);
+                    codeForm.setError('name', { message: 'Please enter your name' }, { shouldFocus: true });
+                    break;
+                }
+                case 'too-many-requests': {
+                    codeForm.setError('code', {
+                        message: 'Too many attempts. Please try again later.',
+                    });
+                    break;
+                }
+                case null: {
+                    toast.error(logAndFormatError(err, 'Sorry, we could not sign you in.'));
+                }
+            }
+        });
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: [!sentToEmail && 'Sign in with a code', sentToEmail &&
+                                (needsName ? 'Finish creating your account' : 'Enter your code')] }), _jsxs(CardDescription, { children: [!sentToEmail &&
+                                `We'll email you a code so you can sign in without a password.`, sentToEmail &&
+                                (needsName
+                                    ? 'Your code checked out — tell us your name to finish setting up your account.'
+                                    : `We sent a ${EMAIL_OTP_LENGTH}-digit code to ${sentToEmail}.`)] })] }), _jsx(CardContent, { children: sentToEmail ? (_jsxs("form", { onSubmit: codeForm.handleSubmit(onVerifyCode), children: [_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(InputOtpFieldController, { control: codeForm.control, name: "code", length: EMAIL_OTP_LENGTH }), needsName && (_jsx(InputFieldController, { control: codeForm.control, name: "name", label: "Your name", autoComplete: "name", className: "w-full" })), _jsx(Button, { type: "submit", className: "w-full", disabled: isVerifying, children: needsName ? 'Create account' : 'Sign in' })] }), _jsxs("div", { className: "mt-4 flex flex-col gap-4 text-center text-sm", children: [_jsx("button", { type: "button", className: "text-muted-foreground underline-offset-4 hover:underline disabled:no-underline disabled:opacity-70", disabled: resendCooldown > 0 || isRequesting, onClick: () => {
+                                        onRequestCode({ email: sentToEmail });
+                                    }, children: resendCooldown > 0
+                                        ? `Resend code in ${resendCooldown}s`
+                                        : 'Resend code' }), _jsx("button", { type: "button", className: "text-muted-foreground underline-offset-4 hover:underline", onClick: () => {
+                                        setSentToEmail(undefined);
+                                        setNeedsName(false);
+                                    }, children: "Use a different email" })] })] })) : (_jsxs("form", { onSubmit: emailForm.handleSubmit(onRequestCode), children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(InputFieldController, { control: emailForm.control, name: "email", type: "email", autoComplete: "email", placeholder: "user@example.com" }), _jsx(Button, { type: "submit", className: "w-full", disabled: isRequesting, children: "Email me a code" })] }), _jsx("div", { className: "mt-4 flex flex-col gap-4 text-center text-sm", children: _jsx(Link, { to: "/auth/login", search: { return_to }, className: "text-muted-foreground underline-offset-4 hover:underline", children: "Sign in with a password instead" }) })] })) })] }));
+}
+//# sourceMappingURL=login-otp.js.map

package/dist/local-auth/core/generators/auth-routes/templates/routes/auth_/login-otp.tsx

@@ -0,0 +1,312 @@
+// @ts-nocheck
+
+import { EMAIL_OTP_LENGTH, EMAIL_OTP_RESEND_COOLDOWN_SEC } from '$otpConstants';
+import { getApolloErrorCode } from '%apolloErrorImports';
+import { graphql } from '%graphqlImports';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  InputFieldController,
+  InputOtpFieldController,
+  toast,
+} from '%reactComponentsImports';
+import { logAndFormatError, logError } from '%reactErrorImports';
+import { userSessionClient } from '%reactSessionImports';
+import { useMutation } from '@apollo/client/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  createFileRoute,
+  Link,
+  redirect,
+  useNavigate,
+} from '@tanstack/react-router';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+export const Route = createFileRoute('/auth_/login-otp')({
+  validateSearch: z.object({
+    return_to: z
+      .string()
+      .refine((v) => v.startsWith('/') && !v.startsWith('//'))
+      .optional(),
+  }),
+  component: LoginOtpPage,
+  beforeLoad: ({ search: { return_to }, context: { userId } }) => {
+    if (userId) {
+      throw redirect({ to: return_to ?? '/' });
+    }
+  },
+});
+
+const emailSchema = z.object({
+  email: z
+    .email('Please enter a valid email address')
+    .transform((value) => value.toLowerCase()),
+});
+
+const codeSchema = z.object({
+  code: z
+    .string()
+    .length(EMAIL_OTP_LENGTH, `Enter the ${EMAIL_OTP_LENGTH}-digit code`),
+  name: z.string().max(100).optional(),
+});
+
+type EmailFormData = z.infer<typeof emailSchema>;
+type CodeFormData = z.infer<typeof codeSchema>;
+
+const requestEmailOtpMutation = graphql(`
+  mutation RequestEmailOtp($input: RequestEmailOtpInput!) {
+    requestEmailOtp(input: $input) {
+      success
+    }
+  }
+`);
+
+const signInWithEmailOtpMutation = graphql(`
+  mutation SignInWithEmailOtp($input: SignInWithEmailOtpInput!) {
+    signInWithEmailOtp(input: $input) {
+      session {
+        userId
+        roles
+      }
+    }
+  }
+`);
+
+function LoginOtpPage(): React.JSX.Element {
+  const [sentToEmail, setSentToEmail] = useState<string | undefined>();
+  // Set once the server reports the code is valid but the address is new and
+  // needs a name. Revealing the field any earlier would leak whether an
+  // account exists.
+  const [needsName, setNeedsName] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+  const navigate = useNavigate();
+  const { return_to } = Route.useSearch();
+
+  useEffect(() => {
+    if (resendCooldown <= 0) return;
+    const timer = setTimeout(() => {
+      setResendCooldown((seconds) => seconds - 1);
+    }, 1000);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [resendCooldown]);
+
+  const emailForm = useForm<EmailFormData>({
+    resolver: zodResolver(emailSchema),
+    reValidateMode: 'onBlur',
+  });
+  const codeForm = useForm<CodeFormData>({
+    resolver: zodResolver(codeSchema),
+    reValidateMode: 'onBlur',
+  });
+
+  const [requestEmailOtp, { loading: isRequesting }] = useMutation(
+    requestEmailOtpMutation,
+  );
+  const [signInWithEmailOtp, { loading: isVerifying }] = useMutation(
+    signInWithEmailOtpMutation,
+  );
+
+  const onRequestCode = ({ email }: EmailFormData): void => {
+    requestEmailOtp({ variables: { input: { email } } })
+      .then(() => {
+        setSentToEmail(email);
+        setResendCooldown(EMAIL_OTP_RESEND_COOLDOWN_SEC);
+        // Only the code is cleared: a resend keeps any name already collected
+        // so the user does not have to type it a second time.
+        codeForm.resetField('code');
+      })
+      .catch((err: unknown) => {
+        const errorCode = getApolloErrorCode(err, ['too-many-requests']);
+        if (errorCode === 'too-many-requests') {
+          const message =
+            'Too many sign-in code requests. Please try again later.';
+          // The email form is unmounted once a code has been sent, so a
+          // rate-limited resend has nowhere to show a field error.
+          if (sentToEmail) {
+            toast.error(message);
+          } else {
+            emailForm.setError('email', { message });
+          }
+          return;
+        }
+        toast.error(
+          logAndFormatError(err, 'Sorry, we could not send you a code.'),
+        );
+      });
+  };
+
+  const onVerifyCode = ({ code, name }: CodeFormData): void => {
+    if (!sentToEmail) return;
+    const trimmedName = name?.trim();
+    // Send a blank name as absent so the server answers with `name-required`
+    // rather than a validation error.
+    const nameInput = trimmedName ? trimmedName : undefined;
+    if (needsName && !nameInput) {
+      codeForm.setError(
+        'name',
+        { message: 'Please enter your name' },
+        { shouldFocus: true },
+      );
+      return;
+    }
+    signInWithEmailOtp({
+      variables: { input: { email: sentToEmail, code, name: nameInput } },
+    })
+      .then(({ data }) => {
+        if (!data) {
+          throw new Error('No data returned from sign-in mutation');
+        }
+        const { userId, roles } = data.signInWithEmailOtp.session;
+        userSessionClient.signIn(userId, roles);
+
+        navigate({ to: return_to ?? '/', replace: true }).catch(logError);
+      })
+      .catch((err: unknown) => {
+        const errorCode = getApolloErrorCode(err, [
+          'invalid-code',
+          'name-required',
+          'too-many-requests',
+          'verification-context-missing',
+        ] as const);
+        switch (errorCode) {
+          case 'invalid-code': {
+            codeForm.setError(
+              'code',
+              { message: 'That code is incorrect or has expired' },
+              { shouldFocus: true },
+            );
+            break;
+          }
+          case 'verification-context-missing': {
+            codeForm.setError('code', {
+              message:
+                'Codes can only be used in the browser that requested them. Request a new one to continue.',
+            });
+            break;
+          }
+          case 'name-required': {
+            // The code is still valid — collect a name and submit it again.
+            setNeedsName(true);
+            codeForm.setError(
+              'name',
+              { message: 'Please enter your name' },
+              { shouldFocus: true },
+            );
+            break;
+          }
+          case 'too-many-requests': {
+            codeForm.setError('code', {
+              message: 'Too many attempts. Please try again later.',
+            });
+            break;
+          }
+          case null: {
+            toast.error(
+              logAndFormatError(err, 'Sorry, we could not sign you in.'),
+            );
+          }
+        }
+      });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          {!sentToEmail && 'Sign in with a code'}
+          {sentToEmail &&
+            (needsName ? 'Finish creating your account' : 'Enter your code')}
+        </CardTitle>
+        <CardDescription>
+          {!sentToEmail &&
+            `We'll email you a code so you can sign in without a password.`}
+          {sentToEmail &&
+            (needsName
+              ? 'Your code checked out — tell us your name to finish setting up your account.'
+              : `We sent a ${EMAIL_OTP_LENGTH}-digit code to ${sentToEmail}.`)}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {sentToEmail ? (
+          <form onSubmit={codeForm.handleSubmit(onVerifyCode)}>
+            <div className="flex flex-col items-center gap-4">
+              <InputOtpFieldController
+                control={codeForm.control}
+                name="code"
+                length={EMAIL_OTP_LENGTH}
+              />
+              {needsName && (
+                <InputFieldController
+                  control={codeForm.control}
+                  name="name"
+                  label="Your name"
+                  autoComplete="name"
+                  className="w-full"
+                />
+              )}
+              <Button type="submit" className="w-full" disabled={isVerifying}>
+                {needsName ? 'Create account' : 'Sign in'}
+              </Button>
+            </div>
+            <div className="mt-4 flex flex-col gap-4 text-center text-sm">
+              <button
+                type="button"
+                className="text-muted-foreground underline-offset-4 hover:underline disabled:no-underline disabled:opacity-70"
+                disabled={resendCooldown > 0 || isRequesting}
+                onClick={() => {
+                  onRequestCode({ email: sentToEmail });
+                }}
+              >
+                {resendCooldown > 0
+                  ? `Resend code in ${resendCooldown}s`
+                  : 'Resend code'}
+              </button>
+              <button
+                type="button"
+                className="text-muted-foreground underline-offset-4 hover:underline"
+                onClick={() => {
+                  setSentToEmail(undefined);
+                  setNeedsName(false);
+                }}
+              >
+                Use a different email
+              </button>
+            </div>
+          </form>
+        ) : (
+          <form onSubmit={emailForm.handleSubmit(onRequestCode)}>
+            <div className="flex flex-col gap-4">
+              <InputFieldController
+                control={emailForm.control}
+                name="email"
+                type="email"
+                autoComplete="email"
+                placeholder="user@example.com"
+              />
+              <Button type="submit" className="w-full" disabled={isRequesting}>
+                Email me a code
+              </Button>
+            </div>
+            <div className="mt-4 flex flex-col gap-4 text-center text-sm">
+              <Link
+                to="/auth/login"
+                search={{ return_to }}
+                className="text-muted-foreground underline-offset-4 hover:underline"
+              >
+                Sign in with a password instead
+              </Link>
+            </div>
+          </form>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/dist/local-auth/core/generators/auth-routes/templates/routes/auth_/login.js

@@ -3,14 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH } from '$constants';
 import { getApolloErrorCode } from '%apolloErrorImports';
 import { graphql } from '%graphqlImports';
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, InputFieldController, } from '%reactComponentsImports';
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, InputFieldController, toast, } from '%reactComponentsImports';
 import { logAndFormatError, logError } from '%reactErrorImports';
 import { userSessionClient } from '%reactSessionImports';
 import { useMutation } from '@apollo/client/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createFileRoute, Link, redirect, useNavigate, } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { z } from 'zod';
 export const Route = createFileRoute('/auth_/login')({
     validateSearch: z.object({
@@ -40,6 +39,7 @@ const loginWithEmailPasswordMutation = graphql(`
     loginWithEmailPassword(input: $input) {
       session {
         userId
+        roles
       }
     }
   }
@@ -65,8 +65,8 @@ function LoginPage() {
             if (!data) {
                 throw new Error('No data returned from login mutation');
             }
-            const { userId } = data.loginWithEmailPassword.session;
-            userSessionClient.signIn(userId);
+            const { userId, roles } = data.loginWithEmailPassword.session;
+            userSessionClient.signIn(userId, roles);
             navigate({ to: return_to ?? '/', replace: true }).catch(logError);
         })
             .catch((err) => {
@@ -95,6 +95,6 @@ function LoginPage() {
             }
         });
     };
-    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Login to your account" }), _jsx(CardDescription, { children: "Enter your email below to login to your account" })] }), _jsx(CardContent, { children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(InputFieldController, { control: control, name: "email", type: "email", autoComplete: "email", placeholder: "user@example.com" }), _jsx(InputFieldController, { control: control, name: "password", type: "password", autoComplete: "current-password", placeholder: "Password" }), _jsx(Button, { type: "submit", className: "w-full", disabled: loading, children: "Login" })] }), _jsxs("div", { className: "mt-4 flex flex-col gap-4 text-center text-sm", children: [_jsx(Link, { to: "/auth/forgot-password", className: "text-muted-foreground underline-offset-4 hover:underline", children: "Forgot your password?" }), _jsxs("div", { children: ["Don't have an account?", ' ', _jsx(Link, { to: "/auth/register", className: "underline underline-offset-4", children: "Sign up" })] })] })] }) })] }));
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Login to your account" }), _jsx(CardDescription, { children: "Enter your email below to login to your account" })] }), _jsx(CardContent, { children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(InputFieldController, { control: control, name: "email", type: "email", autoComplete: "email", placeholder: "user@example.com" }), _jsx(InputFieldController, { control: control, name: "password", type: "password", autoComplete: "current-password", placeholder: "Password" }), _jsx(Button, { type: "submit", className: "w-full", disabled: loading, children: "Login" })] }), _jsxs("div", { className: "mt-4 flex flex-col gap-4 text-center text-sm", children: [_jsx(TPL_OTP_LOGIN_LINK, {}), _jsx(Link, { to: "/auth/forgot-password", className: "text-muted-foreground underline-offset-4 hover:underline", children: "Forgot your password?" }), _jsx(TPL_REGISTER_LINK, {})] })] }) })] }));
 }
 //# sourceMappingURL=login.js.map

package/dist/local-auth/core/generators/auth-routes/templates/routes/auth_/login.tsx

@@ -11,6 +11,7 @@ import {
   CardHeader,
   CardTitle,
   InputFieldController,
+  toast,
 } from '%reactComponentsImports';
 import { logAndFormatError, logError } from '%reactErrorImports';
 import { userSessionClient } from '%reactSessionImports';
@@ -23,7 +24,6 @@ import {
   useNavigate,
 } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { z } from 'zod';
 
 export const Route = createFileRoute('/auth_/login')({
@@ -61,6 +61,7 @@ const loginWithEmailPasswordMutation = graphql(`
     loginWithEmailPassword(input: $input) {
       session {
         userId
+        roles
       }
     }
   }
@@ -95,8 +96,8 @@ function LoginPage(): React.JSX.Element {
         if (!data) {
           throw new Error('No data returned from login mutation');
         }
-        const { userId } = data.loginWithEmailPassword.session;
-        userSessionClient.signIn(userId);
+        const { userId, roles } = data.loginWithEmailPassword.session;
+        userSessionClient.signIn(userId, roles);
 
         navigate({ to: return_to ?? '/', replace: true }).catch(logError);
       })
@@ -164,21 +165,14 @@ function LoginPage(): React.JSX.Element {
             </Button>
           </div>
           <div className="mt-4 flex flex-col gap-4 text-center text-sm">
+            <TPL_OTP_LOGIN_LINK />
             <Link
               to="/auth/forgot-password"
               className="text-muted-foreground underline-offset-4 hover:underline"
             >
               Forgot your password?
             </Link>
-            <div>
-              Don&apos;t have an account?{' '}
-              <Link
-                to="/auth/register"
-                className="underline underline-offset-4"
-              >
-                Sign up
-              </Link>
-            </div>
+            <TPL_REGISTER_LINK />
           </div>
         </form>
       </CardContent>

package/dist/local-auth/core/generators/auth-routes/templates/routes/auth_/register.js

@@ -2,14 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import { getApolloErrorCode } from '%apolloErrorImports';
 import { graphql } from '%graphqlImports';
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, InputFieldController, } from '%reactComponentsImports';
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, InputFieldController, toast, } from '%reactComponentsImports';
 import { logAndFormatError, logError } from '%reactErrorImports';
 import { userSessionClient } from '%reactSessionImports';
 import { useMutation } from '@apollo/client/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createFileRoute, Link, redirect, useNavigate, } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { z } from 'zod';
 export const Route = createFileRoute('/auth_/register')({
     validateSearch: z.object({
@@ -31,6 +30,7 @@ const registerWithEmailPasswordMutation = graphql(`
     registerWithEmailPassword(input: $input) {
       session {
         userId
+        roles
       }
     }
   }
@@ -53,8 +53,8 @@ function RegisterPage() {
             if (!data) {
                 throw new Error('No data returned from login mutation');
             }
-            const { userId } = data.registerWithEmailPassword.session;
-            userSessionClient.signIn(userId);
+            const { userId, roles } = data.registerWithEmailPassword.session;
+            userSessionClient.signIn(userId, roles);
             navigate({ to: return_to ?? '/', replace: true }).catch(logError);
         })
             .catch((err) => {

package/dist/local-auth/core/generators/auth-routes/templates/routes/auth_/register.tsx

@@ -10,6 +10,7 @@ import {
   CardHeader,
   CardTitle,
   InputFieldController,
+  toast,
 } from '%reactComponentsImports';
 import { logAndFormatError, logError } from '%reactErrorImports';
 import { userSessionClient } from '%reactSessionImports';
@@ -22,7 +23,6 @@ import {
   useNavigate,
 } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { z } from 'zod';
 
 export const Route = createFileRoute('/auth_/register')({
@@ -49,6 +49,7 @@ const registerWithEmailPasswordMutation = graphql(`
     registerWithEmailPassword(input: $input) {
       session {
         userId
+        roles
       }
     }
   }
@@ -79,8 +80,8 @@ function RegisterPage(): React.JSX.Element {
         if (!data) {
           throw new Error('No data returned from login mutation');
         }
-        const { userId } = data.registerWithEmailPassword.session;
-        userSessionClient.signIn(userId);
+        const { userId, roles } = data.registerWithEmailPassword.session;
+        userSessionClient.signIn(userId, roles);
 
         navigate({ to: return_to ?? '/', replace: true }).catch(logError);
       })