remixed v0

app/features/auth/actions/forgot-password.ts

@@ -0,0 +1,63 @@
+import { type ActionFunction, json } from "@remix-run/node";
+import { type User, TokenType } from "@prisma/client";
+
+import db from "~/utils/db.server";
+import { type FormError, validate } from "~/utils/validation.server";
+import { sendForgotPasswordEmail } from "~/mailers/forgot-password-mailer.server";
+import { generateToken, hashToken } from "~/utils/token.server";
+import { ForgotPassword } from "../validations";
+
+const RESET_PASSWORD_TOKEN_EXPIRATION_IN_HOURS = 24;
+
+type ForgotPasswordFailureActionData = { errors: FormError<typeof ForgotPassword>; submitted?: never };
+type ForgotPasswordSuccessfulActionData = { errors?: never; submitted: true };
+export type ForgotPasswordActionData = ForgotPasswordFailureActionData | ForgotPasswordSuccessfulActionData;
+
+const action: ActionFunction = async ({ request }) => {
+	const formData = Object.fromEntries(await request.formData());
+	const validation = validate(ForgotPassword, formData);
+	if (validation.errors) {
+		return json<ForgotPasswordFailureActionData>({ errors: validation.errors });
+	}
+
+	const { email } = validation.data;
+	const user = await db.user.findUnique({ where: { email: email.toLowerCase() } });
+
+	// always wait the same amount of time so attackers can't tell the difference whether a user is found
+	await Promise.all([updatePassword(user), new Promise((resolve) => setTimeout(resolve, 750))]);
+
+	// return the same result whether a password reset email was sent or not
+	return json<ForgotPasswordSuccessfulActionData>({ submitted: true });
+};
+
+export default action;
+
+async function updatePassword(user: User | null) {
+	const membership = await db.membership.findFirst({ where: { userId: user?.id } });
+	if (!user || !membership) {
+		return;
+	}
+
+	const token = generateToken();
+	const hashedToken = hashToken(token);
+	const expiresAt = new Date();
+	expiresAt.setHours(expiresAt.getHours() + RESET_PASSWORD_TOKEN_EXPIRATION_IN_HOURS);
+
+	await db.token.deleteMany({ where: { type: TokenType.RESET_PASSWORD, userId: user.id } });
+	await db.token.create({
+		data: {
+			user: { connect: { id: user.id } },
+			membership: { connect: { id: membership.id } },
+			type: TokenType.RESET_PASSWORD,
+			expiresAt,
+			hashedToken,
+			sentTo: user.email,
+		},
+	});
+
+	await sendForgotPasswordEmail({
+		to: user.email,
+		token,
+		userName: user.fullName,
+	});
+}

app/features/auth/actions/register.ts

@@ -0,0 +1,56 @@
+import { type ActionFunction, json } from "@remix-run/node";
+import { GlobalRole, MembershipRole } from "@prisma/client";
+
+import db from "~/utils/db.server";
+import { authenticate, hashPassword } from "~/utils/auth.server";
+import { type FormError, validate } from "~/utils/validation.server";
+import { Register } from "../validations";
+
+export type RegisterActionData = {
+	errors: FormError<typeof Register>;
+};
+
+const action: ActionFunction = async ({ request }) => {
+	const formData = Object.fromEntries(await request.formData());
+	const validation = validate(Register, formData);
+	if (validation.errors) {
+		return json<RegisterActionData>({ errors: validation.errors });
+	}
+
+	const { orgName, fullName, email, password } = validation.data;
+	const hashedPassword = await hashPassword(password.trim());
+	try {
+		await db.user.create({
+			data: {
+				fullName: fullName.trim(),
+				email: email.toLowerCase().trim(),
+				hashedPassword,
+				role: GlobalRole.CUSTOMER,
+				memberships: {
+					create: {
+						role: MembershipRole.OWNER,
+						organization: {
+							create: { name: orgName },
+						},
+					},
+				},
+			},
+		});
+	} catch (error: any) {
+		if (error.code === "P2002") {
+			if (error.meta.target[0] === "email") {
+				return json<RegisterActionData>({
+					errors: { general: "An account with this email address already exists" },
+				});
+			}
+		}
+
+		return json<RegisterActionData>({
+			errors: { general: `An unexpected error happened${error.code ? `\nCode: ${error.code}` : ""}` },
+		});
+	}
+
+	return authenticate({ email, password, request, failureRedirect: "/register" });
+};
+
+export default action;

app/features/auth/actions/reset-password.ts

@@ -0,0 +1,56 @@
+import { type ActionFunction, json, redirect } from "@remix-run/node";
+import { TokenType } from "@prisma/client";
+
+import db from "~/utils/db.server";
+import logger from "~/utils/logger.server";
+import { type FormError, validate } from "~/utils/validation.server";
+import { authenticate, hashPassword } from "~/utils/auth.server";
+import { ResetPasswordError } from "~/utils/errors";
+import { hashToken } from "~/utils/token.server";
+import { ResetPassword } from "../validations";
+
+export type ResetPasswordActionData = { errors: FormError<typeof ResetPassword> };
+
+const action: ActionFunction = async ({ request }) => {
+	const searchParams = new URL(request.url).searchParams;
+	const token = searchParams.get("token");
+	if (!token) {
+		return redirect("/forgot-password");
+	}
+
+	const formData = Object.fromEntries(await request.formData());
+	const validation = validate(ResetPassword, { ...formData, token });
+	if (validation.errors) {
+		return json<ResetPasswordActionData>({ errors: validation.errors });
+	}
+
+	const hashedToken = hashToken(token);
+	const savedToken = await db.token.findFirst({
+		where: { hashedToken, type: TokenType.RESET_PASSWORD },
+		include: { user: true },
+	});
+	if (!savedToken) {
+		logger.warn(`No token found with hashedToken=${hashedToken}`);
+		throw new ResetPasswordError();
+	}
+
+	await db.token.delete({ where: { id: savedToken.id } });
+
+	if (savedToken.expiresAt < new Date()) {
+		logger.warn(`Token with hashedToken=${hashedToken} is expired since ${savedToken.expiresAt.toUTCString()}`);
+		throw new ResetPasswordError();
+	}
+
+	const password = validation.data.password.trim();
+	const hashedPassword = await hashPassword(password);
+	const { email } = await db.user.update({
+		where: { id: savedToken.userId },
+		data: { hashedPassword },
+	});
+
+	await db.session.deleteMany({ where: { userId: savedToken.userId } });
+
+	return authenticate({ email, password, request });
+};
+
+export default action;

app/features/auth/actions/sign-in.ts

@@ -0,0 +1,22 @@
+import { type ActionFunction, json } from "@remix-run/node";
+
+import { SignIn } from "../validations";
+import { type FormError, validate } from "~/utils/validation.server";
+import { authenticate } from "~/utils/auth.server";
+
+export type SignInActionData = { errors: FormError<typeof SignIn> };
+
+const action: ActionFunction = async ({ request }) => {
+	const formData = Object.fromEntries(await request.clone().formData());
+	const validation = validate(SignIn, formData);
+	if (validation.errors) {
+		return json<SignInActionData>({ errors: validation.errors });
+	}
+
+	const searchParams = new URL(request.url).searchParams;
+	const redirectTo = searchParams.get("redirectTo");
+	const { email, password } = validation.data;
+	return authenticate({ email, password, request, successRedirect: redirectTo });
+};
+
+export default action;

app/features/auth/loaders/forgot-password.ts

@@ -0,0 +1,11 @@
+import type { LoaderFunction } from "@remix-run/node";
+
+import { requireLoggedOut } from "~/utils/auth.server";
+
+const loader: LoaderFunction = async ({ request }) => {
+	await requireLoggedOut(request);
+
+	return null;
+};
+
+export default loader;

app/features/auth/loaders/register.ts

@@ -0,0 +1,25 @@
+import { type LoaderFunction, json } from "@remix-run/node";
+
+import { getErrorMessage, requireLoggedOut } from "~/utils/auth.server";
+import { commitSession, getSession } from "~/utils/session.server";
+
+export type RegisterLoaderData = { errors: { general: string } } | null;
+
+const loader: LoaderFunction = async ({ request }) => {
+	const session = await getSession(request);
+	const errorMessage = getErrorMessage(session);
+	if (errorMessage) {
+		return json<RegisterLoaderData>(
+			{ errors: { general: errorMessage } },
+			{
+				headers: { "Set-Cookie": await commitSession(session) },
+			},
+		);
+	}
+
+	await requireLoggedOut(request);
+
+	return null;
+};
+
+export default loader;

app/features/auth/loaders/reset-password.ts

@@ -0,0 +1,23 @@
+import { type LoaderFunction, redirect } from "@remix-run/node";
+
+import { requireLoggedOut } from "~/utils/auth.server";
+import { commitSession, getSession } from "~/utils/session.server";
+
+const loader: LoaderFunction = async ({ request }) => {
+	const session = await getSession(request);
+	const searchParams = new URL(request.url).searchParams;
+	const token = searchParams.get("token");
+	if (!token) {
+		return redirect("/forgot-password");
+	}
+
+	await requireLoggedOut(request);
+
+	return new Response(null, {
+		headers: {
+			"Set-Cookie": await commitSession(session),
+		},
+	});
+};
+
+export default loader;

app/features/auth/loaders/sign-in.ts

@@ -0,0 +1,25 @@
+import { type LoaderFunction, json } from "@remix-run/node";
+
+import { getErrorMessage, requireLoggedOut } from "~/utils/auth.server";
+import { commitSession, getSession } from "~/utils/session.server";
+
+export type SignInLoaderData = { errors: { general: string } } | null;
+
+const loader: LoaderFunction = async ({ request }) => {
+	const session = await getSession(request);
+	const errorMessage = getErrorMessage(session);
+	if (errorMessage) {
+		return json<SignInLoaderData>(
+			{ errors: { general: errorMessage } },
+			{
+				headers: { "Set-Cookie": await commitSession(session) },
+			},
+		);
+	}
+
+	await requireLoggedOut(request);
+
+	return null;
+};
+
+export default loader;

app/features/auth/pages/forgot-password.tsx

@@ -0,0 +1,49 @@
+import { Form, useActionData, useTransition } from "@remix-run/react";
+
+import type { ForgotPasswordActionData } from "../actions/forgot-password";
+import LabeledTextField from "~/features/core/components/labeled-text-field";
+import Button from "~/features/core/components/button";
+
+export default function ForgotPasswordPage() {
+	const actionData = useActionData<ForgotPasswordActionData>();
+	const transition = useTransition();
+	const isSubmitting = transition.state === "submitting";
+
+	return (
+		<section>
+			<header>
+				<h2 className="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">
+					Forgot your password?
+				</h2>
+			</header>
+
+			<Form method="post" className="mt-8 mx-auto w-full max-w-sm">
+				{actionData?.submitted ? (
+					<p className="text-center">
+						If your email is in our system, you will receive instructions to reset your password shortly.
+					</p>
+				) : (
+					<>
+						<LabeledTextField
+							name="email"
+							type="email"
+							label="Email"
+							disabled={isSubmitting}
+							error={actionData?.errors?.email}
+							tabIndex={1}
+						/>
+
+						<Button
+							type="submit"
+							disabled={transition.state === "submitting"}
+							tabIndex={2}
+							className="w-full flex justify-center py-2 px-4 text-base font-medium"
+						>
+							Send reset password link
+						</Button>
+					</>
+				)}
+			</Form>
+		</section>
+	);
+}

app/features/auth/pages/register.tsx

@@ -0,0 +1,83 @@
+import { Form, Link, useActionData, useLoaderData, useTransition } from "@remix-run/react";
+
+import type { RegisterActionData } from "../actions/register";
+import type { RegisterLoaderData } from "../loaders/register";
+import LabeledTextField from "~/features/core/components/labeled-text-field";
+import Alert from "~/features/core/components/alert";
+import Button from "~/features/core/components/button";
+
+export default function RegisterPage() {
+	const loaderData = useLoaderData<RegisterLoaderData>();
+	const actionData = useActionData<RegisterActionData>();
+	const transition = useTransition();
+	const isSubmitting = transition.state === "submitting";
+	const topErrorMessage = loaderData?.errors?.general || actionData?.errors?.general;
+
+	return (
+		<section>
+			<header>
+				<h2 className="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">
+					Create your account
+				</h2>
+				<p className="mt-2 text-center text-sm leading-5 text-gray-600">
+					<Link
+						to="/sign-in"
+						prefetch="intent"
+						className="font-medium text-primary-600 hover:text-primary-500 focus:underline transition ease-in-out duration-150"
+					>
+						Already have an account?
+					</Link>
+				</p>
+			</header>
+
+			<Form method="post" className="mt-8 mx-auto w-full max-w-sm">
+				{topErrorMessage ? (
+					<div role="alert" className="mb-8 sm:mx-auto sm:w-full sm:max-w-sm whitespace-pre">
+						<Alert title="Oops, there was an issue" message={topErrorMessage!} variant="error" />
+					</div>
+				) : null}
+
+				<LabeledTextField
+					name="orgName"
+					type="text"
+					label="Organization name"
+					disabled={isSubmitting}
+					error={actionData?.errors?.orgName}
+					tabIndex={1}
+				/>
+				<LabeledTextField
+					name="fullName"
+					type="text"
+					label="Full name"
+					disabled={isSubmitting}
+					error={actionData?.errors?.fullName}
+					tabIndex={2}
+				/>
+				<LabeledTextField
+					name="email"
+					type="email"
+					label="Email"
+					disabled={isSubmitting}
+					error={actionData?.errors?.email}
+					tabIndex={3}
+				/>
+				<LabeledTextField
+					name="password"
+					type="password"
+					label="Password"
+					disabled={isSubmitting}
+					error={actionData?.errors?.password}
+					tabIndex={4}
+				/>
+
+				<Button
+					type="submit"
+					disabled={transition.state === "submitting"}
+					tabIndex={5}
+				>
+					Register
+				</Button>
+			</Form>
+		</section>
+	);
+}

app/features/auth/pages/reset-password.tsx

@@ -0,0 +1,55 @@
+import { Form, useActionData, useSearchParams, useTransition } from "@remix-run/react";
+import clsx from "clsx";
+
+import type { ResetPasswordActionData } from "../actions/reset-password";
+import LabeledTextField from "~/features/core/components/labeled-text-field";
+
+export default function ForgotPasswordPage() {
+	const [searchParams] = useSearchParams();
+	const actionData = useActionData<ResetPasswordActionData>();
+	const transition = useTransition();
+	const isSubmitting = transition.state === "submitting";
+
+	return (
+		<section>
+			<header>
+				<h2 className="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">Set a new password</h2>
+			</header>
+
+			<Form method="post" action={`./?${searchParams}`} className="mt-8 mx-auto w-full max-w-sm">
+				<LabeledTextField
+					name="password"
+					label="New Password"
+					type="password"
+					disabled={isSubmitting}
+					error={actionData?.errors?.password}
+					tabIndex={1}
+				/>
+
+				<LabeledTextField
+					name="passwordConfirmation"
+					label="Confirm New Password"
+					type="password"
+					disabled={isSubmitting}
+					error={actionData?.errors?.passwordConfirmation}
+					tabIndex={2}
+				/>
+
+				<button
+					type="submit"
+					disabled={transition.state === "submitting"}
+					className={clsx(
+						"w-full flex justify-center py-2 px-4 border border-transparent text-base font-medium rounded-md text-white focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition duration-150 ease-in-out",
+						{
+							"bg-primary-400 cursor-not-allowed": isSubmitting,
+							"bg-primary-600 hover:bg-primary-700": !isSubmitting,
+						},
+					)}
+					tabIndex={3}
+				>
+					Reset password
+				</button>
+			</Form>
+		</section>
+	);
+}

app/features/auth/pages/sign-in.tsx

@@ -0,0 +1,75 @@
+import { Form, Link, useActionData, useLoaderData, useSearchParams, useTransition } from "@remix-run/react";
+
+import type { SignInActionData } from "../actions/sign-in";
+import type { SignInLoaderData } from "../loaders/sign-in";
+import LabeledTextField from "~/features/core/components/labeled-text-field";
+import Alert from "~/features/core/components/alert";
+import Button from "~/features/core/components/button";
+
+export default function SignInPage() {
+	const [searchParams] = useSearchParams();
+	const loaderData = useLoaderData<SignInLoaderData>();
+	const actionData = useActionData<SignInActionData>();
+	const transition = useTransition();
+	const isSubmitting = transition.state === "submitting";
+	return (
+		<section>
+			<header>
+				<h2 className="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">Welcome back!</h2>
+				<p className="mt-2 text-center text-sm leading-5 text-gray-600">
+					Need an account?&nbsp;
+					<Link
+						to="/register"
+						prefetch="intent"
+						className="font-medium text-primary-600 hover:text-primary-500 focus:underline transition ease-in-out duration-150"
+					>
+						Create yours for free
+					</Link>
+				</p>
+			</header>
+
+			<Form method="post" action={`./?${searchParams}`} className="mt-8 mx-auto w-full max-w-sm">
+				{loaderData?.errors ? (
+					<div role="alert" className="mb-8 sm:mx-auto sm:w-full sm:max-w-sm whitespace-pre">
+						<Alert title="Oops, there was an issue" message={loaderData.errors.general} variant="error" />
+					</div>
+				) : null}
+
+				<LabeledTextField
+					name="email"
+					type="email"
+					label="Email"
+					disabled={isSubmitting}
+					error={actionData?.errors?.email}
+					tabIndex={1}
+				/>
+
+				<LabeledTextField
+					name="password"
+					type="password"
+					label="Password"
+					disabled={isSubmitting}
+					error={actionData?.errors?.password}
+					tabIndex={2}
+					sideLabel={
+						<Link
+							to="/forgot-password"
+							prefetch="intent"
+							className="font-medium text-primary-600 hover:text-primary-500 transition ease-in-out duration-150"
+						>
+							Forgot your password?
+						</Link>
+					}
+				/>
+
+				<Button
+					type="submit"
+					disabled={transition.state === "submitting"}
+					tabIndex={3}
+				>
+					Sign in
+				</Button>
+			</Form>
+		</section>
+	);
+}

app/features/auth/validations.ts

@@ -0,0 +1,41 @@
+import { z } from "zod";
+
+export const password = z.string().min(10).max(100);
+
+export const Register = z.object({
+	orgName: z.string().nonempty(),
+	fullName: z.string().nonempty(),
+	email: z.string().email(),
+	password,
+});
+
+export const SignIn = z.object({
+	email: z.string().email(),
+	password,
+});
+
+export const ForgotPassword = z.object({
+	email: z.string().email(),
+});
+
+export const ResetPassword = z
+	.object({
+		password: password,
+		passwordConfirmation: password,
+		token: z.string(),
+	})
+	.refine((data) => data.password === data.passwordConfirmation, {
+		message: "Passwords don't match",
+		path: ["passwordConfirmation"], // set the path of the error
+	});
+
+export const AcceptInvitation = z.object({
+	fullName: z.string(),
+	email: z.string().email(),
+	password,
+	token: z.string(),
+});
+
+export const AcceptAuthedInvitation = z.object({
+	token: z.string(),
+});