Auth in PWA/Capacitor
Hey gang, I've been developing an app with Convex using Clerk auth, following the docs to set up a users table and sync on login. Everything has been awesome except that I've hit a snag when setting up PWA features.
When running the app as PWA, any time its in the background (swiping away, switching to native camera to take a photo, etc) the app suspends and then resumes, causing Clerk and Convex auth to spin through a loading state to refresh the token. This in turn causes the whole app to isLoading and the user to lose state.
Is there a way to prevent this refresh cycle? Ive dug through the docs and library code and don't see anything obvious. Thanks!
5 Replies
This seems like a PWA challenge, somewhat orthogonal to Convex? If you were just using Clerk, would you have the same issue?
Do you have any caching of state on the client in place, outside React state and the Convex client?
I imagine you'd want something like Jamie's cache library, and use
localStorage or whatever else is available for PWAs as the cache:
https://www.youtube.com/watch?v=ZgxDlSUGpfE
We hope to work on a better local-first story soon.Convex
YouTube
Can your database do this? Ep. 1: Magic caching
A Next.js app with no query cache? Jank. One with a cache? No more jank, but now we need to deal with cache invalidation and application consistency. Ugh.
But with Convex's magic query cache, Convex's powerful subscriptions are cached, not merely values. So you get the best of both words.
Repository here:
https://github.com/jamwt/cached-dmv
...
Thanks Michal! Yes I'd say part of this is Clerk and part is PWA. The vid you linked is right along the lines of my potential solutions. I think endpoint caching and maybe storing auth in a session ID instead of checking Clerk constantly is the way to go. In my experience their client lib is very overactive when refreshing which might be triggering the Convex auth adapter to update as well.
Just following up on this. Have my app running in Capacitor and it does not lose state or refresh the auth token. I think this is just an unfortunate side effect of PWA meets Clerk behavior.
Hey @prtcl - curious if you had any trouble getting Clerk to work in a native capacitor app. I'm currently using a convex + clerk + capacitor stack and it works great on web/PWA but when I try to build for native it's not working. Pretty sure it's an issue with allowed origins in Clerk but haven't found a solution.
hmm I haven't seen that exact issue only the above, although it does sound a bit familiar. seem to remember a section of the capacitor docs dealing with allowed origins and apple being picky about it
Guess I’ll have to keep digging around. Thanks for responding!