Auth0-spa-js: Include options for custom cache mechanism

[Danwakeem]

Describe the problem you'd like to have solved

I am trying to use auth0/auth0-react in my ionic application that uses capacitor and the current caching methods are not ideal in an ionic app. I found that this is the downstream package that the react library works off of so here I am 😄

Describe the ideal solution

I would like to be able to supply my own caching class so that I can have more control over where the cached data is set.

Alternatives and current work-arounds

I have considered following the steps in this tutorial by auth0 but it would require me to switch from using capacitor to straight cordova which I would like to avoid.

I did quite a bit of googling but didn't find anyone that had seemed to solve this problem.

Additional context

The reason I want to add my own caching mechanism is so that I can create a caching class that supports the Storage API supplied by capacitor so that my token/refresh token info can be longer lived in an ionic/capacitor environment.

I have a working version of this custom cache option in a forked branch. When I plugged this into the react library it seems to work fine. Maybe I could get some thoughts on this approach and let me know if you think it would be a worth while pursuit 😎

[frederikprijck]

@Danwakeem ,

Thanks for reporting, I will take this internally to have a conversation about steps to support capacitor.
It is very helpful that you linked your fork, have you verified this allows you to succesfully use @auth0-react in Ionic using Capacitor?

Thanks

[Danwakeem]

@frederikprijck Yes I forked that repo as well and then switched the dependency to the branch I listed above.

I also created a gist for the custom cache I was testing with in my ionic/capacitor app incase that is helpful but for the most part I just ripped what was happing with the LocalStorageCache.

I also recognize that this is kind of a different use case for this library so I appreciate you taking a look 😎

[frederikprijck]

@Danwakeem Thanks for the info. Something else I wanted to ask, are you using loginWithRedirect or loginWithPopup?

[Danwakeem]

@frederikprijck No problem!

I have my app deployed as a PWA as well as deployed to the app store so I am using loginWithRedirect. I have a universal app links set up so when they click the login button in the iOS app it pops them out to the browser they login to the auth0 page then the callback url drops them back into the iOS app.

[Danwakeem]

Well that is the plan anyway. I am still working out the implementation details so I am not 100% sure loginWithRedirect will work yet 😄

[weyert]

Wouldn't you still have issues with browser-tabs-lock when trying this approach? That's uses localStorage

[frederikprijck]

@weyert Unless I am mistaken, Ionic allows you to use localStorage. However, the OS can/will clean up localStorage when it needs to. So it is not recommended. Browser-tabs-lock only uses localstorage to store something for a matter of seconds, not to persist for days.

Therefor I think it might be fine, but I would need to verify that.

[Danwakeem]

Wouldn't you still have issues with browser-tabs-lock when trying this approach? That's uses localStorage

If we have the option of using the Storage API supplied by capacitor that will target either local storage for browsers, UserDefaults for iOS, and SharedPreferences for Android.

The goal for my app is to deploy it as an app through the respective app stores as well as a website. So if users choose to use the browser app then that might have the issue you describe but if they choose to download it as an app then they would not have this issue.

[dsuttonpreece]

@Danwakeem have you been able to get this working? Trying to do exactly the same thing :)

[frederikprijck]

Hey everyone, just a heads up that we are looking into this. No ETA yet, as we will need to make some changes in the SPA-JS SDK and, potentially, also in the wrapping Angular and React SDKs.

But it's on our radar and are hoping to get support for Ionic soon.

[Danwakeem]

Thanks @frederikprijck 🙌

Yes kind of @dsuttonpreece. I have a super hacked version of this in a branch out there that I have been using in the meantime. But waiting for the official thing is probably for the best TBH 😉