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,15 +8,12 @@ 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="h-16 text-3xl text-gray-700">
 				<span>{phoneNumber}</span>
@@ -62,16 +60,12 @@ const Keypad: BlitzPage = () => {
 					<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
+					<div className="cursor-pointer select-none my-auto" onClick={pressBackspace}>
-							className="cursor-pointer select-none my-auto"
-							onClick={pressBackspace}
-						>
 						<FontAwesomeIcon icon={faBackspace} size="lg" />
 					</div>
 				</Row>
 			</section>
 		</div>
-		</Layout>
 	);
 };
 
@@ -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
-			currentStep={1}
-			next={{ href: "/welcome/step-two", label: "Set up your phone number" }}
-		>
 		<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,13 +48,9 @@ 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">
 			<form onSubmit={onSubmit}>
-					<label
+				<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
-						htmlFor="phoneNumberSid"
-						className="block text-sm font-medium text-gray-700"
-					>
 					Phone number
 				</label>
 				<select
@@ -81,11 +77,16 @@ const StepThree: BlitzPage<Props> = ({ availablePhoneNumbers }) => {
 				</button>
 			</form>
 		</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) {
@@ -47,11 +44,6 @@ const StepTwo: BlitzPage = () => {
 	});
 
 	return (
-		<OnboardingLayout
-			currentStep={2}
-			next={hasTwilioCredentials ? { href: "/welcome/step-three", label: "Next" } : undefined}
-			previous={{ href: "/welcome/step-one", label: "Back" }}
-		>
 		<div className="flex flex-col space-y-4 items-center">
 			<form onSubmit={onSubmit} className="flex flex-col gap-6">
 				<div className="w-full">
@@ -95,11 +87,31 @@ const StepTwo: BlitzPage = () => {
 				</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: Routes.StepThree().pathname, label: "Next" }
+					: undefined
+			}
+			previous={{ href: Routes.StepOne().pathname, label: "Back" }}
+		>
+			{page}
 		</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,7 +33,6 @@ const Settings: BlitzPage = () => {
 	useRequireOnboarding();
 
 	return (
-		<Layout title="Settings">
 		<div className="flex flex-col space-y-6 p-6">
 			<aside className="py-6 lg:col-span-3">
 				<nav className="space-y-1">
@@ -49,10 +49,11 @@ const Settings: BlitzPage = () => {
 				</nav>
 			</aside>
 		</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;