migrate to blitzjs

app/auth/components/login-form.tsx

@@ -0,0 +1,61 @@
+import { AuthenticationError, Link, useMutation, Routes } from "blitz"
+
+import { LabeledTextField } from "../../core/components/labeled-text-field"
+import { Form, FORM_ERROR } from "../../core/components/form"
+import login from "../../../app/auth/mutations/login"
+import { Login } from "../validations"
+
+type LoginFormProps = {
+	onSuccess?: () => void
+}
+
+export const LoginForm = (props: LoginFormProps) => {
+	const [loginMutation] = useMutation(login)
+
+	return (
+		<div>
+			<h1>Login</h1>
+
+			<Form
+				submitText="Login"
+				schema={Login}
+				initialValues={{ email: "", password: "" }}
+				onSubmit={async (values) => {
+					try {
+						await loginMutation(values)
+						props.onSuccess?.()
+					} catch (error) {
+						if (error instanceof AuthenticationError) {
+							return { [FORM_ERROR]: "Sorry, those credentials are invalid" }
+						} else {
+							return {
+								[FORM_ERROR]:
+									"Sorry, we had an unexpected error. Please try again. - " +
+									error.toString(),
+							}
+						}
+					}
+				}}
+			>
+				<LabeledTextField name="email" label="Email" placeholder="Email" />
+				<LabeledTextField
+					name="password"
+					label="Password"
+					placeholder="Password"
+					type="password"
+				/>
+				<div>
+					<Link href={Routes.ForgotPasswordPage()}>
+						<a>Forgot your password?</a>
+					</Link>
+				</div>
+			</Form>
+
+			<div style={{ marginTop: "1rem" }}>
+				Or <Link href={Routes.SignupPage()}>Sign Up</Link>
+			</div>
+		</div>
+	)
+}
+
+export default LoginForm

app/auth/components/signup-form.tsx

@@ -0,0 +1,49 @@
+import { useMutation } from "blitz"
+
+import { LabeledTextField } from "../../core/components/labeled-text-field"
+import { Form, FORM_ERROR } from "../../core/components/form"
+import signup from "../../auth/mutations/signup"
+import { Signup } from "../validations"
+
+type SignupFormProps = {
+	onSuccess?: () => void
+}
+
+export const SignupForm = (props: SignupFormProps) => {
+	const [signupMutation] = useMutation(signup)
+
+	return (
+		<div>
+			<h1>Create an Account</h1>
+
+			<Form
+				submitText="Create Account"
+				schema={Signup}
+				initialValues={{ email: "", password: "" }}
+				onSubmit={async (values) => {
+					try {
+						await signupMutation(values)
+						props.onSuccess?.()
+					} catch (error) {
+						if (error.code === "P2002" && error.meta?.target?.includes("email")) {
+							// This error comes from Prisma
+							return { email: "This email is already being used" }
+						} else {
+							return { [FORM_ERROR]: error.toString() }
+						}
+					}
+				}}
+			>
+				<LabeledTextField name="email" label="Email" placeholder="Email" />
+				<LabeledTextField
+					name="password"
+					label="Password"
+					placeholder="Password"
+					type="password"
+				/>
+			</Form>
+		</div>
+	)
+}
+
+export default SignupForm

app/auth/mutations/change-password.ts

@@ -0,0 +1,24 @@
+import { NotFoundError, SecurePassword, resolver } from "blitz"
+
+import db from "../../../db"
+import { authenticateUser } from "./login"
+import { ChangePassword } from "../validations"
+
+export default resolver.pipe(
+	resolver.zod(ChangePassword),
+	resolver.authorize(),
+	async ({ currentPassword, newPassword }, ctx) => {
+		const user = await db.user.findFirst({ where: { id: ctx.session.userId! } })
+		if (!user) throw new NotFoundError()
+
+		await authenticateUser(user.email, currentPassword)
+
+		const hashedPassword = await SecurePassword.hash(newPassword.trim())
+		await db.user.update({
+			where: { id: user.id },
+			data: { hashedPassword },
+		})
+
+		return true
+	}
+)

app/auth/mutations/forgot-password.test.ts

@@ -0,0 +1,61 @@
+import { hash256, Ctx } from "blitz"
+import previewEmail from "preview-email"
+
+import forgotPassword from "./forgot-password"
+import db from "../../../db"
+
+beforeEach(async () => {
+	await db.$reset()
+})
+
+const generatedToken = "plain-token"
+jest.mock("blitz", () => ({
+	...jest.requireActual<object>("blitz")!,
+	generateToken: () => generatedToken,
+}))
+jest.mock("preview-email", () => jest.fn())
+
+describe("forgotPassword mutation", () => {
+	it("does not throw error if user doesn't exist", async () => {
+		await expect(
+			forgotPassword({ email: "no-user@email.com" }, {} as Ctx)
+		).resolves.not.toThrow()
+	})
+
+	it("works correctly", async () => {
+		// Create test user
+		const user = await db.user.create({
+			data: {
+				email: "user@example.com",
+				tokens: {
+					// Create old token to ensure it's deleted
+					create: {
+						type: "RESET_PASSWORD",
+						hashedToken: "token",
+						expiresAt: new Date(),
+						sentTo: "user@example.com",
+					},
+				},
+			},
+			include: { tokens: true },
+		})
+
+		// Invoke the mutation
+		await forgotPassword({ email: user.email }, {} as Ctx)
+
+		const tokens = await db.token.findMany({ where: { userId: user.id } })
+		const token = tokens[0]
+		if (!user.tokens[0]) throw new Error("Missing user token")
+		if (!token) throw new Error("Missing token")
+
+		// delete's existing tokens
+		expect(tokens.length).toBe(1)
+
+		expect(token.id).not.toBe(user.tokens[0].id)
+		expect(token.type).toBe("RESET_PASSWORD")
+		expect(token.sentTo).toBe(user.email)
+		expect(token.hashedToken).toBe(hash256(generatedToken))
+		expect(token.expiresAt > new Date()).toBe(true)
+		expect(previewEmail).toBeCalled()
+	})
+})

app/auth/mutations/forgot-password.ts

@@ -0,0 +1,42 @@
+import { resolver, generateToken, hash256 } from "blitz"
+
+import db from "../../../db"
+import { forgotPasswordMailer } from "../../../mailers/forgot-password-mailer"
+import { ForgotPassword } from "../validations"
+
+const RESET_PASSWORD_TOKEN_EXPIRATION_IN_HOURS = 4
+
+export default resolver.pipe(resolver.zod(ForgotPassword), async ({ email }) => {
+	// 1. Get the user
+	const user = await db.user.findFirst({ where: { email: email.toLowerCase() } })
+
+	// 2. Generate the token and expiration date.
+	const token = generateToken()
+	const hashedToken = hash256(token)
+	const expiresAt = new Date()
+	expiresAt.setHours(expiresAt.getHours() + RESET_PASSWORD_TOKEN_EXPIRATION_IN_HOURS)
+
+	// 3. If user with this email was found
+	if (user) {
+		// 4. Delete any existing password reset tokens
+		await db.token.deleteMany({ where: { type: "RESET_PASSWORD", userId: user.id } })
+		// 5. Save this new token in the database.
+		await db.token.create({
+			data: {
+				user: { connect: { id: user.id } },
+				type: "RESET_PASSWORD",
+				expiresAt,
+				hashedToken,
+				sentTo: user.email,
+			},
+		})
+		// 6. Send the email
+		await forgotPasswordMailer({ to: user.email, token }).send()
+	} else {
+		// 7. If no user found wait the same time so attackers can't tell the difference
+		await new Promise((resolve) => setTimeout(resolve, 750))
+	}
+
+	// 8. Return the same result whether a password reset email was sent or not
+	return
+})

app/auth/mutations/login.ts

@@ -0,0 +1,31 @@
+import { resolver, SecurePassword, AuthenticationError } from "blitz"
+
+import db, { Role } from "../../../db"
+import { Login } from "../validations"
+
+export const authenticateUser = async (rawEmail: string, rawPassword: string) => {
+	const email = rawEmail.toLowerCase().trim()
+	const password = rawPassword.trim()
+	const user = await db.user.findFirst({ where: { email } })
+	if (!user) throw new AuthenticationError()
+
+	const result = await SecurePassword.verify(user.hashedPassword, password)
+
+	if (result === SecurePassword.VALID_NEEDS_REHASH) {
+		// Upgrade hashed password with a more secure hash
+		const improvedHash = await SecurePassword.hash(password)
+		await db.user.update({ where: { id: user.id }, data: { hashedPassword: improvedHash } })
+	}
+
+	const { hashedPassword, ...rest } = user
+	return rest
+}
+
+export default resolver.pipe(resolver.zod(Login), async ({ email, password }, ctx) => {
+	// This throws an error if credentials are invalid
+	const user = await authenticateUser(email, password)
+
+	await ctx.session.$create({ userId: user.id, role: user.role as Role })
+
+	return user
+})

app/auth/mutations/logout.ts

@@ -0,0 +1,5 @@
+import { Ctx } from "blitz"
+
+export default async function logout(_: any, ctx: Ctx) {
+	return await ctx.session.$revoke()
+}

app/auth/mutations/reset-password.test.ts

@@ -0,0 +1,83 @@
+import { hash256, SecurePassword } from "blitz"
+
+import db from "../../../db"
+import resetPassword from "./reset-password"
+
+beforeEach(async () => {
+	await db.$reset()
+})
+
+const mockCtx: any = {
+	session: {
+		$create: jest.fn,
+	},
+}
+
+describe("resetPassword mutation", () => {
+	it("works correctly", async () => {
+		expect(true).toBe(true)
+
+		// Create test user
+		const goodToken = "randomPasswordResetToken"
+		const expiredToken = "expiredRandomPasswordResetToken"
+		const future = new Date()
+		future.setHours(future.getHours() + 4)
+		const past = new Date()
+		past.setHours(past.getHours() - 4)
+
+		const user = await db.user.create({
+			data: {
+				email: "user@example.com",
+				tokens: {
+					// Create old token to ensure it's deleted
+					create: [
+						{
+							type: "RESET_PASSWORD",
+							hashedToken: hash256(expiredToken),
+							expiresAt: past,
+							sentTo: "user@example.com",
+						},
+						{
+							type: "RESET_PASSWORD",
+							hashedToken: hash256(goodToken),
+							expiresAt: future,
+							sentTo: "user@example.com",
+						},
+					],
+				},
+			},
+			include: { tokens: true },
+		})
+
+		const newPassword = "newPassword"
+
+		// Non-existent token
+		await expect(
+			resetPassword({ token: "no-token", password: "", passwordConfirmation: "" }, mockCtx)
+		).rejects.toThrowError()
+
+		// Expired token
+		await expect(
+			resetPassword(
+				{ token: expiredToken, password: newPassword, passwordConfirmation: newPassword },
+				mockCtx
+			)
+		).rejects.toThrowError()
+
+		// Good token
+		await resetPassword(
+			{ token: goodToken, password: newPassword, passwordConfirmation: newPassword },
+			mockCtx
+		)
+
+		// Delete's the token
+		const numberOfTokens = await db.token.count({ where: { userId: user.id } })
+		expect(numberOfTokens).toBe(0)
+
+		// Updates user's password
+		const updatedUser = await db.user.findFirst({ where: { id: user.id } })
+		expect(await SecurePassword.verify(updatedUser!.hashedPassword, newPassword)).toBe(
+			SecurePassword.VALID
+		)
+	})
+})

app/auth/mutations/reset-password.ts

@@ -0,0 +1,48 @@
+import { resolver, SecurePassword, hash256 } from "blitz"
+
+import db from "../../../db"
+import { ResetPassword } from "../validations"
+import login from "./login"
+
+export class ResetPasswordError extends Error {
+	name = "ResetPasswordError"
+	message = "Reset password link is invalid or it has expired."
+}
+
+export default resolver.pipe(resolver.zod(ResetPassword), async ({ password, token }, ctx) => {
+	// 1. Try to find this token in the database
+	const hashedToken = hash256(token)
+	const possibleToken = await db.token.findFirst({
+		where: { hashedToken, type: "RESET_PASSWORD" },
+		include: { user: true },
+	})
+
+	// 2. If token not found, error
+	if (!possibleToken) {
+		throw new ResetPasswordError()
+	}
+	const savedToken = possibleToken
+
+	// 3. Delete token so it can't be used again
+	await db.token.delete({ where: { id: savedToken.id } })
+
+	// 4. If token has expired, error
+	if (savedToken.expiresAt < new Date()) {
+		throw new ResetPasswordError()
+	}
+
+	// 5. Since token is valid, now we can update the user's password
+	const hashedPassword = await SecurePassword.hash(password.trim())
+	const user = await db.user.update({
+		where: { id: savedToken.userId },
+		data: { hashedPassword },
+	})
+
+	// 6. Revoke all existing login sessions for this user
+	await db.session.deleteMany({ where: { userId: user.id } })
+
+	// 7. Now log the user in with the new credentials
+	await login({ email: user.email, password }, ctx)
+
+	return true
+})

app/auth/mutations/signup.ts

@@ -0,0 +1,18 @@
+import { resolver, SecurePassword } from "blitz"
+
+import db, { Role } from "../../../db"
+import { Signup } from "../validations"
+import { computeEncryptionKey } from "../../../db/_encryption"
+
+export default resolver.pipe(resolver.zod(Signup), async ({ email, password }, ctx) => {
+	const hashedPassword = await SecurePassword.hash(password.trim())
+	const user = await db.user.create({
+		data: { email: email.toLowerCase().trim(), hashedPassword, role: Role.USER },
+		select: { id: true, name: true, email: true, role: true },
+	})
+	const encryptionKey = computeEncryptionKey(user.id).toString("hex")
+	await db.customer.create({ data: { id: user.id, encryptionKey } })
+
+	await ctx.session.$create({ userId: user.id, role: user.role })
+	return user
+})

app/auth/pages/forgot-password.tsx

@@ -0,0 +1,52 @@
+import { BlitzPage, useMutation } from "blitz"
+
+import BaseLayout from "../../core/layouts/base-layout"
+import { LabeledTextField } from "../../core/components/labeled-text-field"
+import { Form, FORM_ERROR } from "../../core/components/form"
+import { ForgotPassword } from "../validations"
+import forgotPassword from "../../auth/mutations/forgot-password"
+
+const ForgotPasswordPage: BlitzPage = () => {
+	const [forgotPasswordMutation, { isSuccess }] = useMutation(forgotPassword)
+
+	return (
+		<div>
+			<h1>Forgot your password?</h1>
+
+			{isSuccess ? (
+				<div>
+					<h2>Request Submitted</h2>
+					<p>
+						If your email is in our system, you will receive instructions to reset your
+						password shortly.
+					</p>
+				</div>
+			) : (
+				<Form
+					submitText="Send Reset Password Instructions"
+					schema={ForgotPassword}
+					initialValues={{ email: "" }}
+					onSubmit={async (values) => {
+						try {
+							await forgotPasswordMutation(values)
+						} catch (error) {
+							return {
+								[FORM_ERROR]:
+									"Sorry, we had an unexpected error. Please try again.",
+							}
+						}
+					}}
+				>
+					<LabeledTextField name="email" label="Email" placeholder="Email" />
+				</Form>
+			)}
+		</div>
+	)
+}
+
+ForgotPasswordPage.redirectAuthenticatedTo = "/"
+ForgotPasswordPage.getLayout = (page) => (
+	<BaseLayout title="Forgot Your Password?">{page}</BaseLayout>
+)
+
+export default ForgotPasswordPage

app/auth/pages/login.tsx

@@ -0,0 +1,26 @@
+import { useRouter, BlitzPage } from "blitz"
+
+import BaseLayout from "../../core/layouts/base-layout"
+import { LoginForm } from "../components/login-form"
+
+const LoginPage: BlitzPage = () => {
+	const router = useRouter()
+
+	return (
+		<div>
+			<LoginForm
+				onSuccess={() => {
+					const next = router.query.next
+						? decodeURIComponent(router.query.next as string)
+						: "/"
+					router.push(next)
+				}}
+			/>
+		</div>
+	)
+}
+
+LoginPage.redirectAuthenticatedTo = "/"
+LoginPage.getLayout = (page) => <BaseLayout title="Log In">{page}</BaseLayout>
+
+export default LoginPage

app/auth/pages/reset-password.tsx

@@ -0,0 +1,65 @@
+import { BlitzPage, useRouterQuery, Link, useMutation, Routes } from "blitz"
+
+import BaseLayout from "../../core/layouts/base-layout"
+import { LabeledTextField } from "../../core/components/labeled-text-field"
+import { Form, FORM_ERROR } from "../../core/components/form"
+import { ResetPassword } from "../validations"
+import resetPassword from "../../auth/mutations/reset-password"
+
+const ResetPasswordPage: BlitzPage = () => {
+	const query = useRouterQuery()
+	const [resetPasswordMutation, { isSuccess }] = useMutation(resetPassword)
+
+	return (
+		<div>
+			<h1>Set a New Password</h1>
+
+			{isSuccess ? (
+				<div>
+					<h2>Password Reset Successfully</h2>
+					<p>
+						Go to the <Link href={Routes.Home()}>homepage</Link>
+					</p>
+				</div>
+			) : (
+				<Form
+					submitText="Reset Password"
+					schema={ResetPassword}
+					initialValues={{
+						password: "",
+						passwordConfirmation: "",
+						token: query.token as string,
+					}}
+					onSubmit={async (values) => {
+						try {
+							await resetPasswordMutation(values)
+						} catch (error) {
+							if (error.name === "ResetPasswordError") {
+								return {
+									[FORM_ERROR]: error.message,
+								}
+							} else {
+								return {
+									[FORM_ERROR]:
+										"Sorry, we had an unexpected error. Please try again.",
+								}
+							}
+						}
+					}}
+				>
+					<LabeledTextField name="password" label="New Password" type="password" />
+					<LabeledTextField
+						name="passwordConfirmation"
+						label="Confirm New Password"
+						type="password"
+					/>
+				</Form>
+			)}
+		</div>
+	)
+}
+
+ResetPasswordPage.redirectAuthenticatedTo = "/"
+ResetPasswordPage.getLayout = (page) => <BaseLayout title="Reset Your Password">{page}</BaseLayout>
+
+export default ResetPasswordPage

app/auth/pages/signup.tsx

@@ -0,0 +1,19 @@
+import { useRouter, BlitzPage, Routes } from "blitz"
+
+import BaseLayout from "../../core/layouts/base-layout"
+import { SignupForm } from "../components/signup-form"
+
+const SignupPage: BlitzPage = () => {
+	const router = useRouter()
+
+	return (
+		<div>
+			<SignupForm onSuccess={() => router.push(Routes.Home())} />
+		</div>
+	)
+}
+
+SignupPage.redirectAuthenticatedTo = "/"
+SignupPage.getLayout = (page) => <BaseLayout title="Sign Up">{page}</BaseLayout>
+
+export default SignupPage

app/auth/validations.ts

@@ -0,0 +1,33 @@
+import { z } from "zod"
+
+const password = z.string().min(10).max(100)
+
+export const Signup = z.object({
+	email: z.string().email(),
+	password,
+})
+
+export const Login = z.object({
+	email: z.string().email(),
+	password: z.string(),
+})
+
+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 ChangePassword = z.object({
+	currentPassword: z.string(),
+	newPassword: password,
+})