Upon page reload in Nuxt.js middleware, Firebase authentication is returning as null

Question

Upon page reload in Nuxt.js middleware, Firebase authentication is returning as null

Just started with nuxtjs and using the Nuxt firebase library for firebase integration. After a successful login, I'm redirecting the user to the "/member/desk" route. However, if I refresh the page on that particular route, it redirects me back to "/auth/signin". This happens because in the "middleware/auth.js" file, I am not receiving the value of app.$fire.auth.currentUser as null.

I tried searching online for a solution but couldn't find any reliable information. Any help would be appreciated.

Here are the relevant sections of my files:

nuxt.config.js

[
    '@nuxtjs/firebase',
    {
        config: {
            apiKey: "",
            authDomain: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: "",
            measurementId: ""
        },
        services: {
            auth: {
            persistence: 'local', // default
            initialize: {
                onAuthStateChangedAction: 'onAuthStateChangedAction',
                subscribeManually: false
            },
            ssr: false
            }
        }
    }
]

store/index.js

// Code for store/index.js goes here...

middleware/auth.js

// Code for middleware/auth.js goes here...

pages/index.js

// Code for pages/index.js goes here...

https://i.sstatic.net/aGAgG.png

--- UPDATE ---

Recently implemented "Firebase Auth with SSR" and was able to partially resolve the issue. Now, when I refresh normally on the "/member/desk" route, it works fine (stays on the same page). However, when I do a HARD RELOAD, it redirects to the "/auth/signin" route.

I suspect it has something to do with the implementation of the Service Worker. On HARD RELOAD, all cached data is cleared and the Service Worker restarts.

If anyone can provide some clarity on this, it would be greatly appreciated!

javascript vue.js firebase-authentication nuxt.js

Answer 1

Answer №1

The firebase authentication documentation states that the currentUser property can be null if the auth object has not finished initializing. In this case, using an observer to monitor the user's login status will handle this scenario automatically.

This means that if your middleware is triggered before the auth.onStateChanged event has completed, the app.$fire.auth.currentUser will initially be null.

It is recommended to modify your middleware to utilize the user data stored in your Vuex store instead.

export default function ({ store, app, route, redirect }) {
    const user = store.state.user;
    if (route.path === '/') {
        // Keep them on the sign-in page
    } else if (route.path !== '/auth/signin') {
        // We are accessing a protected route
        if (!user) {
            // Redirect to sign-in page
            return redirect('/auth/signin')
            // return redirect('/auth/signout')
        }
    } else if (route.path === '/auth/signin') {
        if (!user) {
            // Show the sign-in page
        } else {
            return redirect('/')
        }
    }
}

Answer 2

The firebase authentication documentation states that the currentUser property can be null if the auth object has not finished initializing. In this case, using an observer to monitor the user's login status will handle this scenario automatically.

This means that if your middleware is triggered before the auth.onStateChanged event has completed, the app.$fire.auth.currentUser will initially be null.

It is recommended to modify your middleware to utilize the user data stored in your Vuex store instead.

export default function ({ store, app, route, redirect }) {
    const user = store.state.user;
    if (route.path === '/') {
        // Keep them on the sign-in page
    } else if (route.path !== '/auth/signin') {
        // We are accessing a protected route
        if (!user) {
            // Redirect to sign-in page
            return redirect('/auth/signin')
            // return redirect('/auth/signout')
        }
    } else if (route.path === '/auth/signin') {
        if (!user) {
            // Show the sign-in page
        } else {
            return redirect('/')
        }
    }
}

Upon page reload in Nuxt.js middleware, Firebase authentication is returning as null

Answer №1

Similar questions

What is causing the lack of updated data on the components when navigating to a different page? (Vue.JS 2)

Clickable list element with a button on top

Grouping various event listeners within a v-for loop

Google Chrome successfully transmits two variables with AJAX, whereas Mozilla Firefox does not send them

jQuery Accordian malfunctioning for all elements except the first one in the list

Asynchronous operations and recursive functions in the world of Node.js

Manipulate text with jQuery

Guide to triggering an event when two distinct keys are pressed simultaneously (Using HTML5 and Javascript)

Running a <script> tag with an external src attribute in a dynamic manner through the use of eval

The updated Bootstrap 4 carousel is only working halfway as expected when attempting to double it up, causing the scroll loop to stop functioning

What could be causing the appearance of sha256.js when making an AJAX request to a PHP script using jQuery?

Error encountered while attempting to build Ionic 5 using the --prod flag: The property 'translate' does not exist on the specified type

Display a loading image as a placeholder while the Block is loading on the Viewport

What is the best way to incorporate items into Redux reducers?

Using VueJS with Bootstrap 4 themes: A step-by-step guide

What are some solutions for resolving the issue of a neutralino white screen?

I'm having trouble getting my application to output to the console. What could be the issue?

The Angular directive was unable to reach the controller located higher up in the DOM hierarchy

Toggle the element within the selected row using Jquery

"What's the best way to update the src attribute of an iFrame when a user clicks