Ionic Android OpenID authentication problem

Question

I have an Ionic Angular app which I'm deploying to an Android device. I am using OpenID + KeyCloak for authentication, on the clientside I am taking care of this by using the angular-auth-oidc-client. The configuration I have set up is:

    scope: 'openid profile tino_access',
    silentRenewUrl: `${window.location.origin}/silent-renew.html`,
    responseType: 'code',
    postLogoutRedirectUri: window.location.origin,
    silentRenew: true,
    silentRenewUrl: `${window.location.origin}/silent-renew.html`,
    logLevel: LogLevel.Warn,
    postLoginRoute: window.location.origin,
    useRefreshToken: true

This works perfectly fine when deployed locally or on a custom domain on my server, however when testing on a mobile phone as an app it does not work. I notice that the value of window.location.origin is http://localhost. After successful login, a request is made in the form of ${window.location.origin}/?state='token'&code='token' , such that 'token' is the value of the token generated by the OAuth. When this request is made on the mobile device, the request http://localhost/?state=...&code=... is not recognized and the app fails to launch, I only get an error screen that the web page does not exist.

Is there any way to go around this problem? Thanks

Answer 1

Answer: Since an app's origin is http://localhost, and a local server is not running on the phone, the solution is to change the redirect_url parameter of the auth configuration to the package id of the application. Example: com.package.id://home

This will redirect you back to the app after finishing the authentication in the OAuth page