Route back from in App Browser into my ionic app

by

I have a problem with my Ionic app that I’m developing using Angular. I am developing a banking app. I’ve imported a component that I’m using in this app. When I click on a button associated with this component, I’m redirected to a login page in the InAppBrowser of the app (I’ve allowed these page on a whitelist for navigation in the capacitor.config.ts file (allowNavigation)). After logging in there, I’m supposed to be redirected back to my app. However, it’s trying to open the URL (which is constructed by combining the android-scheme and hostname) as a website (so it’s attempting to access http://my-app/homepage (this is also my url for my first app page) as a website). This website doesn’t exist, and I’m getting an “ERR_NAME_NOT_RESOLVED” error message. How can I make it so that after logging in, I’m redirected back into my app directly from the InAppBrowser instead of trying to open a website with this URL?

I have already tried to intercept the URLs that are opened in the InAppBrowser to manually redirect back to my homepage within my app’s code. Unfortunately, the listeners couldn’t detect any actions. like this example here

import { App } from '@capacitor/app';
App.addListener('appUrlOpen', data => {
    console.log('App opened with URL:', data);
    //Check if url is opened then navigate back to homepage 
});

Your problem seems to be related to the setting of deep linking in Capacitor
For this to work in android, you have to :

  • Create a Site Association File and host it in your website, in the src/.well-known directory
  • Add an intent filter in your android app

Another good link : Handling Android App Links

Hope it helps

Leave a Comment