Problem with Ionic Angular OIDC client authentication

Question

I have an ionic application which I'm developing and deploying on an android device. I'm using angular-auth-oidc-client for user authentication in the app. This is the configuration I have: Note: The sts server and clientId are omitted for the sake of brevity and they are not relevant.

        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,

I know for sure everything is set up properly because when accessing my mobile app on a web page everything works fine and the authentication goes through properly. However, when deploying on a mobile device (origin is localhost), after accessing the Keycloak login page and entering the login credentials correctly, there is a request made to the STS server which verifies the tokens. I need this to be sent out to the server, but I want my app to function on the localhost domain. If I set the redirectUrl correctly as the server, then it works but the app is no longer the local app, it is only a mirror of the webpage.

I can see this is some mechanism for storing and checking session tokens, but it's clear why it wouldn't work on a mobile device. Does anyone know of a possible solution/workaround?

Thanks

Answer 1

There are differences between web and mobile OAuth, summarized below:

• Web UI logins use the same type of browser window on which normal views are rendered, using a HTTPS callback URL
• Mobile app logins use a form of the system browser to trigger sign in, and often a Custom URL scheme is used to receive the response

Some tech stacks attempt to use the same solution for web and mobile. This might work in terms of rendering but it will not work in terms of OAuth. Instead, for a mobile app you need to follow the OAuth for Native apps guidance.

The mobile solution is usually called the AppAuth pattern. To get started with it on Android, maybe start with my Android AppAuth Sample Page .