Fix capacitor prod build authentication issues.

Author: Shellishack

mobile/android/app/capacitor.build.gradle

@@ -14,6 +14,7 @@ dependencies {
     implementation project(':capacitor-browser')
     implementation project(':capacitor-filesystem')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-preferences')
     implementation project(':capacitor-screen-orientation')
     implementation project(':capacitor-status-bar')
     implementation project(':capawesome-capacitor-file-picker')

mobile/android/capacitor.settings.gradle

@@ -17,6 +17,9 @@ project(':capacitor-filesystem').projectDir = new File('../../node_modules/@capa
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../../node_modules/@capacitor/keyboard/android')
 
+include ':capacitor-preferences'
+project(':capacitor-preferences').projectDir = new File('../../node_modules/@capacitor/preferences/android')
+
 include ':capacitor-screen-orientation'
 project(':capacitor-screen-orientation').projectDir = new File('../../node_modules/@capacitor/screen-orientation/android')
 

mobile/capacitor.config.ts

@@ -17,6 +17,9 @@ const config: CapacitorConfig = {
     SafeArea: {
       enabled: true,
     },
+    CapacitorHttp: {
+      enabled: true,
+    },
   },
 };
 

mobile/package.json

@@ -5,8 +5,7 @@
   "type": "module",
   "scripts": {
     "android-dev": "node dev.js",
-    "android-run": "npx cap run android",
-    "android-build": "npx cap build android"
+    "android-run": "npx cap run android"
   },
   "dependencies": {
     "@capacitor-community/safe-area": "^7.0.0-alpha.1",
@@ -17,6 +16,7 @@
     "@capacitor/core": "^7.2.0",
     "@capacitor/filesystem": "^7.0.1",
     "@capacitor/keyboard": "^7.0.1",
+    "@capacitor/preferences": "^7.0.2",
     "@capacitor/screen-orientation": "^7.0.1",
     "@capacitor/status-bar": "^7.0.1",
     "@capawesome/capacitor-file-picker": "^7.0.1"

package-lock.json

@@ -28,4 +28,4 @@
         "prettier-plugin-organize-imports": "^4.3.0",
         "prettier-plugin-tailwindcss": "^0.6.14"
     }
-}
+}

package.json

@@ -1,7 +1,8 @@
 "use client";
 
 import { App, URLOpenListenerEvent } from "@capacitor/app";
-import { Capacitor, CapacitorCookies } from "@capacitor/core";
+import { Capacitor } from "@capacitor/core";
+import { Preferences } from "@capacitor/preferences";
 import { ScreenOrientation } from "@capacitor/screen-orientation";
 import { StatusBar } from "@capacitor/status-bar";
 import { useContext, useEffect } from "react";
@@ -39,7 +40,7 @@ export default function CapacitorProvider({
 
   // Set deep linking listener
   useEffect(() => {
-    App.addListener("appUrlOpen", (event: URLOpenListenerEvent) => {
+    App.addListener("appUrlOpen", async (event: URLOpenListenerEvent) => {
       /* 
         Custom Scheme
       */
@@ -51,24 +52,30 @@ export default function CapacitorProvider({
         const token = params.get("token");
         const exp = params.get("exp");
 
-        // Navigate to the slug
+        // Set token in Preferences and refresh session.
+        // After refresh, the cookie will be set in the webview automatically.
+        // Hence, no need to set cookie manually here.
         if (token) {
-          // Set token in cookie
-          CapacitorCookies.setCookie({
-            // must match your WebView origin
-            url: window.location.origin,
+          await Preferences.set({
             key: "pulse-editor.session-token",
             value: token,
-            path: "/",
-            expires: exp ?? undefined,
-          }).then(() => {
-            editorContext?.setEditorStates((prev) => ({
-              ...prev,
-              isRefreshSession: true,
-              isSigningIn: false,
-            }));
+          });
+          if (exp) {
+            await Preferences.set({
+              key: "pulse-editor.session-expiration",
+              value: exp,
+            });
+          }
+        } else {
+          await Preferences.remove({
+            key: "pulse-editor.session-token",
           });
         }
+        editorContext?.setEditorStates((prev) => ({
+          ...prev,
+          isRefreshSession: true,
+          isSigningIn: false,
+        }));
       }
       /*       
         Google Verified Links

web/components/providers/capacitor-provider.tsx

@@ -3,6 +3,7 @@
 import { EditorContext } from "@/components/providers/editor-context-provider";
 import { Browser } from "@capacitor/browser";
 import { CapacitorCookies } from "@capacitor/core";
+import { Preferences } from "@capacitor/preferences";
 import { useContext, useEffect } from "react";
 import useSWR from "swr";
 import { PlatformEnum } from "../enums";
@@ -60,14 +61,38 @@ export function useAuth() {
   );
 
   useEffect(() => {
-    if (editorContext?.editorStates.isRefreshSession) {
-      mutate().then(() => {
+    async function refreshSession() {
+      if (editorContext?.editorStates.isRefreshSession) {
+        const token = await Preferences.get({
+          key: "pulse-editor.session-token",
+        });
+
+        /*           
+          Sometimes other hooks using useSWR are fired right after retuning from deep linking 
+          before session is refreshed (triggered by window re-focus), causing cookies to be 
+          set again between when it is removed (if removed in deep link handler) and when 
+          session is refreshed.
+
+          So a better approach is to clear cookies right here before refreshing session, but 
+          possibly after other hooks are fired.
+        */
+        if (!token.value) {
+          // CapacitorCookies.clearAllCookies();
+          CapacitorCookies.deleteCookie({
+            key: "pulse-editor.session-token",
+            url: process.env.NEXT_PUBLIC_BACKEND_URL,
+          });
+        }
+
+        await mutate();
         editorContext.setEditorStates((prev) => ({
           ...prev,
           isRefreshSession: false,
         }));
-      });
+      }
     }
+
+    refreshSession();
   }, [editorContext?.editorStates.isRefreshSession]);
 
   // Open a sign-in page if the user is not signed in.
@@ -118,11 +143,6 @@ export function useAuth() {
         process.env.NEXT_PUBLIC_BACKEND_URL + "/api/mobile",
       );
       await Browser.open({ url: url.toString() });
-
-      await CapacitorCookies.deleteCookie({
-        url: window.location.origin,
-        key: "pulse-editor.session-token",
-      });
     } else {
       const url = getAPIUrl(`/api/auth/signout`);
       url.searchParams.set("callbackUrl", window.location.href);

web/lib/hooks/use-auth.ts

@@ -1,3 +1,8 @@
+import { CapacitorHttp } from "@capacitor/core";
+import { Preferences } from "@capacitor/preferences";
+import { PlatformEnum } from "../enums";
+import { getPlatform } from "../platform-api/platform-checker";
+
 export async function fetchAPI(
   relativeUrl: string | URL,
   options?: RequestInit,
@@ -6,6 +11,59 @@ export async function fetchAPI(
   const url =
     typeof relativeUrl === "string" ? getAPIUrl(relativeUrl) : relativeUrl;
 
+  /* 
+    Use Capacitor Http plugin for native http requests.
+    The native fetch will include cookies,
+    and when response is processed by client,
+    the cookies are set in the webview automatically.
+  */
+  if (getPlatform() === PlatformEnum.Capacitor) {
+    // attach cookie manually
+    const tokenPref = await Preferences.get({
+      key: "pulse-editor.session-token",
+    });
+    const expPref = await Preferences.get({
+      key: "pulse-editor.session-expiration",
+    });
+    const token = tokenPref.value;
+    const exp = expPref.value;
+
+    const headers = new Headers(options?.headers ?? {});
+    if (token) {
+      headers.append(
+        "Cookie",
+        `pulse-editor.session-token=${token}; Path=/; Expires=${exp}; SameSite=None; Secure; ${process.env.NEXT_PUBLIC_BACKEND_URL ? "Domain=" + new URL(process.env.NEXT_PUBLIC_BACKEND_URL).hostname : ""}`,
+      );
+      options = {
+        ...options,
+        headers,
+      };
+    }
+
+    const headerObj = Object.fromEntries(headers.entries());
+
+    const nativeResponse = await CapacitorHttp.request({
+      url: url.toString(),
+      method: options?.method ?? "GET",
+      headers: headerObj,
+      data: options?.body,
+    });
+
+    console.log(
+      `${url}. \n\nRequest header: ${JSON.stringify(headerObj)} \n\nNative response: ${JSON.stringify(nativeResponse)} \n\nCookie: ${document.cookie}`,
+    );
+
+    const data = JSON.stringify(nativeResponse.data);
+
+    // Convert CapacitorHttpResponse to Fetch Response
+    const fetchResponse = new Response(data, {
+      status: nativeResponse.status,
+      headers: nativeResponse.headers,
+    });
+
+    return fetchResponse;
+  }
+
   return await fetch(url, {
     credentials: "include",
     ...options,

web/lib/pulse-editor-website/backend.ts

@@ -19,6 +19,7 @@
       "@capacitor/core": "^7.4.3",
       "@capacitor/filesystem": "7.1.4",
       "@capacitor/keyboard": "^7.0.3",
+      "@capacitor/preferences": "^7.0.2",
       "@capacitor/screen-orientation": "^7.0.2",
       "@capacitor/status-bar": "^7.0.3",
       "@capawesome/capacitor-file-picker": "^7.2.0",