@baseplate-dev/plugin-auth 0.6.16 → 0.6.18

package/dist/local-auth/core/generators/auth-routes/generated/typed-templates.js

@@ -2,6 +2,38 @@ import { createTsTemplateFile } from '@baseplate-dev/core-generators';
 import { apolloErrorImportsProvider, graphqlImportsProvider, reactComponentsImportsProvider, reactErrorImportsProvider, } from '@baseplate-dev/react-generators';
 import path from 'node:path';
 import { reactSessionImportsProvider } from '#src/local-auth/core/generators/react-session/generated/ts-import-providers.js';
+const acceptInvite = createTsTemplateFile({
+    fileOptions: { kind: 'singleton' },
+    importMapProviders: {
+        apolloErrorImports: apolloErrorImportsProvider,
+        graphqlImports: graphqlImportsProvider,
+        reactComponentsImports: reactComponentsImportsProvider,
+        reactErrorImports: reactErrorImportsProvider,
+        reactSessionImports: reactSessionImportsProvider,
+    },
+    name: 'accept-invite',
+    referencedGeneratorTemplates: { constants: {} },
+    source: {
+        path: path.join(import.meta.dirname, '../templates/routes/auth_/accept-invite.tsx'),
+    },
+    variables: {},
+});
+const loginOtp = createTsTemplateFile({
+    fileOptions: { kind: 'singleton' },
+    importMapProviders: {
+        apolloErrorImports: apolloErrorImportsProvider,
+        graphqlImports: graphqlImportsProvider,
+        reactComponentsImports: reactComponentsImportsProvider,
+        reactErrorImports: reactErrorImportsProvider,
+        reactSessionImports: reactSessionImportsProvider,
+    },
+    name: 'login-otp',
+    referencedGeneratorTemplates: { otpConstants: {} },
+    source: {
+        path: path.join(import.meta.dirname, '../templates/routes/auth_/login-otp.tsx'),
+    },
+    variables: {},
+});
 const constants = createTsTemplateFile({
     fileOptions: { kind: 'singleton' },
     group: 'main',
@@ -46,27 +78,7 @@ const login = createTsTemplateFile({
     source: {
         path: path.join(import.meta.dirname, '../templates/routes/auth_/login.tsx'),
     },
-    variables: {},
-});
-const register = createTsTemplateFile({
-    fileOptions: { kind: 'singleton' },
-    group: 'main',
-    importMapProviders: {
-        apolloErrorImports: apolloErrorImportsProvider,
-        graphqlImports: graphqlImportsProvider,
-        reactComponentsImports: reactComponentsImportsProvider,
-        reactErrorImports: reactErrorImportsProvider,
-        reactSessionImports: reactSessionImportsProvider,
-    },
-    name: 'register',
-    source: {
-        path: path.join(import.meta.dirname, '../templates/routes/auth_/register.tsx'),
-    },
-    variables: {
-        TPL_NAME_FORM_CONTROL: {},
-        TPL_REGISTER_INPUT: {},
-        TPL_REGISTER_SCHEMA: {},
-    },
+    variables: { TPL_OTP_LOGIN_LINK: {}, TPL_REGISTER_LINK: {} },
 });
 const resetPassword = createTsTemplateFile({
     fileOptions: { kind: 'singleton' },
@@ -98,10 +110,37 @@ export const mainGroup = {
     constants,
     forgotPassword,
     login,
-    register,
     resetPassword,
     route,
 };
+const otpConstants = createTsTemplateFile({
+    fileOptions: { kind: 'singleton' },
+    importMapProviders: {},
+    name: 'otp-constants',
+    source: {
+        path: path.join(import.meta.dirname, '../templates/routes/auth_/-otp-constants.ts'),
+    },
+    variables: {},
+});
+const register = createTsTemplateFile({
+    fileOptions: { kind: 'singleton' },
+    importMapProviders: {
+        apolloErrorImports: apolloErrorImportsProvider,
+        graphqlImports: graphqlImportsProvider,
+        reactComponentsImports: reactComponentsImportsProvider,
+        reactErrorImports: reactErrorImportsProvider,
+        reactSessionImports: reactSessionImportsProvider,
+    },
+    name: 'register',
+    source: {
+        path: path.join(import.meta.dirname, '../templates/routes/auth_/register.tsx'),
+    },
+    variables: {
+        TPL_NAME_FORM_CONTROL: {},
+        TPL_REGISTER_INPUT: {},
+        TPL_REGISTER_SCHEMA: {},
+    },
+});
 const verifyEmail = createTsTemplateFile({
     fileOptions: { kind: 'singleton' },
     importMapProviders: {
@@ -116,5 +155,12 @@ const verifyEmail = createTsTemplateFile({
     },
     variables: {},
 });
-export const AUTH_CORE_AUTH_ROUTES_TEMPLATES = { mainGroup, verifyEmail };
+export const AUTH_CORE_AUTH_ROUTES_TEMPLATES = {
+    acceptInvite,
+    loginOtp,
+    mainGroup,
+    otpConstants,
+    register,
+    verifyEmail,
+};
 //# sourceMappingURL=typed-templates.js.map

package/dist/local-auth/core/generators/auth-routes/templates/routes/auth_/-otp-constants.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Number of digits in an emailed sign-in code (matches backend validation)
+ */
+export declare const EMAIL_OTP_LENGTH = 6;
+/**
+ * Seconds to wait before another sign-in code can be requested
+ */
+export declare const EMAIL_OTP_RESEND_COOLDOWN_SEC = 60;
+//# sourceMappingURL=-otp-constants.d.ts.map

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

@@ -0,0 +1,10 @@
+// @ts-nocheck
+/**
+ * Number of digits in an emailed sign-in code (matches backend validation)
+ */
+export const EMAIL_OTP_LENGTH = 6;
+/**
+ * Seconds to wait before another sign-in code can be requested
+ */
+export const EMAIL_OTP_RESEND_COOLDOWN_SEC = 60;
+//# sourceMappingURL=-otp-constants.js.map

package/dist/local-auth/core/generators/auth-routes/templates/routes/auth_/-otp-constants.ts

@@ -0,0 +1,11 @@
+// @ts-nocheck
+
+/**
+ * Number of digits in an emailed sign-in code (matches backend validation)
+ */
+export const EMAIL_OTP_LENGTH = 6;
+
+/**
+ * Seconds to wait before another sign-in code can be requested
+ */
+export const EMAIL_OTP_RESEND_COOLDOWN_SEC = 60;

package/dist/local-auth/core/generators/auth-routes/templates/routes/auth_/accept-invite.d.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+export declare const Route: import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, never, never, never, never, never, z.ZodObject<{
+    token: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>, import("@tanstack/react-router").ResolveParams<never>, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, ({ search: { token }, context: { userId } }: import("@tanstack/react-router").BeforeLoadContextOptions<import("@tanstack/react-router").Register, never, z.ZodObject<{
+    token: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>, import("@tanstack/react-router").ResolveParams<never>, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, never, unknown, undefined>) => void, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
+//# sourceMappingURL=accept-invite.d.ts.map

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

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+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 { 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 { useCallback, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+export const Route = createFileRoute('/auth_/accept-invite')({
+    validateSearch: z.object({
+        token: z.string().optional(),
+    }),
+    component: AcceptInvitePage,
+    beforeLoad: ({ search: { token }, context: { userId } }) => {
+        if (userId) {
+            throw redirect({ to: '/' });
+        }
+        if (!token) {
+            throw redirect({ to: '/auth/login' });
+        }
+    },
+});
+const formSchema = z
+    .object({
+    newPassword: z
+        .string()
+        .min(PASSWORD_MIN_LENGTH, `Password must be at least ${PASSWORD_MIN_LENGTH} characters`)
+        .max(PASSWORD_MAX_LENGTH),
+    confirmPassword: z.string(),
+})
+    .refine((data) => data.newPassword === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword'],
+});
+const validateInviteTokenMutation = graphql(`
+  mutation ValidateInviteToken($input: ValidateInviteTokenInput!) {
+    validateInviteToken(input: $input) {
+      email
+    }
+  }
+`);
+const acceptInviteMutation = graphql(`
+  mutation AcceptInvite($input: AcceptInviteInput!) {
+    acceptInvite(input: $input) {
+      session {
+        userId
+      }
+    }
+  }
+`);
+function AcceptInvitePage() {
+    const { token } = Route.useSearch();
+    const navigate = useNavigate();
+    const [tokenValid, setTokenValid] = useState(null);
+    const [email, setEmail] = useState(null);
+    const [validationError, setValidationError] = useState(null);
+    const [validateInviteToken] = useMutation(validateInviteTokenMutation);
+    const [acceptInvite, { loading }] = useMutation(acceptInviteMutation);
+    const { control, handleSubmit } = useForm({
+        resolver: zodResolver(formSchema),
+        reValidateMode: 'onBlur',
+    });
+    const runTokenValidation = useCallback(() => {
+        if (!token)
+            return;
+        setTokenValid(null);
+        setValidationError(null);
+        validateInviteToken({
+            variables: { input: { token } },
+        })
+            .then(({ data }) => {
+            setTokenValid(true);
+            setEmail(data?.validateInviteToken.email ?? null);
+        })
+            .catch((err) => {
+            const errorCode = getApolloErrorCode(err, ['invalid-token']);
+            switch (errorCode) {
+                case 'invalid-token': {
+                    setTokenValid(false);
+                    break;
+                }
+                case null: {
+                    setValidationError(logAndFormatError(err, 'Sorry, we could not validate your invite link.'));
+                }
+            }
+        });
+    }, [token, validateInviteToken]);
+    // Validate token on mount
+    useEffect(() => {
+        runTokenValidation();
+    }, [runTokenValidation]);
+    const onSubmit = (data) => {
+        if (!token)
+            return;
+        acceptInvite({
+            variables: {
+                input: {
+                    token,
+                    newPassword: data.newPassword,
+                },
+            },
+        })
+            .then(({ data }) => {
+            if (!data) {
+                throw new Error('No data returned from accept invite mutation');
+            }
+            const { userId } = data.acceptInvite.session;
+            userSessionClient.signIn(userId);
+            navigate({ to: '/', replace: true }).catch(logError);
+        })
+            .catch((err) => {
+            const errorCode = getApolloErrorCode(err, ['invalid-token']);
+            switch (errorCode) {
+                case 'invalid-token': {
+                    setTokenValid(false);
+                    break;
+                }
+                case null: {
+                    toast.error(logAndFormatError(err, 'Sorry, we could not accept your invite.'));
+                }
+            }
+        });
+    };
+    // Loading state
+    if (tokenValid === null && !validationError) {
+        return (_jsx(Card, { children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Validating..." }), _jsx(CardDescription, { children: "Please wait while we verify your invite link." })] }) }));
+    }
+    // Validation error state (transient failures, not invalid token)
+    if (validationError) {
+        return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Something Went Wrong" }), _jsx(CardDescription, { children: validationError })] }), _jsx(CardContent, { children: _jsx(Button, { variant: "secondary", className: "w-full", onClick: runTokenValidation, children: "Try Again" }) })] }));
+    }
+    // Invalid token state
+    if (!tokenValid) {
+        return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Invalid or Expired Invite" }), _jsx(CardDescription, { children: "This invite link is invalid or has expired. Please ask an admin to send you a new one." })] }), _jsx(CardContent, { children: _jsx(Link, { to: "/auth/login", children: _jsx(Button, { variant: "secondary", className: "w-full", children: "Back to Login" }) }) })] }));
+    }
+    // Set password form
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Set your password" }), _jsx(CardDescription, { children: email
+                            ? `Choose a password to finish setting up ${email}.`
+                            : 'Choose a password to finish setting up your account.' })] }), _jsx(CardContent, { children: _jsx("form", { onSubmit: handleSubmit(onSubmit), children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(InputFieldController, { control: control, name: "newPassword", label: "Password", type: "password", autoComplete: "new-password", placeholder: "Enter a password" }), _jsx(InputFieldController, { control: control, name: "confirmPassword", label: "Confirm Password", type: "password", autoComplete: "new-password", placeholder: "Confirm your password" }), _jsx(Button, { type: "submit", className: "w-full", disabled: loading, children: "Get Started" })] }) }) })] }));
+}
+//# sourceMappingURL=accept-invite.js.map

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

@@ -0,0 +1,264 @@
+// @ts-nocheck
+
+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 { 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 { useCallback, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+export const Route = createFileRoute('/auth_/accept-invite')({
+  validateSearch: z.object({
+    token: z.string().optional(),
+  }),
+  component: AcceptInvitePage,
+  beforeLoad: ({ search: { token }, context: { userId } }) => {
+    if (userId) {
+      throw redirect({ to: '/' });
+    }
+    if (!token) {
+      throw redirect({ to: '/auth/login' });
+    }
+  },
+});
+
+const formSchema = z
+  .object({
+    newPassword: z
+      .string()
+      .min(
+        PASSWORD_MIN_LENGTH,
+        `Password must be at least ${PASSWORD_MIN_LENGTH} characters`,
+      )
+      .max(PASSWORD_MAX_LENGTH),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword'],
+  });
+
+type FormData = z.infer<typeof formSchema>;
+
+const validateInviteTokenMutation = graphql(`
+  mutation ValidateInviteToken($input: ValidateInviteTokenInput!) {
+    validateInviteToken(input: $input) {
+      email
+    }
+  }
+`);
+
+const acceptInviteMutation = graphql(`
+  mutation AcceptInvite($input: AcceptInviteInput!) {
+    acceptInvite(input: $input) {
+      session {
+        userId
+      }
+    }
+  }
+`);
+
+function AcceptInvitePage(): React.JSX.Element {
+  const { token } = Route.useSearch();
+  const navigate = useNavigate();
+  const [tokenValid, setTokenValid] = useState<boolean | null>(null);
+  const [email, setEmail] = useState<string | null>(null);
+  const [validationError, setValidationError] = useState<string | null>(null);
+
+  const [validateInviteToken] = useMutation(validateInviteTokenMutation);
+  const [acceptInvite, { loading }] = useMutation(acceptInviteMutation);
+
+  const { control, handleSubmit } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    reValidateMode: 'onBlur',
+  });
+
+  const runTokenValidation = useCallback(() => {
+    if (!token) return;
+
+    setTokenValid(null);
+    setValidationError(null);
+
+    validateInviteToken({
+      variables: { input: { token } },
+    })
+      .then(({ data }) => {
+        setTokenValid(true);
+        setEmail(data?.validateInviteToken.email ?? null);
+      })
+      .catch((err: unknown) => {
+        const errorCode = getApolloErrorCode(err, ['invalid-token'] as const);
+        switch (errorCode) {
+          case 'invalid-token': {
+            setTokenValid(false);
+            break;
+          }
+          case null: {
+            setValidationError(
+              logAndFormatError(
+                err,
+                'Sorry, we could not validate your invite link.',
+              ),
+            );
+          }
+        }
+      });
+  }, [token, validateInviteToken]);
+
+  // Validate token on mount
+  useEffect(() => {
+    runTokenValidation();
+  }, [runTokenValidation]);
+
+  const onSubmit = (data: FormData): void => {
+    if (!token) return;
+
+    acceptInvite({
+      variables: {
+        input: {
+          token,
+          newPassword: data.newPassword,
+        },
+      },
+    })
+      .then(({ data }) => {
+        if (!data) {
+          throw new Error('No data returned from accept invite mutation');
+        }
+        const { userId } = data.acceptInvite.session;
+        userSessionClient.signIn(userId);
+
+        navigate({ to: '/', replace: true }).catch(logError);
+      })
+      .catch((err: unknown) => {
+        const errorCode = getApolloErrorCode(err, ['invalid-token'] as const);
+        switch (errorCode) {
+          case 'invalid-token': {
+            setTokenValid(false);
+            break;
+          }
+          case null: {
+            toast.error(
+              logAndFormatError(err, 'Sorry, we could not accept your invite.'),
+            );
+          }
+        }
+      });
+  };
+
+  // Loading state
+  if (tokenValid === null && !validationError) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Validating...</CardTitle>
+          <CardDescription>
+            Please wait while we verify your invite link.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  // Validation error state (transient failures, not invalid token)
+  if (validationError) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Something Went Wrong</CardTitle>
+          <CardDescription>{validationError}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button
+            variant="secondary"
+            className="w-full"
+            onClick={runTokenValidation}
+          >
+            Try Again
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Invalid token state
+  if (!tokenValid) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Invalid or Expired Invite</CardTitle>
+          <CardDescription>
+            This invite link is invalid or has expired. Please ask an admin to
+            send you a new one.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Link to="/auth/login">
+            <Button variant="secondary" className="w-full">
+              Back to Login
+            </Button>
+          </Link>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Set password form
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Set your password</CardTitle>
+        <CardDescription>
+          {email
+            ? `Choose a password to finish setting up ${email}.`
+            : 'Choose a password to finish setting up your account.'}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="flex flex-col gap-6">
+            <InputFieldController
+              control={control}
+              name="newPassword"
+              label="Password"
+              type="password"
+              autoComplete="new-password"
+              placeholder="Enter a password"
+            />
+            <InputFieldController
+              control={control}
+              name="confirmPassword"
+              label="Confirm Password"
+              type="password"
+              autoComplete="new-password"
+              placeholder="Confirm your password"
+            />
+            <Button type="submit" className="w-full" disabled={loading}>
+              Get Started
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+export declare const Route: import("@tanstack/router-core").Route<import("@tanstack/react-router").Register, never, never, never, never, never, z.ZodObject<{
+    return_to: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>, import("@tanstack/react-router").ResolveParams<never>, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, ({ search: { return_to }, context: { userId } }: import("@tanstack/react-router").BeforeLoadContextOptions<import("@tanstack/react-router").Register, never, z.ZodObject<{
+    return_to: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>, import("@tanstack/react-router").ResolveParams<never>, import("@tanstack/react-router").AnyContext, import("@tanstack/react-router").AnyContext, never, unknown, undefined>) => void, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
+//# sourceMappingURL=login-otp.d.ts.map