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?

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://capacitor.ionicframework.com/docs/basics/configuring-your-app

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.