react-oidc can use in-app mobile browser ? (capacitor)

[Annouar]

Hello everyone,

Hope you doing well ! Thanks for the amazing work :) I was wondering if there is any way to override the browser used by oidc-react, in order to use default browser with webapps, and in-app browser while mobile navigation.

I am currently using oidc-react alongside an Ionic/capacitor app running with react.

Any idea ? Thanks a lot ! Have a good day !

[guillaume-chervet]

Hi @Annouar , thank you for your issue, I love it!

I do not know about Ionic/capacitor, but I have an idea about what we will need to update.

[guillaume-chervet]

@Annouar , do you have a video that can explain what you need? I think i understand that it works but you want to control the browsers used to authenticate?

[guillaume-chervet]

@Annouar this issue seem to #1135

[dmitryzavyalovcl]

Hola guys, yes @guillaume-chervet you are absolutely right - I work with @ifigueroap who you helped here #1135 and we have the problem of using in-app-browser instead of default for authentication now.

After many tries I see that it is not possible with capacitor in-app-browser or web view. The only way which works for my case is to use this browser @ionic-native/in-app-browser, and in this case I have more control on it.

The only problem is that oidc-client doesn't expose the params needed to create login link to AWS (or maybe I can get those params from oidc-client but I don't know how). So when I compiled oidc-client with some changes in requests.ts to open in-app-browser it finally works.

[guillaume-chervet]

Hi @dmitryzavyalovcl ,

Thank you very much for your feedback! May you gush your code modification in a repository or somewhere in order that i can understand your needs and then include it in a clean way in this library?

[ifigueroap]

Hi @guillaume-chervet, I have some update on this issue.

After talking with @dmitryzavyalovcl and checking what the core of the issue is, I'd like to provide a summary with the hope that you can eventually release a new feature for our use case (🙏). We are also working on this with @codocedo

Our app

We are building an application that must be published as a PWA, Android, and iOS application. To this end, we opted to use Ionic framework (version 6) with React. So far, we have the application working on all 3 platforms.

Authentication in our app

We are using axa-fr/react library, and our authentication provider is Amazon Cognito. In all platforms the authentication works fine, but here comes the issue: on the mobile applications the redirection to the auth provider happens in the operating system native browser, and not in the embedded webview on which the application is being displayed. This is problematic to us from a UX point of view, in particular in iOS which gives you some cryptic and scary messages. Nevertheless, with the proper callback authentication works.

What we need/would like and why it doesn't work

We would like for the redirection to the authentication provider login screen to appear on the same webview as the application. However, we have pinpointed the issue to a call to window.location.href inside the authentication flow of this library. As the call is to the window object, the default behavior of Ionic and the Capacitor library for native integration is to open the system's default browser. @dmitryzavyalovcl has the exact location of the code, please comment here!

What we have tried.

We have tried to override/monkey patch the call to window.location and window.location.href however this is no longer possible due to security policies of modern browsers. The window object and all its properties are immutable and cannot be modified, even with prototype-manipulating code.

We have also tried to detect the hashchange event, to then perform the operation in the in-app browser, however this still opens the system browser.

Our requested feature/proposal.

It seems a hardcoded call to window.location.href does not allow the clients of this library to customize the browser behavior of the authentication flow, which is specially problematic in a situation such as ours when the pure React code is deployed inside a webview of a mobile operating system.

We believe that changing the code to window.open should work, as we can externally override this method. Another option would be to emit some sort of event, which is handled then by the caller of the library, in similar way to the loading components, and so on... with the default behavior being of just calling window.location.href.

Please let us know whether this makes sense for you, and how we can further collaborate.

Thank you for this library and all your great work

[ifigueroap]

Update, the lines we identified are:

• For login: https://github.com/AxaFrance/oidc-client/blob/8f24b119613fef5d7214826528bdb04c931a1986/packages/oidc-client/src/requests.ts#L159
• For logout: https://github.com/AxaFrance/oidc-client/blob/8f24b119613fef5d7214826528bdb04c931a1986/packages/oidc-client/src/logout.ts#L97

[guillaume-chervet]

Hi @ifigueroap , thank you very much for your awesome detail. It will help. I can abstract all window usage to another class that can be injected in the configuration. You will be able to test an implementation with window.open.

[guillaume-chervet]

hi @ifigueroap

version 7.7.0-alpha.1071 use window.open in background. May you test it?

I have started to abstract the use of all location function in this PullRequest => https://github.com/AxaFrance/oidc-client/pull/1155

[guillaume-chervet]

hi @ifigueroap , @Annouar , any news on the subject?

[ifigueroap]

Hi @guillaume-chervet, I deeply apologize for being so unresponsive. Due to the pressing time requirements, we migrated to aws-amplify library, which works fine for our use case.

Nevertheless, I can (and want to) go back to our code and try to provide a minimal working example with the changes. Perhaps during January :)

Thank you for this library and all your work.

[guillaume-chervet]

Thank you @ifigueroap for your feedback :)