Where To Place Code To Set Firebase Auth State Persistence In Vue.js?

Overview I'm building a web app in Quasar/Vue.js and Firebase which needs to authenticate users. What I'm trying to achieve A pretty common feature - keep users logged even after t

Solution 1:

I'd do it wherever you have firebase.initializeApp(). Eg

firebase.initializeApp({
  // config goes here
});

exportconst auth = firebase.auth()

auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL)

Note that LOCAL is the default in web apps already.

You don't really need to wait for that promise. From the docs

This will return a promise that will resolve once the state finishes copying from one type of storage to the other. Calling a sign-in method after changing persistence will wait for that persistence change to complete before applying it on the new Auth state.

---

The modular version (v9+) of this would look like the following...

import { initializeApp } from"firebase/app";
import {
  browserLocalPersistence,
  getAuth, 
  setPersistence
} from"firebase/auth";

const app = initializeApp({
  // config goes here
})

exportconst auth = getAuth(app);

setPersistence(auth, browserLocalPersistence)