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: 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