Is it feasible to maintain a persistent login session in Firebase without utilizing the firebase-admin package through the use of session cookies?

Currently, I am integrating Firebase into my next.js application for user login functionality. The issue I am facing is that users are getting logged out every time they switch paths within the site. Even though their session cookie has not expired, if they navigate to a specific path like /question/page, Firebase automatically logs them out. My goal is to ensure that users remain authenticated until their session cookie expires, regardless of which path they visit on the site. Unfortunately, I cannot use the firebase-admin package as it causes crashes in my next.js environment. Therefore, I have to rely on the standard Firebase package along with the js-cookie library.

componentDidMount() {
        let user = firebase_auth.currentUser;
        console.log("User: ", user);

        if (user) {
            this.setState({user_logged_in: true});
            return firebase_auth.currentUser.getIdToken(true).then(function (token) {
                Cookies.set('__session', token, {expires: 7});
            })
        }
        else {
            this.setState({user_logged_in: false})
        }
    }

I need assistance utilizing the session cookie mentioned in the code above to prevent users from being constantly logged out when navigating between different paths. Any guidance or suggestions would be greatly appreciated!

Thank you in advance for your help!

Answer №1

The Firebase Authentication SDKs are designed to seamlessly maintain the user state even when the page or app is reloaded, ensuring that the user's authentication status is preserved upon restart.

If you are experiencing issues with accessing firebase.auth().currentUser, it is likely due to Firebase continuously verifying the validity of the authentication state.

To resolve this issue, consider implementing an auth state listener by following this guide:

componentDidMount() {
  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      this.setState({user_logged_in: true});
      firebase_auth.currentUser.getIdToken(true).then(function (token) {
          Cookies.set('__session', token, {expires: 7});
      })
    } else {
      this.setState({user_logged_in: false})
    }
  });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular - Clear the selection of <select><option> if I opt out of accepting the change

I have created a dropdown menu using HTML <select> and <option> tags, along with a JavaScript function that triggers a confirmation dialogue when an option is selected. The confirmation offers a simple choice between "yes" or "no." If the user ...

Maintaining state value during client-side navigation in NextJs with Next-Redux-Wrapper

Currently, I am working on resolving the hydration issue that occurs when using wrapper.getServerSideProps. The problem arises when I reroute with the existing setup and the store gets cleared out before adding new data. This leads to a blank page as essen ...

Using the Selenium webdriver to reach the bottom of the page by scrolling vertically

Is there a way to determine if I have scrolled to the bottom of the page vertically? I have been using Webdriver and pressing the page down key repeatedly within a for loop, like so: for(int di=0; di<40; di++) { driver.findElement(By.tagName("body ...

Deciding Between Javascript DOM and Canvas for Mobile Game Development

My idea for a mobile game involves using the Phonegap framework to create a game where players can control a ball's movement by utilizing their phone's accelerometer. I also envision incorporating other elements like enemies and walls into the ga ...

First render does not define useEffect

Why am I experiencing an issue here? Whenever I attempt to retrieve data from my API, it initially returns undefined during the first render, but subsequent renders work correctly. const [data, setData] = useState([]) useEffect(() => { const fe ...

Apigee Usergrid: Absence of bulk delete feature

Currently, I am utilizing usergrid for storage in a customer project. The data is divided into two collections: carShowrooms and cars. Thus far, everything has been running smoothly. However, there arises a situation where I need to refresh the masterdata ...

Personalizing navigation tabs using Bootstrap

I've been working on creating a custom bootstrap navbar tabs, but I'm struggling to remove the borders and apply the custom colors. After some trial and error, here's what I have so far: .nav-tabs, .nav-pills { text-align: center; bo ...

Ensuring the legitimacy of Rails form submissions

I am encountering an issue with validating a form before submitting it, as the form is being submitted without triggering the jQuery part. <%= form_for(:session,class:"form-signin form-horizontal",:id=> "form",:role=> "form") do |f| %> & ...

Issues encountered with JSON formatting following jQuery ajax request

When my nodejs app receives data from a cordova app through a jQuery ajax call, the format is different. It looks like this: { "network[msisdn]": "+254738XXXXXX", "network[country]": "ke", "network[roaming]": "false", "network[simSt ...

unable to update database using jquery ajax

Hello everyone, this is my first time posting on Stackoverflow! I am facing an issue while trying to run an "Insert" query using Jquery's $.ajax function. Upon checking the network tab on Chrome Dev Tools, it seems like my file is being loaded but th ...

Choose the list item by identifying the corresponding unordered list

Is there a way to target the second li element within an ul list like this: HTML <ul> <li></li> <ul> <li>This one is what I need to select</li> </ul> </ul> ...

Tips for boosting the tabindex in a React search result list with ul-li elements

Implementing search results using ul li: <ul className="search-result"> <li tabindex="1">title here...</li> <li tabindex="2">title here...</li> <li tabindex="3">title here... ...

Displaying Material UI Styles: A Challenge

Currently working on a website using Material-UI and React. Strangely, the styling applied through Material-UI's Hook API functions perfectly on codesandbox.io but fails to work when running locally. Notably, the border radius feature fails to update ...

Is it possible to perform a forEach operation on two separate arrays simultaneously?

I have created two arrays and then utilized a function to assign values to certain variables based on the element clicked in the array. (Refer to the first code snippet) However, I am now looking to execute another function that makes use of these assigned ...

Sequelize Error: The WHERE parameter for 'email' is throwing an error due to an invalid value of 'undefined'

Currently, as part of my Node.js application, I am using Sequelize to develop a user registration feature. However, I seem to be facing an issue when attempting to verify the existence of a user based on their email address. The error that keeps popping up ...

Is there a way to use JavaScript to add content to a document and then facilitate the download of that document?

Is there a way in JavaScript to write content to a JSON or TXT file and then download it, similar to how it is done in Python? const content = "Hello"; const link = document.createElement('a'); link.setAttribute('download', 'FileTo ...

What is the most effective method for populating an array with all images from a particular directory?

I recently installed a pdf viewer plugin on my website (check it out here: ), and I have a question regarding its functionality. I am looking to include approximately 60 - 70 pages in this flip book, but I am unsure of how to proceed. I have attempted var ...

What is the optimal approach for managing script initialization on both desktop and mobile devices?

I have implemented a feature on my website that can detect whether the viewer is using a mobile device. Additionally, I have created a JavaScript script that adjusts settings based on whether the user is on a mobile device or not. However, I am wondering ...

absence of an export called

I am facing an issue with importing a simple component in my React project. I am unable to locate the component causing this error. The error message I am receiving while importing the component is as follows: ./src/App.js 61:28-32 './componentes/ ...

Eliminating unnecessary CSS from the codebase of a website

Currently, I am making adjustments to a website template that I downloaded for free online. I have noticed that even if I delete a div from the code, the corresponding CSS styles remain in one or more files. Is there any tool available that can automatic ...