boring stuff

app/auth/components/login-form.tsx

@@ -52,7 +52,7 @@ export const LoginForm = (props: LoginFormProps) => {
 			</Form>
 
 			<div style={{ marginTop: "1rem" }}>
-				Or <Link href={Routes.SignupPage()}>Sign Up</Link>
+				Or <Link href={Routes.SignUp()}>Sign Up</Link>
 			</div>
 		</div>
 	);

app/auth/pages/forgot-password.tsx

@@ -1,4 +1,5 @@
-import { BlitzPage, useMutation } from "blitz";
+import type { BlitzPage } from "blitz";
+import { Routes, useMutation } from "blitz";
 
 import BaseLayout from "../../core/layouts/base-layout";
 import { LabeledTextField } from "../../core/components/labeled-text-field";
@@ -44,7 +45,8 @@ const ForgotPasswordPage: BlitzPage = () => {
 	);
 };
 
-ForgotPasswordPage.redirectAuthenticatedTo = "/";
+ForgotPasswordPage.redirectAuthenticatedTo = Routes.Messages();
+
 ForgotPasswordPage.getLayout = (page) => (
 	<BaseLayout title="Forgot Your Password?">{page}</BaseLayout>
 );

app/auth/pages/reset-password.tsx

@@ -1,4 +1,5 @@
-import { BlitzPage, useRouterQuery, Link, useMutation, Routes } from "blitz";
+import type { BlitzPage } from "blitz";
+import { useRouterQuery, Link, useMutation, Routes } from "blitz";
 
 import BaseLayout from "../../core/layouts/base-layout";
 import { LabeledTextField } from "../../core/components/labeled-text-field";
@@ -59,7 +60,8 @@ const ResetPasswordPage: BlitzPage = () => {
 	);
 };
 
-ResetPasswordPage.redirectAuthenticatedTo = "/";
+ResetPasswordPage.redirectAuthenticatedTo = Routes.Messages();
+
 ResetPasswordPage.getLayout = (page) => <BaseLayout title="Reset Your Password">{page}</BaseLayout>;
 
 export default ResetPasswordPage;

app/auth/pages/sign-in.tsx

@@ -1,9 +1,10 @@
-import { useRouter, BlitzPage } from "blitz";
+import type { BlitzPage } from "blitz";
+import { useRouter, Routes } from "blitz";
 
 import BaseLayout from "../../core/layouts/base-layout";
 import { LoginForm } from "../components/login-form";
 
-const LoginPage: BlitzPage = () => {
+const SignIn: BlitzPage = () => {
 	const router = useRouter();
 
 	return (
@@ -12,7 +13,7 @@ const LoginPage: BlitzPage = () => {
 				onSuccess={() => {
 					const next = router.query.next
 						? decodeURIComponent(router.query.next as string)
-						: "/";
+						: Routes.Messages();
 					router.push(next);
 				}}
 			/>
@@ -20,7 +21,8 @@ const LoginPage: BlitzPage = () => {
 	);
 };
 
-LoginPage.redirectAuthenticatedTo = "/";
+SignIn.redirectAuthenticatedTo = Routes.Messages();
-LoginPage.getLayout = (page) => <BaseLayout title="Log In">{page}</BaseLayout>;
 
-export default LoginPage;
+SignIn.getLayout = (page) => <BaseLayout title="Sign In">{page}</BaseLayout>;
+
+export default SignIn;

app/auth/pages/signup.tsx

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

app/keypad/pages/keypad.tsx

@@ -1,4 +1,5 @@
 import type { BlitzPage } from "blitz";
+import { Routes } from "blitz";
 import type { FunctionComponent } from "react";
 import { atom, useAtom } from "jotai";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -7,71 +8,64 @@ import { faBackspace, faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-i
 import Layout from "../../core/layouts/layout";
 import useRequireOnboarding from "../../core/hooks/use-require-onboarding";
 
-const pageTitle = "Keypad";
-
 const Keypad: BlitzPage = () => {
 	useRequireOnboarding();
 	const phoneNumber = useAtom(phoneNumberAtom)[0];
 	const pressBackspace = useAtom(pressBackspaceAtom)[1];
 
 	return (
-		<Layout title={pageTitle}>
+		<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
-			<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
+			<div className="h-16 text-3xl text-gray-700">
-				<div className="h-16 text-3xl text-gray-700">
+				<span>{phoneNumber}</span>
-					<span>{phoneNumber}</span>
-				</div>
-
-				<section>
-					<Row>
-						<Digit digit="1" />
-						<Digit digit="2">
-							<DigitLetters>ABC</DigitLetters>
-						</Digit>
-						<Digit digit="3">
-							<DigitLetters>DEF</DigitLetters>
-						</Digit>
-					</Row>
-					<Row>
-						<Digit digit="4">
-							<DigitLetters>GHI</DigitLetters>
-						</Digit>
-						<Digit digit="5">
-							<DigitLetters>JKL</DigitLetters>
-						</Digit>
-						<Digit digit="6">
-							<DigitLetters>MNO</DigitLetters>
-						</Digit>
-					</Row>
-					<Row>
-						<Digit digit="7">
-							<DigitLetters>PQRS</DigitLetters>
-						</Digit>
-						<Digit digit="8">
-							<DigitLetters>TUV</DigitLetters>
-						</Digit>
-						<Digit digit="9">
-							<DigitLetters>WXYZ</DigitLetters>
-						</Digit>
-					</Row>
-					<Row>
-						<Digit digit="*" />
-						<ZeroDigit />
-						<Digit digit="#" />
-					</Row>
-					<Row>
-						<div className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-green-800 rounded-full">
-							<FontAwesomeIcon icon={faPhone} color="white" size="lg" />
-						</div>
-						<div
-							className="cursor-pointer select-none my-auto"
-							onClick={pressBackspace}
-						>
-							<FontAwesomeIcon icon={faBackspace} size="lg" />
-						</div>
-					</Row>
-				</section>
 			</div>
-		</Layout>
+
+			<section>
+				<Row>
+					<Digit digit="1" />
+					<Digit digit="2">
+						<DigitLetters>ABC</DigitLetters>
+					</Digit>
+					<Digit digit="3">
+						<DigitLetters>DEF</DigitLetters>
+					</Digit>
+				</Row>
+				<Row>
+					<Digit digit="4">
+						<DigitLetters>GHI</DigitLetters>
+					</Digit>
+					<Digit digit="5">
+						<DigitLetters>JKL</DigitLetters>
+					</Digit>
+					<Digit digit="6">
+						<DigitLetters>MNO</DigitLetters>
+					</Digit>
+				</Row>
+				<Row>
+					<Digit digit="7">
+						<DigitLetters>PQRS</DigitLetters>
+					</Digit>
+					<Digit digit="8">
+						<DigitLetters>TUV</DigitLetters>
+					</Digit>
+					<Digit digit="9">
+						<DigitLetters>WXYZ</DigitLetters>
+					</Digit>
+				</Row>
+				<Row>
+					<Digit digit="*" />
+					<ZeroDigit />
+					<Digit digit="#" />
+				</Row>
+				<Row>
+					<div className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-green-800 rounded-full">
+						<FontAwesomeIcon icon={faPhone} color="white" size="lg" />
+					</div>
+					<div className="cursor-pointer select-none my-auto" onClick={pressBackspace}>
+						<FontAwesomeIcon icon={faBackspace} size="lg" />
+					</div>
+				</Row>
+			</section>
+		</div>
 	);
 };
 
@@ -123,4 +117,8 @@ const pressBackspaceAtom = atom(null, (get, set) => {
 	set(phoneNumberAtom, (prevState) => prevState.slice(0, -1));
 });
 
+Keypad.getLayout = (page) => <Layout title="Keypad">{page}</Layout>;
+
+Keypad.authenticate = { redirectTo: Routes.SignIn() };
+
 export default Keypad;

app/messages/components/conversations-list.tsx

@@ -1,4 +1,4 @@
-import { Link, useQuery } from "blitz";
+import { Link, useQuery, Routes } from "blitz";
 
 import getConversationsQuery from "../queries/get-conversations";
 
@@ -15,7 +15,11 @@ export default function ConversationsList() {
 				const lastMessage = messages[messages.length - 1]!;
 				return (
 					<li key={recipient} className="py-2">
-						<Link href={`/messages/${encodeURIComponent(recipient)}`}>
+						<Link
+							href={Routes.ConversationPage({
+								recipient: encodeURIComponent(recipient),
+							})}
+						>
 							<a className="flex flex-col">
 								<div className="flex flex-row justify-between">
 									<strong>{recipient}</strong>

app/messages/pages/messages.tsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 import type { BlitzPage } from "blitz";
+import { Routes } from "blitz";
 
 import Layout from "../../core/layouts/layout";
 import ConversationsList from "../components/conversations-list";
@@ -9,17 +10,19 @@ const Messages: BlitzPage = () => {
 	useRequireOnboarding();
 
 	return (
-		<Layout title="Messages">
+		<>
 			<div className="flex flex-col space-y-6 p-6">
 				<p>Messages page</p>
 			</div>
 			<Suspense fallback="Loading...">
 				<ConversationsList />
 			</Suspense>
-		</Layout>
+		</>
 	);
 };
 
-Messages.authenticate = true;
+Messages.getLayout = (page) => <Layout title="Messages">{page}</Layout>;
+
+Messages.authenticate = { redirectTo: Routes.SignIn() };
 
 export default Messages;

app/messages/pages/messages/[recipient].tsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
-import { BlitzPage, useRouter } from "blitz";
+import type { BlitzPage } from "blitz";
+import { Routes, useRouter } from "blitz";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
 	faLongArrowLeft,
@@ -16,10 +17,9 @@ const ConversationPage: BlitzPage = () => {
 
 	const router = useRouter();
 	const recipient = router.params.recipient;
-	const pageTitle = `Messages with ${recipient}`;
 
 	return (
-		<Layout title={pageTitle} hideFooter>
+		<>
 			<header className="absolute top-0 w-screen h-12 backdrop-filter backdrop-blur-sm bg-white bg-opacity-75 border-b grid grid-cols-3 items-center">
 				<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={router.back}>
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faLongArrowLeft} />
@@ -33,10 +33,22 @@ const ConversationPage: BlitzPage = () => {
 			<Suspense fallback={<div className="pt-12">Loading messages with {recipient}</div>}>
 				<Conversation />
 			</Suspense>
+		</>
+	);
+};
+
+ConversationPage.getLayout = function ConversationLayout(page) {
+	const router = useRouter();
+	const recipient = router.params.recipient;
+	const pageTitle = `Messages with ${recipient}`;
+
+	return (
+		<Layout title={pageTitle} hideFooter>
+			{page}
 		</Layout>
 	);
 };
 
-ConversationPage.authenticate = true;
+ConversationPage.authenticate = { redirectTo: Routes.SignIn() };
 
 export default ConversationPage;

app/onboarding/pages/welcome/step-one.tsx

@@ -9,18 +9,22 @@ const StepOne: BlitzPage = () => {
 	useCurrentCustomer(); // preload for step two
 
 	return (
-		<OnboardingLayout
+		<div className="flex flex-col space-y-4 items-center">
-			currentStep={1}
+			<span>Welcome, let’s set up your virtual phone!</span>
-			next={{ href: "/welcome/step-two", label: "Set up your phone number" }}
+		</div>
-		>
-			<div className="flex flex-col space-y-4 items-center">
-				<span>Welcome, let’s set up your virtual phone!</span>
-			</div>
-		</OnboardingLayout>
 	);
 };
 
-StepOne.authenticate = true;
+StepOne.getLayout = (page) => (
+	<OnboardingLayout
+		currentStep={1}
+		next={{ href: Routes.StepTwo().pathname, label: "Set up your phone number" }}
+	>
+		{page}
+	</OnboardingLayout>
+);
+
+StepOne.authenticate = { redirectTo: Routes.SignIn() };
 
 export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
 	const session = await getSession(req, res);

app/onboarding/pages/welcome/step-three.tsx

@@ -48,44 +48,45 @@ const StepThree: BlitzPage<Props> = ({ availablePhoneNumbers }) => {
 	});
 
 	return (
-		<OnboardingLayout currentStep={3} previous={{ href: "/welcome/step-two", label: "Back" }}>
+		<div className="flex flex-col space-y-4 items-center">
-			<div className="flex flex-col space-y-4 items-center">
+			<form onSubmit={onSubmit}>
-				<form onSubmit={onSubmit}>
+				<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
-					<label
+					Phone number
-						htmlFor="phoneNumberSid"
+				</label>
-						className="block text-sm font-medium text-gray-700"
+				<select
-					>
+					id="phoneNumberSid"
-						Phone number
+					className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
-					</label>
+					{...register("phoneNumberSid")}
-					<select
+				>
-						id="phoneNumberSid"
+					{availablePhoneNumbers.map(({ sid, phoneNumber }) => (
-						className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
+						<option value={sid} key={sid}>
-						{...register("phoneNumberSid")}
+							{phoneNumber}
-					>
+						</option>
-						{availablePhoneNumbers.map(({ sid, phoneNumber }) => (
+					))}
-							<option value={sid} key={sid}>
+				</select>
-								{phoneNumber}
-							</option>
-						))}
-					</select>
 
-					<button
+				<button
-						type="submit"
+					type="submit"
-						className={clsx(
+					className={clsx(
-							"max-w-[240px] mt-6 mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
+						"max-w-[240px] mt-6 mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
-							!isSubmitting && "bg-primary-600 hover:bg-primary-700",
+						!isSubmitting && "bg-primary-600 hover:bg-primary-700",
-							isSubmitting && "bg-primary-400 cursor-not-allowed"
+						isSubmitting && "bg-primary-400 cursor-not-allowed"
-						)}
+					)}
-					>
+				>
-						Save
+					Save
-					</button>
+				</button>
-				</form>
+			</form>
-			</div>
+		</div>
-		</OnboardingLayout>
 	);
 };
 
-StepThree.authenticate = true;
+StepThree.getLayout = (page) => (
+	<OnboardingLayout currentStep={3} previous={{ href: Routes.StepTwo().pathname, label: "Back" }}>
+		{page}
+	</OnboardingLayout>
+);
+
+StepThree.authenticate = { redirectTo: Routes.SignIn() };
 
 export const getServerSideProps: GetServerSideProps<Props> = async ({ req, res }) => {
 	const session = await getSession(req, res);

app/onboarding/pages/welcome/step-two.tsx

@@ -25,13 +25,10 @@ const StepTwo: BlitzPage = () => {
 	const { customer } = useCurrentCustomer();
 	const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields);
 
-	const initialAuthToken = customer?.authToken ?? "";
-	const initialAccountSid = customer?.accountSid ?? "";
-	const hasTwilioCredentials = initialAccountSid.length > 0 && initialAuthToken.length > 0;
 	useEffect(() => {
-		setValue("twilioAuthToken", initialAuthToken);
+		setValue("twilioAuthToken", customer?.authToken ?? "");
-		setValue("twilioAccountSid", initialAccountSid);
+		setValue("twilioAccountSid", customer?.accountSid ?? "");
-	}, [initialAuthToken, initialAccountSid]);
+	}, [setValue, customer?.authToken, customer?.accountSid]);
 
 	const onSubmit = handleSubmit(async ({ twilioAccountSid, twilioAuthToken }) => {
 		if (isSubmitting) {
@@ -46,60 +43,75 @@ const StepTwo: BlitzPage = () => {
 		await router.push(Routes.StepThree());
 	});
 
+	return (
+		<div className="flex flex-col space-y-4 items-center">
+			<form onSubmit={onSubmit} className="flex flex-col gap-6">
+				<div className="w-full">
+					<label
+						htmlFor="twilioAccountSid"
+						className="block text-sm font-medium text-gray-700"
+					>
+						Twilio Account SID
+					</label>
+					<input
+						type="text"
+						id="twilioAccountSid"
+						className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+						{...register("twilioAccountSid", { required: true })}
+					/>
+				</div>
+				<div className="w-full">
+					<label
+						htmlFor="twilioAuthToken"
+						className="block text-sm font-medium text-gray-700"
+					>
+						Twilio Auth Token
+					</label>
+					<input
+						type="text"
+						id="twilioAuthToken"
+						className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+						{...register("twilioAuthToken", { required: true })}
+					/>
+				</div>
+
+				<button
+					type="submit"
+					className={clsx(
+						"max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
+						!isSubmitting && "bg-primary-600 hover:bg-primary-700",
+						isSubmitting && "bg-primary-400 cursor-not-allowed"
+					)}
+				>
+					Save
+				</button>
+			</form>
+		</div>
+	);
+};
+
+StepTwo.getLayout = function StepTwoLayout(page) {
+	const { customer } = useCurrentCustomer();
+	const initialAuthToken = customer?.authToken ?? "";
+	const initialAccountSid = customer?.accountSid ?? "";
+	const hasTwilioCredentials = initialAccountSid.length > 0 && initialAuthToken.length > 0;
+
 	return (
 		<OnboardingLayout
 			currentStep={2}
-			next={hasTwilioCredentials ? { href: "/welcome/step-three", label: "Next" } : undefined}
+			next={
-			previous={{ href: "/welcome/step-one", label: "Back" }}
+				hasTwilioCredentials
+					? { href: Routes.StepThree().pathname, label: "Next" }
+					: undefined
+			}
+			previous={{ href: Routes.StepOne().pathname, label: "Back" }}
 		>
-			<div className="flex flex-col space-y-4 items-center">
+			{page}
-				<form onSubmit={onSubmit} className="flex flex-col gap-6">
-					<div className="w-full">
-						<label
-							htmlFor="twilioAccountSid"
-							className="block text-sm font-medium text-gray-700"
-						>
-							Twilio Account SID
-						</label>
-						<input
-							type="text"
-							id="twilioAccountSid"
-							className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
-							{...register("twilioAccountSid", { required: true })}
-						/>
-					</div>
-					<div className="w-full">
-						<label
-							htmlFor="twilioAuthToken"
-							className="block text-sm font-medium text-gray-700"
-						>
-							Twilio Auth Token
-						</label>
-						<input
-							type="text"
-							id="twilioAuthToken"
-							className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
-							{...register("twilioAuthToken", { required: true })}
-						/>
-					</div>
-
-					<button
-						type="submit"
-						className={clsx(
-							"max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
-							!isSubmitting && "bg-primary-600 hover:bg-primary-700",
-							isSubmitting && "bg-primary-400 cursor-not-allowed"
-						)}
-					>
-						Save
-					</button>
-				</form>
-			</div>
 		</OnboardingLayout>
 	);
 };
 
-StepTwo.authenticate = true;
+StepTwo.authenticate = { redirectTo: Routes.SignIn() };
 
 export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
 	const session = await getSession(req, res);

app/pages/index.tsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
-import { Link, BlitzPage, useMutation, Routes } from "blitz";
+import type { BlitzPage } from "blitz";
+import { Link, useMutation, Routes } from "blitz";
 
 import BaseLayout from "../core/layouts/base-layout";
 import logout from "../auth/mutations/logout";
@@ -35,12 +36,12 @@ const UserInfo = () => {
 	} else {
 		return (
 			<>
-				<Link href={Routes.SignupPage()}>
+				<Link href={Routes.SignUp()}>
 					<a className="button small">
 						<strong>Sign Up</strong>
 					</a>
 				</Link>
-				<Link href={Routes.LoginPage()}>
+				<Link href={Routes.SignIn()}>
 					<a className="button small">
 						<strong>Login</strong>
 					</a>
@@ -268,6 +269,7 @@ const Home: BlitzPage = () => {
 };
 
 Home.suppressFirstRenderFlicker = true;
+
 Home.getLayout = (page) => <BaseLayout title="Home">{page}</BaseLayout>;
 
 export default Home;

app/phone-calls/pages/calls.tsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 import type { BlitzPage } from "blitz";
+import { Routes } from "blitz";
 
 import Layout from "../../core/layouts/layout";
 import PhoneCallsList from "../components/phone-calls-list";
@@ -9,17 +10,19 @@ const PhoneCalls: BlitzPage = () => {
 	useRequireOnboarding();
 
 	return (
-		<Layout title="Calls">
+		<>
 			<div className="flex flex-col space-y-6 p-6">
 				<p>Calls page</p>
 			</div>
 			<Suspense fallback="Loading...">
 				<PhoneCallsList />
 			</Suspense>
-		</Layout>
+		</>
 	);
 };
 
-PhoneCalls.authenticate = true;
+PhoneCalls.getLayout = (page) => <Layout title="Calls">{page}</Layout>;
+
+PhoneCalls.authenticate = { redirectTo: Routes.SignIn() };
 
 export default PhoneCalls;

app/settings/pages/settings.tsx

@@ -1,4 +1,5 @@
 import type { BlitzPage } from "blitz";
+import { Routes } from "blitz";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCreditCard, faUserCircle } from "@fortawesome/pro-regular-svg-icons";
 
@@ -32,27 +33,27 @@ const Settings: BlitzPage = () => {
 	useRequireOnboarding();
 
 	return (
-		<Layout title="Settings">
+		<div className="flex flex-col space-y-6 p-6">
-			<div className="flex flex-col space-y-6 p-6">
+			<aside className="py-6 lg:col-span-3">
-				<aside className="py-6 lg:col-span-3">
+				<nav className="space-y-1">
-					<nav className="space-y-1">
+					{navigation.map((item) => (
-						{navigation.map((item) => (
+						<a
-							<a
+							key={item.name}
-								key={item.name}
+							href={item.href}
-								href={item.href}
+							className="border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"
-								className="border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"
+						>
-							>
+							<item.icon className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" />
-								<item.icon className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" />
+							<span className="truncate">{item.name}</span>
-								<span className="truncate">{item.name}</span>
+						</a>
-							</a>
+					))}
-						))}
+				</nav>
-					</nav>
+			</aside>
-				</aside>
+		</div>
-			</div>
-		</Layout>
 	);
 };
 
-Settings.authenticate = true;
+Settings.getLayout = (page) => <Layout title="Settings">{page}</Layout>;
+
+Settings.authenticate = { redirectTo: Routes.SignIn() };
 
 export default Settings;

app/settings/pages/settings/account.tsx

@@ -1,4 +1,5 @@
 import type { BlitzPage } from "blitz";
+import { Routes } from "blitz";
 
 import SettingsLayout from "../../components/settings-layout";
 import ProfileInformations from "../../components/profile-informations";
@@ -31,6 +32,8 @@ const Account: BlitzPage = () => {
 	);
 };
 
-Account.authenticate = true;
+Account.getLayout = (page) => <SettingsLayout>{page}</SettingsLayout>;
+
+Account.authenticate = { redirectTo: Routes.SignIn() };
 
 export default Account;

app/settings/pages/settings/billing.tsx

@@ -111,10 +111,12 @@ export const getServerSideProps = withPageOnboardingRequired<Props>(
 */
 
 import type { BlitzPage } from "blitz";
+import { Routes } from "blitz";
 import { useRouter } from "blitz";
 import { useEffect } from "react";
 
 import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
+import SettingsLayout from "../../components/settings-layout";
 
 const Billing: BlitzPage = () => {
 	useRequireOnboarding();
@@ -127,6 +129,8 @@ const Billing: BlitzPage = () => {
 	return null;
 };
 
-Billing.authenticate = true;
+Billing.getLayout = (page) => <SettingsLayout>{page}</SettingsLayout>;
+
+Billing.authenticate = { redirectTo: Routes.SignIn() };
 
 export default Billing;