Cookie-based authentication for iOS for Ionic React / Capacitor

Hello all,

This question is about making cookie-based authentication work for our Ionic app running on iOS native platforms. I’ve searched and read several forum posts on this topic and tried the suggestions provided in there but none seem to work. Below is a summary of our setup and the things we tried to solve it. Any help, insights, etc. is highly appreciated! I apologize beforehand if I missed a solution from another forum post :slight_smile:

We are using Ionic React 5.2.3 with Capacitor 2.2.1 to build an app for the following target platforms: Web, iOS native and Android native.

The app gets the data from our API backend that we invoke using Axios. The backend requires authentication based on server-side cookies. After successful login, the server returns a SetCookie header in the response with the client’s session id. This single cookie is stored in the client and in subsequent calls to the backend the cookie with the client’s session id is passed. The backend retrieves the associated client data from a session store based on the session id, and can verify the user is authenticated.

  • For Web this is working ok. The SetCookie directive is configured as HttpOnly, Secure and SameSite=strict since the client origin has the same domain.
  • For Android native, the origin of the client is http://localhost (see https://ionicframework.com/docs/troubleshooting/cors). After setting SameSite on the backend to None (while we keep Secure and HttpOnly), all still works. The SetCookie directive in the responsive of a successful login is processed and subsequent calls to the backend include the cookie with the session id.
  • For iOS native, this approach doesn’t seem to work since WKWebView ignores the SetCookie directive: the cookie isn’t stored and subsequent calls to the backend APIs won’t include the cookie with the session id causing the calls to fail.

I’ve read various forum posts and tried the suggestions/solutions provided there, although none seem to make it work on iOS native:

  • Setting the server.host parameter in capacitor.config.json to the same domain as the backend API so the cookie isn’t regarded as 3rd party cookie and SameSite can be set to strict. We rather don’t use this approach due to the drawbacks mentioned in https://capacitorjs.com/docs/reference/config. Also, when setting this parameter to an external URL (i.e. same domain as the domain on which the backend API runs), after opening the app, iOS will automatically open a browser window and browse to that URL instead of just opening the app.
  • Using the plugin for native HTTP (https://github.com/capacitor-community/http). This plugin is mentioned in various threads to prevent cross-site issues from native apps by using native HTTP calls instead of executing HTTP calls from the WKWebView layer. This plugin also has some APIs to manage cookies. When we swap Axios for this library, we can successfully execute HTTPS calls to the backend. However, the SetCookies directive in the response of a successful login call is ignored, and no cookie (with the session id) is stored in the client. For Axios, we include the withCredentials directive. It looks like there is no such option in the native HTTP library? I can use the various available cookie APIs from the plugin (e.g. setCookie, getCookie) but those seem to be for managing client-side cookies, not for making the SetCookie directive to store a cookie from the response.
  • Configuring WKWebView to accept SetCookie directives (with Secure, HttpOnly and SameSite set to none). I haven’t delved into this option very deeply, but what I read in various posts is that this depends very much on the iOS version whether this is even possible. So it doesn’t seem to be a viable way.

We want to go to the Appstore as soon as possible and this completely blocking our progress. Any help is greatly appreciated.

Ronald

A quick update from my side.

I was under the impression that the plugin for native HTTP (https://github.com/capacitor-community/http) didn’t achieve the result I was looking for since the Developer Tools in Safari didn’t show any cookie set. However it turns out that when using the native HTTP plugin, the SetCookie directive causes the cookie to be created and stored, and sent by iOS in subsequent requests to the backend. So using the native HTTP plugin solves the issue we ran into.

We ran into some other issues when trying to use the HTTP plugin for web (non-native) calls, e.g. when trying to pass some security related info to the backend. What we do now is to use Axios for non-native HTTP calls and the HTTP plugin for the same backend calls, but then from native iOS platforms.

Ronald

2 Likes

Glad you were able to figure it out. We are going to be putting more work into that plugin so please let us know where we can improve by filing an issue. Tell them I sent you :slight_smile: