How to logout app and clear data?

[CrawfordW]

Building a complex app with pinia stores. When user logs out, I'd like to clear all data and show the login page again.
Is there an easy way to clear the data?
Currently I'm using router to go to the login page, but the app is still running with all the previous data. I need to initialize it.
So I'm just calling location.reload(), but seems kinda brute force!

[joaoluizmagalhaes]

How are you storing the user data?

in the function you logout the user, you need to clear all data related to that.

If you could share parts of your code, we could give more explanation.

[CrawfordW]

I have 11 pinia stores holding lots of user data which should all be purged from memory. If I just logout the user from firebase and use router to go back to the login page, the next person to log in gets all the same data.
Reloading the page on logout does the trick, but then I see the login page briefly before it refreshes, and then see it again. Just like to avoid that.

[joaoluizmagalhaes]

ah, ok, so you are using Firebase.

I've a project using firebase as well, I'm only using email login, but I think this is an idea.

I'm using compostion API and script setup:

import { auth } from '../firebase'
import { signOut } from "@firebase/auth";

function logout() {

  $q.loading.show()

  signOut(auth).then(() => {

    store.user= null
    store.userType = null
    store.table = {
      id: '',
      open: false,
      orders: [],
      timeStamp: null
    }

    $q.loading.hide()

    $q.notify({
        message: 'Logout feito com sucesso!',
        color: 'teal',
        position: 'center',
        timeout: 1000
      })

    router.push({ path: '/login'})

  }).catch((error) => {
    $q.notify({
        message: 'Algo deu errado, tente novamente mais tarde!',
        color: 'warning',
        position: 'center',
        timeout: 1000
      })
  })
}

[CrawfordW]

OK thanks for the suggestion.

[yusufkandemir]

You can manipulate the whole state of a store, or even the whole application(all of the stores):
https://pinia.vuejs.org/core-concepts/state.html#Replacing-the-state
The pinia part in pinia.state.value = {} is the store parameter in boot files, the router file, etc. If you need it in a different context, then calling getActivePinia() might work. If your stores require certain default values, then you might need to use a different value than just {}.

As an alternative solution, you can go the obvious but maybe not-so-scalable way. You can implement a reset action in all your stores that need a reset. Implement the action in a way that it reverts the state to its default. Then, call the reset action of each store in the logout action.

[CrawfordW]

Great. Thanks for the suggestions.

[CrawfordW]

This works great:
In my MainStore.js file:

import { defineStore, getActivePinia } from 'pinia'
...
async storeLogout () { // Called from logout button, or onAuthStateChanged in boot file
      if (this.userInfo) { // Force logout
          try {
              await signOut(auth)
              console.log('MainStore logged out')
              const loggedOut = httpsCallable(getFunctions(), 'auth-loggedOut')
              await loggedOut()
          } catch(error) {
              console.log('An error occurred: ' + error.code + ' ' + error.message)
          }
      }
      getActivePinia()._s.forEach(store => {
           store.$reset()
      })
 },

[stevro]

Just a heads-up for others which will encounter the same problem, if you also use the local storage to persist user related data, call localStorage.clear() before resetting the store.

And don't override the $reset method on you store, unless you use "setup stores". This one gave me some headache as I didn't pay attention to the docs to understand the differences.

[....]
localStorage.clear()
getActivePinia()._s.forEach(store => {
           store.$reset()
      })
[....]