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} />