Despite my efforts of trying numerous examples and methods, I am still stuck in this situation - I have been struggling with it for the past 2 days now... The issue I am facing is that my app functions properly when I log in and click on links, but if I refresh the page or directly access a URL in the browser, Firebase seems to no longer recognize the authenticated session.
Edit Upon further thought, I believe this occurs because when the page is refreshed, Vue's server makes the request. Whereas, when clicking on a link, the client initiates the request... The main difference being that no session or cookie is set or sent during the server request. Is the solution redirecting the page? Or is there a way to send the browser's cookie/session as the page loads? Alternatively, should a server-to-server authentication be established between Vue and Firebase, and then manage the logged-in state through Vue/Vuex?
This is the error message received from Firebase:
Error encountered while retrieving list of presentations! FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
Here is my current approach:
Firstly, within my store/index.js file, we decode the user data stored in a cookie and dispatch it to an action named setUserLoggedIn (Note: the same value is set twice intentionally for completeness.)
This code appears to be functioning correctly (i.e., gets executed whenever Nuxt is initialized. This step ensures that the user data from the cookie is available in our Vuex store before proceeding). It decodes the cookie and sends the expected values to setUserLoggedIn.
import { getUserFromCookie } from '@/helpers'
export const actions = {
async nuxtServerInit({ dispatch }, { req }) {
const user = getUserFromCookie(req)
console.log('This code executes first with user ' + JSON.stringify(user))
if (user) {
console.log('A user cookie was found - possibly can initiate login')
await dispatch('user/setUserLoggedIn', {
email: user.email,
uid: user.user_id,
thisUserId: user.user_id
})
}
}
}
Then, the Login Status and User details are committed back to Vuex state through two mutations, followed by confirming the user's logged-in status with Firebase:
setUserLoggedIn({ commit }, user) {
commit('LOGIN_STATUS', true)
console.log(`Re-affirming login user object is ${JSON.stringify(user)}`)
commit('LOGIN_USER', {
loginInstanceId: 'a-key-to-track-each-login-session',
userUniqueId: user.thisUserId,
emailAddress: user.email,
uid: user.thisUserId
})
return UserService.affirmLogin(user)
},
Lastly, a check was made to determine if there is an active session with Firebase (firebase.auth().currentUser returns undefined). Other attempts using different Firebase commands to monitor state changes also did not yield any results... Everything tried so far has been unsuccessful.
async affirmLogin(myUser) {
const currentUser = await firebase.auth().currentUser
console.table(currentUser)
},
A token containing the Firebase token is also set:
await firebase
.auth()
.signInWithEmailAndPassword(user.emailAddress, user.password)
.then(() => {
firebase.auth().onAuthStateChanged(user => {
currentUser = user.uid
})
})
const token = await firebase.auth().currentUser.getIdToken(true)
Cookies.set('access_token', token) // saving token in cookie for server rendering
I have tried numerous approaches - from configuring Vuex state/getters and Firebase commands, to extensively commenting out sections of the code, debugging, etc. but I cannot identify why it isn't functioning properly. Specifically, Firebase appears to disregard or cannot detect the existing session upon refresh, despite the presence of a cookie and what seems like data in the Vuex store.
However, it does work if I navigate to a page through the UI that triggers the specified route above (i.e., submitting a form button to activate affirmLogin).
I suspect that something might be off with the session, but I am unable to pinpoint the exact issue. Additionally, I am uncertain how Firebase is meant to capture the user ID upon refresh. While other examples seem to depict it effortlessly working, this hasn't been the case for me :( Any assistance would be greatly valued!
Thank you