fix(SW-236): properly handle expired token in webviews

Trying out a new pattern for errors in data fetching.

Next.js is not a fan of throwing errors. Instead it recommends returning
different shapes for each state. Ref:
https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-expected-errors-from-server-components

It requires some more detailing and a bit more refactoring in non webview part,
but it is a start. This webview specific implementation should not break web.

app/[lang]/(live)/(protected)/layout.tsx

@@ -1,5 +1,9 @@
+import { headers } from "next/headers"
 import { redirect } from "next/navigation"
 
+import { overview } from "@/constants/routes/myPages"
+import { serverClient } from "@/lib/trpc/server"
+
 import { auth } from "@/auth"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
@@ -13,8 +17,18 @@ export default async function ProtectedLayout({
    *  Fallback to make sure every route nested in the
    *  protected route group is actually protected.
    */
+  const h = headers()
+  const redirectTo = encodeURIComponent(
+    h.get("x-url") ?? h.get("x-pathname") ?? overview[params.lang]
+  )
+
   if (!session) {
-    redirect(`/${params.lang}/login`)
+    redirect(`/${params.lang}/login?redirectTo=${redirectTo}`)
+  }
+
+  const user = await serverClient().user.get()
+  if (!user || "error" in user) {
+    redirect(`/${params.lang}/login?redirectTo=${redirectTo}`)
   }
 
   return children

app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/page.tsx

@@ -4,7 +4,7 @@ import Form from "@/components/Forms/Edit/Profile"
 
 export default async function EditProfileSlot() {
   const user = await serverClient().user.get({ mask: false })
-  if (!user) {
+  if (!user || "error" in user) {
     return null
   }
   return <Form user={user} />

app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx

@@ -24,7 +24,7 @@ import type { LangParams, PageArgs } from "@/types/params"
 export default async function Profile({ params }: PageArgs<LangParams>) {
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.get()
-  if (!user) {
+  if (!user || "error" in user) {
     return null
   }
   const language = languageSelect.find((l) => l.value === user.language)

app/[lang]/webview/[contentType]/[uid]/page.tsx

@@ -1,4 +1,6 @@
-import { notFound } from "next/navigation"
+import { notFound, redirect } from "next/navigation"
+
+import { serverClient } from "@/lib/trpc/server"
 
 import AccountPage from "@/components/ContentType/Webviews/AccountPage"
 import LoyaltyPage from "@/components/ContentType/Webviews/LoyaltyPage"
@@ -13,6 +15,21 @@ import {
 export default async function ContentTypePage({
   params,
 }: PageArgs<LangParams & ContentTypeWebviewParams & UIDParams, {}>) {
+  const user = await serverClient().user.get()
+
+  if (!user) {
+    return <p>Error: No user could be loaded</p>
+  }
+
+  if ("error" in user) {
+    switch (user.cause) {
+      case "unauthorized": // fall through
+      case "forbidden": // fall through
+      case "token_expired":
+        redirect(`/${params.lang}/webview/refresh`)
+    }
+  }
+
   switch (params.contentType) {
     case "loyalty-page":
       return <LoyaltyPage lang={params.lang} />

components/Loyalty/Sidebar/MyPagesNavigation/index.tsx

@@ -1,16 +0,0 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import MyPagesSidebar from "@/components/MyPages/Sidebar"
-
-import { LangParams } from "@/types/params"
-
-export default async function MyPagesNavigation({ lang }: LangParams) {
-  const user = await serverClient().user.name()
-
-  // Check if we have user, that means we are logged in.
-  if (!user) {
-    return null
-  }
-
-  return <MyPagesSidebar lang={lang} />
-}

components/Loyalty/Sidebar/index.tsx

@@ -1,7 +1,7 @@
 import JsonToHtml from "@/components/JsonToHtml"
+import SidebarMyPages from "@/components/MyPages/Sidebar"
 
 import JoinLoyaltyContact from "./JoinLoyalty"
-import MyPagesNavigation from "./MyPagesNavigation"
 
 import styles from "./sidebar.module.css"
 
@@ -44,7 +44,7 @@ export default function SidebarLoyalty({
             switch (block.dynamic_content.component) {
               case LoyaltySidebarDynamicComponentEnum.my_pages_navigation:
                 return (
-                  <MyPagesNavigation
+                  <SidebarMyPages
                     key={`${block.__typename}-${idx}`}
                     lang={lang}
                   />

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -24,7 +24,7 @@ export default async function CurrentBenefitsBlock({
   // TAKE NOTE: we need clarification on how benefits stack from different levels
   // in order to determine if a benefit is specific to a level or if it is a cumulative benefit
   // we might have to add a new boolean property "exclusive" or similar
-  if (!user) {
+  if (!user || "error" in user) {
     return null
   }
   const membership = getMembership(user.memberships)

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -25,7 +25,7 @@ export default async function NextLevelBenefitsBlock({
 }: AccountPageComponentProps) {
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.get()
-  if (!user) {
+  if (!user || "error" in user) {
     return null
   }
   const nextLevel = getMembershipLevelObject(

components/MyPages/Blocks/Overview/index.tsx

@@ -21,7 +21,7 @@ export default async function Overview({
   lang,
 }: AccountPageComponentProps & LangParams) {
   const user = await serverClient().user.get()
-  if (!user) {
+  if (!user || "error" in user) {
     return null
   }
 

components/MyPages/Blocks/Points/Overview/index.tsx

@@ -21,7 +21,7 @@ export default async function PointsOverview({
   lang,
 }: AccountPageComponentProps & LangParams) {
   const user = await serverClient().user.get()
-  if (!user) {
+  if (!user || "error" in user) {
     return null
   }
 

components/MyPages/Sidebar/index.tsx

@@ -12,7 +12,7 @@ import styles from "./sidebar.module.css"
 
 import type { LangParams } from "@/types/params"
 
-export default async function Sidebar({ lang }: LangParams) {
+export default async function SidebarMyPages({ lang }: LangParams) {
   const navigation = await serverClient().contentstack.myPages.navigation.get()
   const { formatMessage } = await getIntl()
   if (!navigation) {

server/routers/user/query.ts

@@ -31,6 +31,12 @@ import type {
 } from "@/types/components/tracking"
 
 async function getVerifiedUser({ session }: { session: Session }) {
+  const now = Date.now()
+
+  if (session.token.expires_at < now) {
+    return { error: true, cause: "token_expired" } as const
+  }
+
   const apiResponse = await api.get(api.endpoints.v1.profile, {
     cache: "no-store",
     headers: {
@@ -39,6 +45,11 @@ async function getVerifiedUser({ session }: { session: Session }) {
   })
 
   if (!apiResponse.ok) {
+    if (apiResponse.status === 401) {
+      return { error: true, cause: "unauthorized" } as const
+    } else if (apiResponse.status === 403) {
+      return { error: true, cause: "forbidden" } as const
+    }
     return null
   }
 
@@ -141,12 +152,18 @@ export const userQueryRouter = router({
   get: protectedProcedure
     .input(getUserInputSchema)
     .query(async function getUser({ ctx, input }) {
-      const verifiedData = await getVerifiedUser({ session: ctx.session })
+      const data = await getVerifiedUser({ session: ctx.session })
 
-      if (!verifiedData) {
+      if (!data) {
         return null
       }
 
+      if ("error" in data) {
+        return data
+      }
+
+      const verifiedData = data
+
       const country = countries.find(
         (c) => c.code === verifiedData.data.address.countryCode
       )
@@ -199,7 +216,7 @@ export const userQueryRouter = router({
     }
     const verifiedData = await getVerifiedUser({ session: ctx.session })
 
-    if (!verifiedData) {
+    if (!verifiedData || "error" in verifiedData) {
       return null
     }
     return {
@@ -213,7 +230,7 @@ export const userQueryRouter = router({
     }
     const verifiedData = await getVerifiedUser({ session: ctx.session })
 
-    if (!verifiedData) {
+    if (!verifiedData || "error" in verifiedData) {
       return null
     }
 
@@ -230,7 +247,7 @@ export const userQueryRouter = router({
     }
     const verifiedUserData = await getVerifiedUser({ session: ctx.session })
 
-    if (!verifiedUserData) {
+    if (!verifiedUserData || "error" in verifiedUserData) {
       return notLoggedInUserTrackingData
     }