We have a mobile app (android and ios) created using Ionic 5, Capacitor 1.5 and Angular 9
If I launch an in app browser window for the user to authenticate against our CAS system - how can I make the authentication cookies from the browser window available to send with the http requests that we make to our API using the HttpClient from ‘@angular/common/http’?
I have tried setting the hostname in the capacitor.config.json file to the same domain as our CAS server and using “withCredentials” in the http api calls but it doesn’t seem to be including the authentication cookies.
I’m working with Ionic 5, React 17, and Capacitor 3.
Here’s the flow I’m trying to achieve.
User opens app.
User clicks login button, in-app browser (by Capacitor browser) opens up to a Drupal login page.
Drupal is configured to allow users to log in by registering an email address and password or signing in with their Google or Apple accounts. In all cases, Drupal returns a cookie to the in-app browser.
Somehow, I want to send that cookie back to my app from the in-app browser.
I have the steps up to #3 working.
I know Ionic now has Auth Connect, which looks great but seems to be based on OAuth, not cookies.
Here’s what I’ve tried so far:
Using an <iframe> instead of the in-app browser. This is a security issue and Google and Apple both block it.
Tried to find a solution for passing the cookie between the in-app browser and the Capacitor app. This medium post suggests it is possible in iOS, but I don’t know enough about coding in Swift to judge how hard this will be to implement.
I just added the Cordova In App Browser plugin, but accessing Google login via OpenID Connect gives me an Error 403: disallowed_useragent saying that my app does not comply with Google’s embedded webview policy. Looks like the policy changed in 2016.
Sign in with Apple does work.
It would be really awesome if Portals could do this.
EDIT: It seems like this may be possible, but I will have to dig into it. I’m a web developer, not an app developer, so it’s hard for me to estimate how much time this will take just looking at the docs.
But in my case, I don’t want to authenticate users to my app directly. I already have a Drupal server that has its own (cookie-based) authentication system. When signing in from the Drupal website, users can sign in with Google or Apple-- this already works.
So what I want to do is to use my existing infrastructure in my Ionic app.
Cookies are used to remember something in the stateless environment. An app is not stateless.
Assuming your Drupal site has a callback of some type after you login, and you are dead-set on using this approach, I’d suggest some type of event listeners within the app to find out when the URL within the app changes and the capture what the URL is at that point and parse the data.
Again, you won’t store the cookie in the app, you would use some type of local storage to remember what was returned from the Drupal callback.
In my app, Drupal keeps track of all the state. When the user logs in, they get a JSON payload that allows the local state to be cached with react-query, but Drupal is the source of truth.