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...

--- 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

Refreshing a div using ajax technology

Creating a shared observable array in KnockoutJs to be used for multiple select elements

Updating a singular value in an array using jQuery/JavaScript

Navigate down to the bottom of the element located on the webpage

How to disable the onChange event in PrimeNG p-dropdown?

Not enough test coverage with Jest

The external javascript file is unable to recognize the HTML table rows that are dynamically inserted through an AJAX request

The paragraph text should dynamically update upon clicking a button based on JavaScript code, however, the text remains unchanged despite attempts to modify it

Tips for automatically updating a MaterialUI DataGrid in a React JS application

Avoiding unnecessary re-renders in your application by utilizing the useRef hook when working with

Adding several <div> elements with the correct indices

A method for arranging an array of nested objects based on the objects' names

Implement Material UI Textfield with 'error' and 'helper text' for items within a repeated loop

Is there a way to retrieve the Angular-Redux store in a child module?

Generating PDF files from HTML documents using Angular

A method for applying the "active" class to the parent element when a child button is clicked, and toggling the "active" class if the button is clicked again

Accessing a Variable in one JavaScript File from Another JavaScript File

Display modal after drop-down selection, triggered by API response

If an Angular reactive form component has a particular value

What is the purpose of using $ symbols within NodeJS?