Firebase automatically logging out users after an hour

Viewed 935

So, I did some research about this and I understand that firebase updates a refresh token after every hour as firebase id tokens expire after an hour. I read that firebase refreshing token after an hour is an automatic thing and user doesn't have to do anything about it.

But my user is getting logged out after an hour automatically. I want the user session to persist as long as the user doesn't logs out willingly.I don't know how to debug this either.

Here's my package.json -

{
    "name": "with-firebase-authentication",
    "version": "1.0.0",
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "export": "next export"
    },
    "dependencies": {
        "firebase": "^8.2.1",
        "firebase-admin": "^9.4.2",
        "firebase-functions": "^3.13.1",
        "handlebars": "^4.7.6",
        "js-cookie": "2.2.1",
        "luxon": "^1.25.0",
        "next": "latest",
        "nookies": "^2.5.0",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-firebaseui": "^4.1.0",
        "swr": "0.2.3",
        "uuid": "^8.3.2"
    },
    "license": "MIT"
}

I used this example as the base of my application - https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication

Edit - Here's some additional code;

userCookies.js

import cookies from 'js-cookie';

export const getUserFromCookie = () => {
    const cookie = cookies.get('auth');
    if (!cookie) {
        return;
    }
    return JSON.parse(cookie);
};

export const setUserCookie = user => {
    cookies.set('auth', user, {
        // firebase id tokens expire in one hour
        // set cookie expiry to match
        // expires: 1 / 24,
        expires: 1 / 24,
    });
};

export const removeUserCookie = () => cookies.remove('auth');

useUser.js

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import firebase from 'firebase/app';
import 'firebase/auth';
import initFirebase from '../auth/initFirebase';
import { removeUserCookie, setUserCookie, getUserFromCookie } from './userCookies';
import { mapUserData } from './mapUserData';

initFirebase();

const useUser = () => {
    const [user, setUser] = useState();
    const router = useRouter();

    useEffect(() => {
        // Firebase updates the id token every hour, this
        // makes sure the react state and the cookie are
        // both kept up to date
        const cancelAuthListener = firebase.auth().onIdTokenChanged(async user => {
            if (user) {
                const userData = await mapUserData(user);
                setUserCookie(userData);
                setUser(userData);
            } else {
                removeUserCookie();
                setUser();
            }
        });

        const userFromCookie = getUserFromCookie();
        if (!userFromCookie) {
            router.push('/');
            return;
        }
        setUser(userFromCookie);

        return () => {
            cancelAuthListener();
        };
    }, []);

    return { user, logout };
};

export { useUser };

mapUserData.js

export const mapUserData = (user) => {
  let token
  const { uid, email } = user
  user.getIdToken(true).then(id => token = id)
  return {
    id: uid,
    email,
    token,
  }
}

I think there's some problem with the cookies and not firebase authentication.

1 Answers
Related