Open in-app browser to log in, get a cookie, and use the cookie in the app

Viewed 658

I have a Capacitor Ionic React app (PWA/iOS/Android), and I have been using the http plugin to log in to a Drupal 9 backend.

Recently, I added "Sign in with Apple" and "Log in with Google" support to Drupal 9 via Drupal's OpenID Connect module.

This is how the login flow works in Drupal:

  1. Go to Drupal login page.
  2. Click "Log in with Google."
  3. Log in with your Google account.
  4. Get redirected back to Drupal.
  5. Drupal provides a session cookie for the logged-in Google account.

I want to use this same flow in Ionic/Capacitor.

So, I added the Capacitor browser plugin, and used this plugin to create an in-app browser that goes to my login page.

Now, in my apps, I can use the in-app browser to log in to my Drupal site via Google and Apple. However, the session cookie is in the in-app browser, and when I close the in-app browser, my Capacitor app does not have access to the in-app browser session cookie.

Is there a way to get access to in-app browser cookies from the native app that launched the in-app browser?

This post in the capacitor forums suggests that it might not be possible, but I want to confirm: is there any way to use an in-app browser to log in to a website, get a session cookie, and then use that session cookie in a Capacitor / Ionic app?

1 Answers

What you're trying to achieve probably won't work. Using iOS as an example, the Capacitor Browser plugin uses SFSafariViewController under the hood. SFSafariViewController is essentially a Safari process, running outside of your app. So your app won't have access to the cookies used by the SFSafariViewController, just as your app has no access to the cookies in Safari.

Related