fix: disable ppr in auth pages to make them SSG

core/app/[locale]/(default)/(auth)/change-password/page.tsx

@@ -40,3 +40,5 @@ export default async function ChangePassword({ searchParams }: Props) {
     />
   );
 }
+
+export const experimental_ppr = false;

core/app/[locale]/(default)/(auth)/login/forgot-password/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import { getTranslations } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 // import { client } from '~/client';
 // import { graphql } from '~/client/graphql';
@@ -24,15 +24,25 @@ import { resetPassword } from './_actions/reset-password';
 //   }
 // `);
 
-export async function generateMetadata(): Promise<Metadata> {
-  const t = await getTranslations('Login.ForgotPassword');
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+
+  const t = await getTranslations({ namespace: 'Login.ForgotPassword', locale });
 
   return {
     title: t('title'),
   };
 }
 
-export default async function Reset() {
+export default async function Reset({ params }: Props) {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
   const t = await getTranslations('Login.ForgotPassword');
 
   // TODO: add recaptcha token
@@ -50,3 +60,5 @@ export default async function Reset() {
     />
   );
 }
+
+export const experimental_ppr = false;

core/app/[locale]/(default)/(auth)/login/page.tsx

@@ -1,20 +1,30 @@
 import { Metadata } from 'next';
-import { getTranslations } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { ButtonLink } from '@/vibes/soul/primitives/button-link';
 import { SignInSection } from '@/vibes/soul/sections/sign-in-section';
 
 import { login } from './_actions/login';
 
-export async function generateMetadata(): Promise<Metadata> {
-  const t = await getTranslations('Login');
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+
+  const t = await getTranslations({ namespace: 'Login', locale });
 
   return {
     title: t('title'),
   };
 }
 
-export default async function Login() {
+export default async function Login({ params }: Props) {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
   const t = await getTranslations('Login');
 
   return (
@@ -25,7 +35,7 @@ export default async function Login() {
       submitLabel={t('Form.logIn')}
       title={t('heading')}
     >
-      <div className="">
+      <div>
         <h3 className="mb-3 text-xl font-bold lg:text-2xl">{t('CreateAccount.heading')}</h3>
         <p className="text-base font-semibold">{t('CreateAccount.accountBenefits')}</p>
         <ul className="mb-4 list-disc ps-4">
@@ -42,3 +52,5 @@ export default async function Login() {
     </SignInSection>
   );
 }
+
+export const experimental_ppr = false;

core/app/[locale]/(default)/(auth)/register/page-data.ts

@@ -1,8 +1,8 @@
 import { cache } from 'react';
 
-import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
+import { revalidate } from '~/client/revalidate-target';
 import { FormFieldsFragment } from '~/data-transformers/form-field-transformer/fragment';
 import { bypassReCaptcha } from '~/lib/bypass-recaptcha';
 
@@ -52,8 +52,6 @@ interface Props {
 }
 
 export const getRegisterCustomerQuery = cache(async ({ address, customer }: Props) => {
-  const customerAccessToken = await getSessionCustomerAccessToken();
-
   const response = await client.fetch({
     document: RegisterCustomerQuery,
     variables: {
@@ -62,8 +60,7 @@ export const getRegisterCustomerQuery = cache(async ({ address, customer }: Prop
       customerFilters: customer?.filters,
       customerSortBy: customer?.sortBy,
     },
-    fetchOptions: { cache: 'no-store' },
-    customerAccessToken,
+    fetchOptions: { next: { revalidate } },
   });
 
   const addressFields = response.data.site.settings?.formFields.shippingAddress;

core/app/[locale]/(default)/(auth)/register/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { getTranslations } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 // TODO: Add recaptcha token
 // import { bypassReCaptcha } from '~/lib/bypass-recaptcha';
@@ -16,15 +16,25 @@ import { exists } from '~/lib/utils';
 import { registerCustomer } from './_actions/register-customer';
 import { getRegisterCustomerQuery } from './page-data';
 
-export async function generateMetadata(): Promise<Metadata> {
-  const t = await getTranslations('Register');
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+
+  const t = await getTranslations({ namespace: 'Register', locale });
 
   return {
     title: t('title'),
   };
 }
 
-export default async function Register() {
+export default async function Register({ params }: Props) {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
   const t = await getTranslations('Register');
 
   const registerCustomerData = await getRegisterCustomerQuery({
@@ -57,3 +67,5 @@ export default async function Register() {
     />
   );
 }
+
+export const experimental_ppr = false;

core/middlewares/with-auth.ts

@@ -1,7 +1,24 @@
+import { NextResponse } from 'next/server';
+
 import { auth } from '~/auth';
 
 import { type MiddlewareFactory } from './compose-middlewares';
 
-// The `auth` function doesn't have the correct type to support it as a MiddlewareFactory.
-// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-export const withAuth: MiddlewareFactory = auth as unknown as MiddlewareFactory;
+const AUTH_PATHS = ['/login/', '/login/forgot-password/', '/register/', '/change-password/'];
+
+export const withAuth: MiddlewareFactory = (next) => {
+  return (request, event) => {
+    // @ts-expect-error: The `auth` function doesn't have the correct type to support it as a MiddlewareFactory.
+    const authWithCallback = auth(async (req) => {
+      if (req.auth && AUTH_PATHS.includes(req.nextUrl.pathname)) {
+        return NextResponse.redirect(new URL('/account/orders', req.nextUrl.origin));
+      }
+
+      // Continue the middleware chain
+      return next(req, event);
+    });
+
+    // @ts-expect-error: The `auth` function doesn't have the correct type to support it as a MiddlewareFactory.
+    return authWithCallback(request, event);
+  };
+};