vue-supabase-tpa-demo VS pinia-plugin-persistedstate

Below is the relevant code (I modeled auth from this repo but it uses supabase v1) :

Posting in case this helps someone else down the road... found this fantastic repo implementing and fixing exactly what I needed. Setting it up in this way perfectly fixed the issue I was running in to!

If you use a standard Pinia store, you can use plug-ins. For example, you can use pinia-plugin-persistedstate to let the user start each new session where they left off. Or you can use pinia-orm to simplify handling large amounts of tabular data.

How about this plugin, then?: https://github.com/prazdevs/pinia-plugin-persistedstate.

When your application starts, fill your Pinia/Vuex store with data from the user's previous session. This is done automatically by pinia-plugin-persistedstate or the Vuex equivalent.

pinia-plugin-persistedstate: keeps your Pinia store synced with the user's browser localStorage. In other words, if your user closes their browser and then returns to your Vue app later, they will have the same state as when they left.

You also mentioned that the positions should be stored in localStorage. I would store the positions in Pinia, and then add the pinia-plugin-persistedstate plug-in. It's one import statement and one line of code to add that plugin, and then your Pinia state is automatically persisted in localStorage. It beats having to write and troubleshoot the storage logic yourself.

I've used the pinia-plugin-persistedstate package and has worked fine for me.

I have a Vue 3 / TypeScript app that uses a combination of Firebase, Pinia, Vue Concurrency, and the Pinia Persisted State Plugin.