Mobile App > Bootstrap5 + Capacitor > iOS loggin process doesn't work

Hello everybody,
I really need help with iOS emulated mobile App (Bootstrap5 + Capacitor).
My app works with Browser and Android.

I decided to build a new test app with Bootstrap5 + Capacitor to test my login process with iOS.
The Test app includes an index.html page (view) + a home.html page

The home.html page contains 3 containers:
1- a login form
2- a display container (displayind user_id / name)
3- a log-out button

(I previously used a redirect to login/home based on id… with the same failed result for iOS)

I displayed 1rst or 2nd container when user is logged-in or not.

Browser works perfectly:

  • on login my current user is correctly loaded
  • the infos container is displayed

Android emulating:
same. works perfectly.

iOS emulating:
my login SC returns a 200 http code
my user_info SC returns 500




Is there a specific thing to do/know about emulating/testing on iOS?
What am I doing wrong?
Should I get the App Dev signed Cert before testing?

I’m getting crazy…
Thanks for your help.

Hi,
Help 'ld be very appreciated.
I’m stuck with it.

Any idea?
Help 'ld be appreciated…
Thanks

Well error 500 is a general server side error description. To see the real error you have to enable debugging and then check the details.

See:

Capacitor doesn’t store login cookies on ios

Yes it does

I have just come across this to. Is it only on ios 14 and above?

https://capacitorjs.com/docs/apis/cookies mentions the issue here.

Then there seem to be a solution here.
https://github.com/ionic-team/capacitor/issues/5946 not tried it yet though but looks like add http plugin and cookie plugin may help.

Looks like another thread about it here but over my head https://github.com/ionic-team/capacitor/issues/1373#issuecomment-991251441

@Adetoyinbo1 have you found a work around?

I haven’t found a workaround yet. Setting the wkAppBoundDomains does not make a difference either @jmartland22

Hi,
Thanks for your answer.
Just added both:

"CapacitorCookies": {
  "enabled": true
}

in capacitor.config.json

and

<key>WKAppBoundDomains</key><array><string>www.giloo.me</string><string>v2.giloo.me</string><string>https://www.giloo.me</string><string>https://v2.giloo.me</string></array>

in info.plist

My login SC still returns 200 for the form user_ID SC

My get_user_infos SC (loaded on success) returns 304
I made different versions trying to query {{identity}} {{cookie}}

(Everything works with Android.)
Don’t know what to do…

same…

@sylvainbaron @jmartland22 what i suggested for now is to store login identity in the local store, so it can be retrieved from there.

How do you do that?
Thanks

The login action returns the identity result. Add local storage in your index.html page, then add a variable that will store the user id, then on login success set the local store variable to the loginform.data.identity

Note the .identity is not shown, you have to append it manually

1 Like

I just built a quick capacitor app from scratch and adding this to capacitor.config.json made possible in ios sim for a server connect to properly return the identity after an earlier login:

  "server": {
    "hostname": "your-server-domain"
  }

Have to run now, but can try on device a bit later.

2 Likes

i havent tried this though but it looks like it might solve the problem. They recommend it to keep it as localhost in their documentation because other web apis depends on it, i think thats why cookies are set when testing on local server for ios but on remote server it doesn’t work

   server?: {
    /**
     * Configure the local hostname of the device.
     *
     * It is recommended to keep this as `localhost` as it allows the use of
     * Web APIs that would otherwise require a [secure
     * context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts)
     * such as
     * [`navigator.geolocation`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation)
     * and
     * [`MediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia).
     *
     * @since 1.0.0
     * @default localhost
     */
    hostname?: string;

Just tried this but it won’t let me load any server connect actions with the this setting. Is there anything else you need to do after this or literally just add it and run?

Hi,
I was working on these workaround for iOS login and did a MacOS update. Since I can’t access my debug console both with Chrome inspector for Android Mobile App version and Safari for the iOS app version.

Does anybody know how to re-activate? Very complicated to test devs without the debug console.

I’ve got the same issue now. Did you get it sorted? Looks like apple now block this by default.

Looks like there is a way around it but I can’t get it to work.

You got anywhere with cookies on ios?

Hi,
I was working on backend web part of the project these last days. But still can’t open both inspector with Chrome neither Safari… (and this is a big issue to achieve my devs with mobile phone).
I did not succeed with cookie on iOS. I planned trying @Adetoyinbo1 solution this afternoon. I have some bugs to fix before.

@sylvainbaron @jmartland22
for ios debug issue. add ios 16.2 simulator in XCODE > SETTINGS > PLATFORMS

ios 16.4 has issues

For ios login cookie issue include

            "ios": {
            "limitsNavigationsToAppBoundDomains": true
          },"server": {
            "hostname": "your-server-domain",
"iosScheme": "https",
    "androidScheme": "https"
          }

in your capacitor.config.json
and also include

    <key>WKAppBoundDomains</key>
<array>
  <string>www.mydomain.com</string>
  <string>api.mydomain.com</string>
  <string>www.myothercooldomain.com</string>
</array>

in your info.plist . Hope that help

1 Like