PWA-3569:IOS PWA-Webapp user login support (#4588)

Co-authored-by: Bharathidasan Elangovan <del22123@adobe.com>

Author: del15881

packages/peregrine/lib/Apollo/links/authLink.js

@@ -1,14 +1,28 @@
 import { setContext } from '@apollo/client/link/context';
-import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import {
+    BrowserPersistence,
+    getTokenFromCookie,
+    shouldPreferCookies
+} from '@magento/peregrine/lib/util';
 
 const storage = new BrowserPersistence();
 
 export default function createAuthLink() {
     return setContext((_, { headers }) => {
-        // get the authentication token from local storage if it exists.
-        const token = storage.getItem('signin_token');
+        let token = null;
 
-        // return the headers to the context so httpLink can read them
+        // In standalone PWA mode (e.g., iOS home screen app), prefer cookies
+        // because localStorage is not shared between browser and PWA
+        if (shouldPreferCookies()) {
+            token = getTokenFromCookie();
+        }
+
+        // Fallback to localStorage (existing behavior)
+        if (!token) {
+            token = storage.getItem('signin_token');
+        }
+
+        // Return the headers to the context so httpLink can read them
         return {
             headers: {
                 ...headers,

packages/peregrine/lib/Apollo/links/index.js

@@ -28,7 +28,14 @@ export const customFetchToShrinkQuery = (uri, options) => {
 
     const resource = options.method === 'GET' ? shrinkQuery(uri) : uri;
 
-    return globalThis.fetch(resource, options);
+    // Include credentials to enable cookie-based authentication
+    // This allows session sharing between browser and PWA on iOS
+    const optionsWithCredentials = {
+        ...options,
+        credentials: 'include'
+    };
+
+    return globalThis.fetch(resource, optionsWithCredentials);
 };
 
 const getLinks = apiBase => {

packages/peregrine/lib/context/user.js

@@ -5,6 +5,7 @@ import actions from '../store/actions/user/actions';
 import * as asyncActions from '../store/actions/user/asyncActions';
 import bindActionCreators from '../util/bindActionCreators';
 import BrowserPersistence from '../util/simplePersistence';
+import { getTokenFromCookie, shouldPreferCookies } from '../util/cookieHelper';
 
 const UserContext = createContext();
 
@@ -25,20 +26,35 @@ const UserContextProvider = props => {
     ]);
 
     useEffect(() => {
-        // check if the user's token is not expired
+        // Check for authentication tokens (localStorage or cookie)
         const storage = new BrowserPersistence();
-        const item = storage.getRawItem('signin_token');
+        let hasValidToken = false;
 
+        // First, check localStorage token (existing behavior)
+        const item = storage.getRawItem('signin_token');
         if (item) {
             const { ttl, timeStored } = JSON.parse(item);
             const now = Date.now();
 
-            // if the token's TTYL has expired, we need to sign out
+            // if the token's TTL has expired, we need to sign out
             if (ttl && now - timeStored > ttl * 1000) {
                 asyncActions.signOut();
+                return;
+            }
+            hasValidToken = true;
+        }
+
+        // Check for cookie token (for PWA session sharing)
+        // If we're in standalone PWA mode and have a cookie token but no localStorage token
+        if (!hasValidToken && shouldPreferCookies()) {
+            const cookieToken = getTokenFromCookie();
+            if (cookieToken && userState && !userState.isSignedIn) {
+                // Set the token in Redux so the app knows user is authenticated
+                actions.setToken(cookieToken);
+                hasValidToken = true;
             }
         }
-    }, [asyncActions]);
+    }, [asyncActions, actions, userState]);
 
     return (
         <UserContext.Provider value={contextValue}>

packages/peregrine/lib/store/actions/user/asyncActions.js

@@ -86,6 +86,21 @@ export const clearToken = () =>
         // Clear token from local storage
         storage.removeItem('signin_token');
 
+        // Clear cookie for session sharing
+        if (
+            typeof document !== 'undefined' &&
+            typeof globalThis.location !== 'undefined'
+        ) {
+            try {
+                const hostname = globalThis.location.hostname;
+                // Clear with explicit domain (iOS compatibility)
+                document.cookie = `customer_token=; path=/; domain=${hostname}; max-age=0; secure; samesite=none`;
+                document.cookie = `customer_token=; path=/; domain=${hostname}; max-age=0; secure`;
+            } catch (error) {
+                // Silently fail if cookies are not available
+            }
+        }
+
         // Remove from store
         dispatch(actions.clearToken());
     };

packages/peregrine/lib/talons/SignIn/useSignIn.js

@@ -122,16 +122,41 @@ export const useSignIn = props => {
                 });
 
                 const token = signInResponse.data.generateCustomerToken.token;
+                await (customerAccessTokenLifetime
+                    ? setToken(token, customerAccessTokenLifetime)
+                    : setToken(token));
+
+                // Set cookie for iOS PWA session sharing
+                // This enables authentication to persist when user adds web app to home screen
+                if (
+                    typeof document !== 'undefined' &&
+                    typeof window !== 'undefined'
+                ) {
+                    try {
+                        const maxAge = customerAccessTokenLifetime
+                            ? customerAccessTokenLifetime * 3600
+                            : 3600;
+
+                        const hostname = window.location.hostname;
+
+                        // Set multiple cookie variations for iOS compatibility
+                        // iOS has quirks with SameSite=None on some versions
+                        // Primary: With explicit domain and SameSite=None (iOS 13+)
+                        document.cookie = `customer_token=${token}; path=/; domain=${hostname}; max-age=${maxAge}; secure; samesite=none`;
+
+                        // Fallback: Without SameSite (for older iOS versions)
+                        document.cookie = `customer_token=${token}; path=/; domain=${hostname}; max-age=${maxAge}; secure`;
+                    } catch (error) {
+                        // Silently fail if cookies are blocked
+                        // Authentication will still work via localStorage
+                    }
+                }
 
                 // Clear all cart/customer data from cache and redux.
                 await apolloClient.clearCacheData(apolloClient, 'cart');
                 await apolloClient.clearCacheData(apolloClient, 'customer');
                 await removeCart();
 
-                await (customerAccessTokenLifetime
-                    ? setToken(token, customerAccessTokenLifetime)
-                    : setToken(token));
-
                 // Create and get the customer's cart id.
                 await createCart({
                     fetchCartId