Localhost is not found in capacitor mobile app built from angular

Capacitor
1

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

image
image1143×966 56.9 KB

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
image
image616×1146 55.8 KB

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

Thanks

2

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

3

Try change your capacitor.config.ts

to

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

And rebuild the app…

4

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

    image
    image3600×186 56.2 KB

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

    image
    image901×1393 62.5 KB

    and (log)
    image
    image2448×157 32.4 KB

5

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

6

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.