@proofkit/cli 1.0.0-beta.0

package/template/extras/fmaddon-auth/app/auth/reset-password/verify-email/verify-email-form.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useHookFormAction } from "@next-safe-action/adapter-react-hook-form/hooks";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Stack, Paper, Text, PinInput } from "@mantine/core";
+import { verifyEmailAction } from "./actions";
+import { verifyEmailSchema } from "./schema";
+
+export default function VerifyEmailForm() {
+  const { form, handleSubmitWithAction, action } = useHookFormAction(
+    verifyEmailAction,
+    zodResolver(verifyEmailSchema),
+    {}
+  );
+
+  return (
+    <form onSubmit={handleSubmitWithAction}>
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+        <Stack>
+          <PinInput
+            oneTimeCode
+            length={8}
+            {...form.register("code")}
+            onChange={(value) => {
+              form.setValue("code", value);
+              if (value.length === 8) {
+                handleSubmitWithAction();
+              }
+            }}
+            error={!!form.formState.errors.code?.message}
+            autoFocus
+          />
+          {form.formState.errors.code?.message && (
+            <Text>{form.formState.errors.code.message}</Text>
+          )}
+          {action.result.data?.error ? (
+            <Text c="red">{action.result.data.error}</Text>
+          ) : action.hasErrored ? (
+            <Text c="red">An error occured</Text>
+          ) : null}
+          <Button fullWidth type="submit" loading={action.isPending}>
+            Continue
+          </Button>
+        </Stack>
+      </Paper>
+    </form>
+  );
+}

package/template/extras/fmaddon-auth/app/auth/signup/actions.ts

@@ -0,0 +1,49 @@
+"use server";
+
+import { actionClient } from "@/server/safe-action";
+import { signupSchema } from "./schema";
+import { checkEmailAvailability, createUser } from "@/server/auth/utils/user";
+import { verifyPasswordStrength } from "@/server/auth/utils/password";
+import {
+  createSession,
+  setSessionTokenCookie,
+} from "@/server/auth/utils/session";
+import { generateSessionToken } from "@/server/auth/utils/session";
+import { redirect } from "next/navigation";
+import {
+  createEmailVerificationRequest,
+  sendVerificationEmail,
+  setEmailVerificationRequestCookie,
+} from "@/server/auth/utils/email-verification";
+
+export const signupAction = actionClient
+  .schema(signupSchema)
+  .action(async ({ parsedInput }) => {
+    const { email, password } = parsedInput;
+    const emailAvailable = await checkEmailAvailability(email);
+    if (!emailAvailable) {
+      return { error: "Email already in use" };
+    }
+
+    const passwordStrong = await verifyPasswordStrength(password);
+    if (!passwordStrong) {
+      return { error: "Password is too weak" };
+    }
+
+    const user = await createUser(email, password);
+    const emailVerificationRequest = await createEmailVerificationRequest(
+      user.id,
+      user.email
+    );
+    await sendVerificationEmail(
+      emailVerificationRequest.email,
+      emailVerificationRequest.code
+    );
+    await setEmailVerificationRequestCookie(emailVerificationRequest);
+
+    const sessionToken = generateSessionToken();
+    const session = await createSession(sessionToken, user.id);
+    setSessionTokenCookie(sessionToken, session.expiresAt);
+
+    return redirect("/auth/verify-email");
+  });

package/template/extras/fmaddon-auth/app/auth/signup/page.tsx

@@ -0,0 +1,26 @@
+import { getCurrentSession } from "@/server/auth/utils/session";
+import { Anchor, Container, Text, Title } from "@mantine/core";
+import { redirect } from "next/navigation";
+import SignupForm from "./signup-form";
+
+export default async function Page() {
+  const { session } = await getCurrentSession();
+
+  if (session !== null) {
+    return redirect("/");
+  }
+
+  return (
+    <Container size={420} my={40}>
+      <Title ta="center">Create account</Title>
+      <Text c="dimmed" size="sm" ta="center" mt={5}>
+        Already have an account?{" "}
+        <Anchor size="sm" component="a" href="/auth/login">
+          Sign in
+        </Anchor>
+      </Text>
+
+      <SignupForm />
+    </Container>
+  );
+}

package/template/extras/fmaddon-auth/app/auth/signup/schema.ts

@@ -0,0 +1,12 @@
+import { z } from "zod/v4";
+
+export const signupSchema = z
+  .object({
+    email: z.string().email(),
+    password: z.string().min(8),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    path: ["confirmPassword"],
+    message: "Passwords do not match",
+  });

package/template/extras/fmaddon-auth/app/auth/signup/signup-form.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useHookFormAction } from "@next-safe-action/adapter-react-hook-form/hooks";
+import { signupAction } from "./actions";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { signupSchema } from "./schema";
+import {
+  Anchor,
+  PasswordInput,
+  TextInput,
+  Button,
+  Group,
+  Stack,
+  Paper,
+  Text,
+} from "@mantine/core";
+
+export default function SignupForm() {
+  const { form, handleSubmitWithAction, action } = useHookFormAction(
+    signupAction,
+    zodResolver(signupSchema),
+    {}
+  );
+
+  return (
+    <form onSubmit={handleSubmitWithAction}>
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+        <Stack>
+          <TextInput
+            label="Email"
+            placeholder="you@proofkit.dev"
+            required
+            withAsterisk={false}
+            {...form.register("email")}
+            error={form.formState.errors.email?.message}
+          />
+          <PasswordInput
+            label="Password"
+            placeholder="Your password"
+            autoComplete="new-password"
+            required
+            withAsterisk={false}
+            {...form.register("password")}
+            error={form.formState.errors.password?.message}
+          />
+          <PasswordInput
+            label="Confirm Password"
+            placeholder="Your password (again)"
+            autoComplete="new-password"
+            required
+            withAsterisk={false}
+            {...form.register("confirmPassword")}
+            error={form.formState.errors.confirmPassword?.message}
+          />
+          {action.result.data?.error ? (
+            <Text c="red">{action.result.data.error}</Text>
+          ) : action.hasErrored ? (
+            <Text c="red">An error occured</Text>
+          ) : null}
+          <Button fullWidth type="submit" loading={action.isPending}>
+            Create Account
+          </Button>
+        </Stack>
+      </Paper>
+    </form>
+  );
+}

package/template/extras/fmaddon-auth/app/auth/verify-email/actions.ts

@@ -0,0 +1,110 @@
+"use server";
+
+import { getCurrentSession } from "@/server/auth/utils/session";
+import { actionClient } from "@/server/safe-action";
+import { emailVerificationSchema } from "./schema";
+import {
+  deleteEmailVerificationRequestCookie,
+  deleteUserEmailVerificationRequest,
+  sendVerificationEmail,
+  setEmailVerificationRequestCookie,
+} from "@/server/auth/utils/email-verification";
+import {
+  createEmailVerificationRequest,
+  getUserEmailVerificationRequestFromRequest,
+} from "@/server/auth/utils/email-verification";
+import { invalidateUserPasswordResetSessions } from "@/server/auth/utils/password-reset";
+import { updateUserEmailAndSetEmailAsVerified } from "@/server/auth/utils/user";
+import { redirect } from "next/navigation";
+import { getRedirectCookie } from "@/server/auth/utils/redirect";
+
+export const verifyEmailAction = actionClient
+  .schema(emailVerificationSchema)
+  .action(async ({ parsedInput, ctx }) => {
+    const { session, user } = await getCurrentSession();
+    if (session === null) {
+      return {
+        error: "Not authenticated",
+      };
+    }
+
+    let verificationRequest =
+      await getUserEmailVerificationRequestFromRequest();
+    if (verificationRequest === null) {
+      return {
+        error: "Not authenticated",
+      };
+    }
+    const { code } = parsedInput;
+    if (verificationRequest.expires_at === null) {
+      return {
+        error: "Verification code expired",
+      };
+    }
+
+    if (Date.now() >= verificationRequest.expires_at * 1000) {
+      verificationRequest = await createEmailVerificationRequest(
+        verificationRequest.id_user,
+        verificationRequest.email
+      );
+      await sendVerificationEmail(
+        verificationRequest.email,
+        verificationRequest.code
+      );
+      return {
+        error:
+          "The verification code was expired. We sent another code to your inbox.",
+      };
+    }
+    if (verificationRequest.code !== code) {
+      return {
+        error: "Incorrect code.",
+      };
+    }
+    await deleteUserEmailVerificationRequest(user.id);
+    await invalidateUserPasswordResetSessions(user.id);
+    await updateUserEmailAndSetEmailAsVerified(
+      user.id,
+      verificationRequest.email
+    );
+    await deleteEmailVerificationRequestCookie();
+
+    const redirectTo = await getRedirectCookie();
+    return redirect(redirectTo);
+  });
+
+export const resendEmailVerificationAction = actionClient.action(async () => {
+  const { session, user } = await getCurrentSession();
+  if (session === null) {
+    return {
+      error: "Not authenticated",
+    };
+  }
+
+  let verificationRequest = await getUserEmailVerificationRequestFromRequest();
+  if (verificationRequest === null) {
+    if (user.emailVerified) {
+      return {
+        error: "Forbidden",
+      };
+    }
+
+    verificationRequest = await createEmailVerificationRequest(
+      user.id,
+      user.email
+    );
+  } else {
+    verificationRequest = await createEmailVerificationRequest(
+      user.id,
+      verificationRequest.email
+    );
+  }
+  await sendVerificationEmail(
+    verificationRequest.email,
+    verificationRequest.code
+  );
+  await setEmailVerificationRequestCookie(verificationRequest);
+  return {
+    message: "A new code was sent to your inbox.",
+  };
+});

package/template/extras/fmaddon-auth/app/auth/verify-email/email-verification-form.tsx

@@ -0,0 +1,45 @@
+"use client";
+import { useHookFormAction } from "@next-safe-action/adapter-react-hook-form/hooks";
+import { emailVerificationSchema } from "./schema";
+import { verifyEmailAction } from "./actions";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Paper, PinInput, Text } from "@mantine/core";
+import { Stack } from "@mantine/core";
+
+export default function LoginForm() {
+  const { form, handleSubmitWithAction, action } = useHookFormAction(
+    verifyEmailAction,
+    zodResolver(emailVerificationSchema),
+    {}
+  );
+
+  return (
+    <form onSubmit={handleSubmitWithAction}>
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+        <Stack>
+          <PinInput
+            length={8}
+            autoFocus
+            oneTimeCode
+            {...form.register("code")}
+            onChange={(value) => {
+              form.setValue("code", value);
+              if (value.length === 8) {
+                handleSubmitWithAction();
+              }
+            }}
+          />
+
+          {action.result.data?.error ? (
+            <Text c="red">{action.result.data.error}</Text>
+          ) : action.hasErrored ? (
+            <Text c="red">An error occured</Text>
+          ) : null}
+          <Button fullWidth type="submit" loading={action.isPending}>
+            Verify email
+          </Button>
+        </Stack>
+      </Paper>
+    </form>
+  );
+}

package/template/extras/fmaddon-auth/app/auth/verify-email/page.tsx

@@ -0,0 +1,38 @@
+import { getCurrentSession } from "@/server/auth/utils/session";
+import { Anchor, Container, Text, Title } from "@mantine/core";
+import { redirect } from "next/navigation";
+import EmailVerificationForm from "./email-verification-form";
+import ResendButton from "./resend-button";
+import { getUserEmailVerificationRequestFromRequest } from "@/server/auth/utils/email-verification";
+import { getRedirectCookie } from "@/server/auth/utils/redirect";
+
+export default async function Page() {
+  const { user } = await getCurrentSession();
+
+  if (user === null) {
+    return redirect("/auth/login");
+  }
+
+  // TODO: Ideally we'd sent a new verification email automatically if the previous one is expired,
+  // but we can't set cookies inside server components.
+  const verificationRequest = await getUserEmailVerificationRequestFromRequest();
+  if (verificationRequest === null && user.emailVerified) {
+    const redirectTo = await getRedirectCookie();
+    return redirect(redirectTo);
+  }
+
+  return (
+    <Container size={420} my={40}>
+      <Title ta="center">Verify your email</Title>
+      <Text c="dimmed" size="sm" ta="center" mt={5}>
+        Enter the code sent to {verificationRequest?.email ?? user.email}
+      </Text>
+      <Text c="dimmed" size="sm" ta="center">
+        <Anchor href="/auth/profile">Change email</Anchor>
+      </Text>
+
+      <EmailVerificationForm />
+      <ResendButton />
+    </Container>
+  );
+}

package/template/extras/fmaddon-auth/app/auth/verify-email/resend-button.tsx

@@ -0,0 +1,35 @@
+"use client";
+import { Alert, Anchor, Button, Group, Stack, Text } from "@mantine/core";
+import { resendEmailVerificationAction } from "./actions";
+import { useAction } from "next-safe-action/hooks";
+
+export default function ResendButton() {
+  const action = useAction(resendEmailVerificationAction);
+  return (
+    <Stack>
+      <Group gap={4} justify="center" mt={5}>
+        <Text c="dimmed" size="sm">
+        {"Didn't receive the email?"}
+        </Text>
+        <Button
+          size="compact-sm"
+          variant="subtle"
+          disabled={action.isPending}
+          onClick={() => action.execute()}
+        >
+          Resend
+        </Button>
+      </Group>
+
+      {action.result.data?.message && (
+        <Alert ta="center">{action.result.data.message}</Alert>
+      )}
+
+      {action.result.data?.error && (
+        <Alert ta="center" color="red">
+          {action.result.data.error}
+        </Alert>
+      )}
+    </Stack>
+  );
+}

package/template/extras/fmaddon-auth/app/auth/verify-email/schema.ts

@@ -0,0 +1,5 @@
+import { z } from "zod/v4";
+
+export const emailVerificationSchema = z.object({
+  code: z.string().length(8),
+});

package/template/extras/fmaddon-auth/components/auth/actions.ts

@@ -0,0 +1,16 @@
+"use server";
+
+import { getCurrentSession, invalidateSession } from "@/server/auth/utils/session";
+import { redirect } from "next/navigation";
+
+export async function currentSessionAction() {
+  return await getCurrentSession();
+}
+
+export async function logoutAction() {
+  const { session } = await currentSessionAction();
+  if (session) {
+    await invalidateSession(session.id);
+  }
+  redirect("/");
+}

package/template/extras/fmaddon-auth/components/auth/protect.tsx

@@ -0,0 +1,17 @@
+import { getCurrentSession } from "@/server/auth/utils/session";
+import AuthRedirect from "./redirect";
+
+/**
+ * This server component will protect the contents of it's children from users who aren't logged in
+ * It will redirect to the login page if the user is not logged in, or the verify email page if the user is logged in but hasn't verified their email
+ */
+export default async function Protect({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { session, user } = await getCurrentSession();
+  if (!session) return <AuthRedirect path="/auth/login" />;
+  if (!user.emailVerified) return <AuthRedirect path="/auth/verify-email" />;
+  return <>{children}</>;
+}

package/template/extras/fmaddon-auth/components/auth/redirect.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { redirect } from "next/navigation";
+import { Center, Loader } from "@mantine/core";
+import { useEffect } from "react";
+import Cookies from "js-cookie";
+
+/**
+ * A client-side component that redirects to the given path, but saves the current path in the redirectTo cookie.
+ */
+export default function AuthRedirect({ path }: { path: string }) {
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      Cookies.set("redirectTo", window.location.pathname, {
+        expires: 1 / 24 / 60, // 1 hour
+      });
+      redirect(path);
+    }
+  }, []);
+
+  return (
+    <Center h="100vh">
+      <Loader />
+    </Center>
+  );
+}

package/template/extras/fmaddon-auth/components/auth/use-user.ts

@@ -0,0 +1,59 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { currentSessionAction, logoutAction } from "./actions";
+import { Session } from "@/server/auth/utils/session";
+import { User } from "@/server/auth/utils/user";
+
+type LogoutAction = () => Promise<void>;
+type UseUserResult =
+  | {
+      state: "authenticated";
+      session: Session;
+      user: User;
+      logout: LogoutAction;
+    }
+  | {
+      state: "unauthenticated";
+      session: null;
+      user: null;
+      logout: LogoutAction;
+    }
+  | { state: "loading"; session: null; user: null; logout: LogoutAction };
+
+export function useUser(): UseUserResult {
+  const query = useQuery({
+    queryKey: ["current-user"],
+    queryFn: () => currentSessionAction(),
+    retry: false,
+  });
+  const queryClient = useQueryClient();
+
+  const { mutateAsync } = useMutation({
+    mutationFn: logoutAction,
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: ["current-user"] });
+      queryClient.setQueryData(["current-user"], { session: null, user: null });
+    },
+    onSettled: () =>
+      queryClient.invalidateQueries({ queryKey: ["current-user"] }),
+  });
+
+  const defaultResult: UseUserResult = {
+    state: "unauthenticated",
+    session: null,
+    user: null,
+    logout: mutateAsync,
+  };
+
+  if (query.isLoading) {
+    return { ...defaultResult, state: "loading" };
+  }
+  if (query.data?.session) {
+    return {
+      ...defaultResult,
+      state: "authenticated",
+      session: query.data.session,
+      user: query.data.user,
+    };
+  }
+  return defaultResult;
+}

package/template/extras/fmaddon-auth/components/auth/user-menu.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Button, Menu, px, Skeleton } from "@mantine/core";
+import { useUser } from "./use-user";
+import Link from "next/link";
+import { IconChevronDown, IconLogout, IconUser } from "@tabler/icons-react";
+
+export default function UserMenu() {
+  const { state, session, user, logout } = useUser();
+
+  if (state === "loading") {
+    return <Skeleton w={100} h={20} />;
+  }
+  if (state === "unauthenticated") {
+    return (
+      <Button component="a" href="/auth/login" variant="subtle" size="sm">
+        Sign in
+      </Button>
+    );
+  }
+  return (
+    <Menu position="bottom-end">
+      <Menu.Target>
+        <Button
+          variant="subtle"
+          size="sm"
+          color="gray"
+          rightSection={<IconChevronDown size={px("1rem")} />}
+        >
+          {user.email}
+        </Button>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item
+          component={Link}
+          href="/auth/profile"
+          leftSection={<IconUser size={px("1rem")} />}
+        >
+          My Profile
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Item
+          leftSection={<IconLogout size={px("1rem")} />}
+          onClick={logout}
+        >
+          Sign out
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}