[Vuejs]-Vue 3 PWA and Firebase offline authentication

0👍

Use firebase onAuthStateChanged listener and save the value in your store.

onAuthStateChanged(auth, () => {
  const store = useStore();
  store.setUser(auth);
});

Whenever the user’s auth state changes it will update the store accordingly.
You can then leverage Vue reactivity to update the UI accordingly.

As far as the PWA aspect – you will need to be online to load the app initially, of course. Once the app is loaded and the user auth is saved in the store it is no problem if the app goes into the background and is offline. You will be able to open the app and use it just the same as if you never left the app, providing the time elapsed is short enough. My experience is that after about 6 hours give or take it will require full reload and you will need to be online at that point. This is based on my experience. Hope it helps!

0👍

Same as Firestore the Authentication has its own function to turn on persistence.

import { getAuth, setPersistence, signInWithEmailAndPassword, browserSessionPersistence } from "firebase/auth";

const auth = getAuth();
setPersistence(auth, browserSessionPersistence)
  .then(() => {
    // Existing and future Auth states are now persisted in the current
    // session only. Closing the window would clear any existing state even
    // if a user forgets to sign out.
    // ...
    // New sign-in will be persisted with session persistence.
    return signInWithEmailAndPassword(auth, email, password);
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });

More in doc

Leave a comment