Localhost is not found in capacitor mobile app built from angular

Please guys i need your help. I have been stuck for 2 weeks now trying to build a native mobile app from an angular project using capacitor 5. The app is building however when i start it it redirect to the Oauth server(keycloak) and redirects to the Ouath client redirect_url which I set to http://localhost/*. However it opens in with a blank screen. The message i get from logcat is

2023-10-04 07:47:29.897 1822-2210 Capacitor com.fujour.app Unable to inject Capacitor, Plugins won’t work

and this is my capacitor.config.ts

However if I change remove the allowNavigation from server section of the config, the app opens in the Chrome browser and still cant find localhost as shown

Please help out. I can provide more information if required to help


Hey @adele2014! I know what its like to be stuck on something for 2 weeks! :sweat:

To clarify, are you saying that the browser isn’t redirecting to your app after you log in (as part of the OAuth journey)? Your screenshot is of Google Chrome I believe, not your app - so I wanted to check if that is what you mean.

If that is what you mean, then you need to set up Deep Links. Deep Links | Capacitor Documentation

Try change your capacitor.config.ts


 server: {
        hostname: 'app.fujour.com',
        allowNavigation: ['*'],
        cleartext: true

And rebuild the app…

thanks for you prompt reply.
The app does redirect to http://localhost which I believe is the capacitor host for the app but with two unwanted results

  1. It opens in Chrome when allowNavigation is not set like the screenshot shown and in Logcat panel in Android studio I get this issue

  2. It shows a blank page when allowNavigation: [‘*’] and in the Logcat panel in android studio it logs the following (screen)

    and (log)

Thanks for the response. I have tried your suggestion but once i set allowNavigation:[‘*’] i get the error of
‘Unable to inject Capacitor, Plugins won’t work’. It is really painful

thank you all. I have solved the problem using GitHub - edgeflare/keycloak-angular-capacitor: Keycloak in-app browser integration in Capacitor and Angular based native apps

The KeycloakAgualrCapacitor plugin from edgeflare. It worked like charm. Thanks to the authors and contributors.