Can I navigate onto the web without leaving a Capacitor application?

Question

We have a web app with ADFS/GoogleId login workflow implemented with redirects. Our app redirects to an ADFS server which logs in or validates the user, then links back into our app. Is this achievable in Ionic/Capacitor? This page suggests that navigating away from your app should automatically pop in a browser, and this is the behaviour we see.

Is there some way of registering certain domains as 'part of' a Capacitor app, so we can navigate without leaving the webview? This would mean that a return url of the form 'http://localhost' (or 'capacitor://localhost' for ios) could work.

Alternatively, if the browser takes over for the adfs domain, how can I construct a link that points back into the Capacitor app?

Plante

Looks like I'm trying to do the same things as these folks, who are smarter, more determined and more experienced, and haven't succeeded yet. – Plante

Answer 1

You can allow navigation to certain urls by adding allowNavigation inside the server object on the capacitor.config.json file

"server": {
    // Capacitor to open URLs belonging to these hosts inside its WebView.
    "allowNavigation": [
      "example.org",
      "*.example.org",
      "192.0.2.1"
    ]
  }

https://capacitorjs.com/docs/config

Note that it’s not intended for use in production apps, shouldn’t be used for OAuth or any other external urls you don’t own.

Landslide

I understand we can open the website that gives the login functionality directly in Capacitor, BUT I still need to point the "callback url" somewhere in the console of my auth provider. To what can I set this callback URL in the case of a capacitor app? – Dielectric

this is answer is not 100% correct, after adding this server, ionic capacitor sync ios, removes it – Stephenstephenie

you have to edit the root capacitor.config.json. If ionic cli removes this from the root file, then it's an ionic bug and you should report it there, not say my answer is not correct – Landslide

According to documentation This is not intended for use in production. capacitorjs.com/docs/config – Crossley

Answer 2

You can open an URL in a so called in-app browser by using the Browser API (@capacitor/browser plugin):

• Capacitor 2: https://capacitorjs.com/docs/apis/browser
• Capacitor 3 (soon to be released): https://capacitorjs.com/docs/v3/apis/browser

On Android this opens a Chrome WebView, on iOS a SFSafariViewController, so the user never leaves the app really, it's an additional Activity (or ViewController) that will be on top of the app's navigation stack.

It says in the description of the plugin:

The Browser API makes it easy to open an in-app browser session to show external web content, handle authentication flows, and more.

You can add listeners to listen for page load events as well.

Disentitle