Integration with Capacitor

[Saveriu]

Hi!
I' trying to use this lib with Capacitor, any idea of how to override the popup open event for authentication?
I want to use the Capacitor Browser plugin instead of window.open.

Thanks!

[Badisi]

You should be able to do it with your own Navigator implementation.
You can have a look at PopupNavigator and UserManager.signinPopup to see how it's done for the popup mode.

You can also have a look at BrowserTabNavigator and BrowserTab, which is how I was doing it with the previous oidc-client-js library. Unfortunately I had no time to migrate it to oidc-client-ts yet but should be able to do it next week if you wishes to use my library 😉

UPDATE: see my answer here to see how this could actually be done

[Saveriu]

Thanks for your reply!
In fact, for now, I'm using oidc-client-js because I'm using the vuex-oidc wrapper for 3 of my apps.
Now I know that it will no longer be maintenained, I will certainly switch for another lib and do the wrapper myself.
I could use your lib for that!
I will check your code thanks again! Do you have be able to do the redirecting from the dialog to the app with a custom scheme?

[Badisi]

Yes, code for the custom url scheme callback is: here

[Saveriu]

Hi again!
I'm developping a Capacitor App that requires silentRefresh and multi autority servers (the app can have multiple OidcClient).
I'm facing the choice of using your lib or ionic-appauth.
Ionic appauth doesn't provide silentRefresh and I needed to complete the gap. I also have some issue to check if the user is really authenticated (ie: a expired access token in the store is considered ok :/)
For a long time I used oidc-client.js so I think it will be more faisable to use yours.
For that, I'm developping a custom Navigator with @capacitor/browser and StateStorage with @capacitor/storage.
I could provide you my code if you want to integrate Capacitor capabilities when I'm done.

[pamapa]

It would be very nice for others to see how this feature can be implemented.

[Saveriu]

I'm reading the code right now and I see that the Navigator implementation is fixed inside the UserManager constructor.
I will have to create a new CapacitorUserManager to be able to customize the Navigator.
I will be not really clean but it can be a starting point.

[WillooWisp]

@Saveriu did you manage to get this working using Capacitor on Android and iOS? If so, any sample would be much appreciated.

[Saveriu]

@WillooWisp , I didn't have much time lately but when I'm done I will send you the sample!

[danielrie]

@Saveriu May you send me the sample, too? I am also struggling to get capacitor working with this lib.

[Saveriu]

Hi, for my project, I switched for ionic-appauth. The issue that I mentionned earlier have been fixed.
But I will try to do it with this lib when I have some time!

[Badisi]

For anyone interested, I've finally managed to find time to do it 🎉

If you are looking for a sample : I had to extend the UserManager class to add mobile capabilities and implement a custom Navigator, Window and Storage class.

---

If you are looking for a ready to use solution : my library is made to work with a single implementation for both desktop and mobile (Cordova or Capacitor) and actually support VanillaJS and Angular projects. Feel free to test it or to ask questions (as the documentation is yet to be written).

[Saveriu]

Nice! I didn't have time to do it myself, thank you!

[Annouar]

Hey @Badisi,

Nice work here :)
I was wondering if we could make a PR to accept a custom handle to oidc-client-ts login/logout functions. I don't know if it is a better idea than create a new class that extends UserManager and create methods for mobile the use the exact same logic, but with a custom IWindow object.

What do you think about it ?

[ArthurTimofey]

@Badisi <3

Thanks mate, I was able to implement our own auth flow for the mobile using your code as inspiration.

Gods speed friend.

[Canuckaholic]

From digging into the source code it looks like a custom redirectNavigator (instance of RedirectNavigator class) can be passed in when creating a new UserManager. In this custom redirectNavigator you can use Capacitor's Browser.open({ url }); instead of the default window.location. Is this not encouraged though (since it's not documented anywhere that I could see)? Any reason to not expose the RedirectNavigator class?