Merge pull request #18785 from mozilla/fxa-11452-user-signout-redirect

fix(next): sign out retains current location

Author: StaberindeZA

apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/layout.tsx

@@ -4,6 +4,7 @@
 import { headers } from 'next/headers';
 import {
   CouponForm,
+  Header,
   MetricsWrapper,
   PurchaseDetails,
   SelectTaxLocation,
@@ -22,7 +23,7 @@ import {
   TermsAndPrivacy,
 } from '@fxa/payments/ui/server';
 import { CartState } from '@fxa/shared/db/mysql/account';
-import { auth } from 'apps/payments/next/auth';
+import { auth, signOut } from 'apps/payments/next/auth';
 import { config } from 'apps/payments/next/config';
 
 export interface CheckoutSearchParams {
@@ -57,6 +58,16 @@ export default async function CheckoutLayout({
     cms.defaultPurchase.purchaseDetails;
   return (
     <MetricsWrapper cart={cart}>
+      <Header
+        auth={{
+          user: session?.user,
+          signOut: async () => {
+            'use server';
+            await signOut({ redirect: false });
+          },
+        }}
+        cart={cart}
+      />
       {session?.user?.email && (
         <div className="mb-8 tablet:hidden">
           <SignedIn email={session.user.email} />

apps/payments/next/app/[locale]/[offeringId]/[interval]/new/page.tsx

@@ -56,8 +56,13 @@ export default async function New({
 
   const fxaUid = session?.user?.id;
   const coupon = searchParams.coupon || undefined;
+  const countryCode = searchParams.countryCode;
+  const postalCode = searchParams.postalCode;
 
-  const taxAddress = await getTaxAddressAction(ipAddress, fxaUid);
+  const taxAddress =
+    countryCode && postalCode
+      ? { countryCode, postalCode }
+      : await getTaxAddressAction(ipAddress, fxaUid);
 
   // Check if the customer is in a location not supported by Subscription Platform
   // or whether the product is not available in the customer's location

apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/layout.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { headers } from 'next/headers';
-import { MetricsWrapper, PurchaseDetails } from '@fxa/payments/ui';
+import { Header, MetricsWrapper, PurchaseDetails } from '@fxa/payments/ui';
 import { fetchCMSData, getCartAction } from '@fxa/payments/ui/actions';
 import {
   getApp,
@@ -13,6 +13,7 @@ import {
   TermsAndPrivacy,
 } from '@fxa/payments/ui/server';
 import { config } from 'apps/payments/next/config';
+import { auth, signOut } from 'apps/payments/next/auth';
 
 export default async function UpgradeSuccessLayout({
   children,
@@ -26,12 +27,27 @@ export default async function UpgradeSuccessLayout({
   const l10n = getApp().getL10n(acceptLanguage, locale);
   const cartDataPromise = getCartAction(params.cartId);
   const cmsDataPromise = fetchCMSData(params.offeringId, locale);
-  const [cms, cart] = await Promise.all([cmsDataPromise, cartDataPromise]);
+  const sessionPromise = auth();
+  const [cms, cart, session] = await Promise.all([
+    cmsDataPromise,
+    cartDataPromise,
+    sessionPromise,
+  ]);
   const purchaseDetails =
     cms.defaultPurchase.purchaseDetails.localizations.at(0) ||
     cms.defaultPurchase.purchaseDetails;
   return (
     <MetricsWrapper cart={cart}>
+      <Header
+        auth={{
+          user: session?.user,
+          signOut: async () => {
+            'use server';
+            await signOut({ redirect: false });
+          },
+        }}
+        cart={cart}
+      />
       <div className="mx-7 tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mb-auto desktop:grid-cols-[600px_1fr]">
         <SubscriptionTitle cart={cart} l10n={l10n} />
         <section

apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(startLayout)/layout.tsx

@@ -4,7 +4,7 @@
 
 import assert from 'assert';
 import { headers } from 'next/headers';
-import { MetricsWrapper } from '@fxa/payments/ui';
+import { Header, MetricsWrapper } from '@fxa/payments/ui';
 import { fetchCMSData, getCartAction } from '@fxa/payments/ui/actions';
 import {
   getApp,
@@ -14,6 +14,7 @@ import {
   UpgradePurchaseDetails,
 } from '@fxa/payments/ui/server';
 import { config } from 'apps/payments/next/config';
+import { auth, signOut } from 'apps/payments/next/auth';
 
 export default async function UpgradeLayout({
   children,
@@ -28,7 +29,12 @@ export default async function UpgradeLayout({
 
   const cartDataPromise = getCartAction(params.cartId);
   const cmsDataPromise = fetchCMSData(params.offeringId, locale);
-  const [cms, cart] = await Promise.all([cmsDataPromise, cartDataPromise]);
+  const sessionPromise = auth();
+  const [cms, cart, session] = await Promise.all([
+    cmsDataPromise,
+    cartDataPromise,
+    sessionPromise,
+  ]);
   const purchaseDetails =
     cms.defaultPurchase.purchaseDetails.localizations.at(0) ||
     cms.defaultPurchase.purchaseDetails;
@@ -43,6 +49,16 @@ export default async function UpgradeLayout({
 
   return (
     <MetricsWrapper cart={cart}>
+      <Header
+        auth={{
+          user: session?.user,
+          signOut: async () => {
+            'use server';
+            await signOut({ redirect: false });
+          },
+        }}
+        cart={cart}
+      />
       <div className="mx-7 tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mb-auto desktop:grid-cols-[600px_1fr]">
         <SubscriptionTitle cart={cart} l10n={l10n} />
 

apps/payments/next/app/[locale]/layout.tsx

@@ -3,9 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 import { getApp } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
-import { Header, Providers } from '@fxa/payments/ui';
+import { Providers } from '@fxa/payments/ui';
 import { config } from 'apps/payments/next/config';
-import { auth, signOut } from '../../auth';
 
 export default async function RootProviderLayout({
   params,
@@ -23,8 +22,6 @@ export default async function RootProviderLayout({
     params.locale
   );
 
-  const session = await auth();
-
   return (
     <Providers
       config={{
@@ -37,15 +34,6 @@ export default async function RootProviderLayout({
       fetchedMessages={fetchedMessages}
       nonce={nonce}
     >
-      <Header
-        auth={{
-          user: session?.user,
-          signOut: async () => {
-            'use server';
-            await signOut({ redirect: false });
-          },
-        }}
-      />
       {children}
     </Providers>
   );

libs/payments/ui/src/lib/client/components/Header/index.tsx

@@ -25,18 +25,54 @@ import { useEscKeydownEffect } from '../../hooks/useEscKeydownEffect';
 import { User } from 'next-auth';
 import { constructHrefWithUtm } from '../../../utils/constructHrefWithUtm';
 import { OFFERING_LINKS } from '../../../constants';
-import { useParams, useRouter } from 'next/navigation';
+import {
+  ReadonlyURLSearchParams,
+  useParams,
+  useRouter,
+  useSearchParams,
+} from 'next/navigation';
+
+function buildSignOutRedirectPath(
+  params: Record<string, string | string[]>,
+  searchParams: ReadonlyURLSearchParams,
+  countryCode: string,
+  postalCode: string
+) {
+  const { locale, offeringId, interval } = params;
+  const remainingQueryParams = searchParams.toString();
+  const basePath = `/${locale}/${offeringId}/${interval}/new?countryCode=${countryCode}&postalCode=${postalCode}`;
+
+  if (remainingQueryParams) {
+    return `${basePath}&${remainingQueryParams}`;
+  } else {
+    return basePath;
+  }
+}
 
 type HeaderProps = {
   auth?: {
     user: User | undefined;
     signOut: () => Promise<void>;
   };
+  cart: {
+    taxAddress: {
+      countryCode: string;
+      postalCode: string;
+    };
+  };
 };
 
-export const Header = ({ auth }: HeaderProps) => {
+export const Header = ({ auth, cart }: HeaderProps) => {
   const router = useRouter();
-  const { locale, offeringId, interval } = useParams();
+  const params = useParams();
+  const searchParams = useSearchParams();
+
+  const signOutRedirectPath = buildSignOutRedirectPath(
+    params,
+    searchParams,
+    cart.taxAddress.countryCode,
+    cart.taxAddress.postalCode
+  );
 
   const signedIn = auth && auth.user;
 
@@ -362,9 +398,8 @@ export const Header = ({ auth }: HeaderProps) => {
                           // As of this commit, both router.push and direct location.href overwriting are necessary to ensure
                           // the browser is in the correct state without any contentless flashes
                           await auth.signOut();
-                          const redirectUrl = `/${locale}/${offeringId}/${interval}/new`;
-                          router.push(redirectUrl);
-                          window.location.href = redirectUrl;
+                          router.push(signOutRedirectPath);
+                          window.location.href = signOutRedirectPath;
                         }}
                         className="pl-3 group"
                       >