Skip to content
Advertisement

Exporting a boolean variable that depends on an if statement (React JS & Firebase)?

I’m trying to declare a boolean from my firebase.js configuration file that depends on an if-else statement that checks whether a user is logged in or not.

I want to store the log in status of a user in a boolean variable and export that variable across different components in my React app.

So if user is logged in I want my variable isLoggedIn to be true and export that. But I want the isLoggedIn boolean to be updated depending on the log-in status before it gets exported.

Here is my firebase.js file

import { initializeApp } from 'firebase/app';
import { getAuth } from "firebase/auth";

const firebaseConfig = {
    //private keys
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

//Problem
let isLoggedIn = false;
function checkLoggedInStatus() {
    if (auth.currentUser !== null) { //i.e. user is signed in
        isLoggedIn = true;
    }
    return isLoggedIn;
}

checkLoggedInStatus();

export isLoggedIn;

Advertisement

Answer

There are (at least) two problems here.

What immediately follows export may be, among other things:

  • A declaration followed by a variable name (eg export let foo = 5;) – this initializes the variable and exports it from the module in a single line
  • function or class – similar to the above
  • default, if you want to indicate what you’re exporting is the default export
  • Brackets, if you’re exporting identifiers that have already been declared – eg export { foo }

But doing export isLoggedIn; is invalid syntax – it falls into none of those categories (nor any of the other permitted constructs).

The other issue is that the .currentUser property may not exist yet if the auth isn’t done initializing. Make sure you wait for it to be done first. Use the observer version instead.

Since that is asynchronous, you have a few options for getting that information to the rest of your script. The first one, that I’d recommend, is to have this auth module call the rest of your script (in other words, make this module your entry point, or close to it). For example:

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { renderApp } from './renderApp';

const firebaseConfig = {
    //private keys
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
onAuthStateChanged(auth, (user) => {
    if (user) {
        renderApp(user);
    } else {
        // No user
        renderApp();
    }
});

where renderApp is the starting point for the rest of your code that depends on the user. You can’t easily export isLoggedIn directly from the firebase module because it’s retrieved asynchronously – calling renderApp with it and then passing the value around is the best way to do it.

You can also export a Promise from this firebase module script, one that resolves to whether the user is logged in or not, but that’ll require all consumers of the module to have to call .then on the value before being able to use it, which could be quite messy. Better to use your firebase module script as an entry point and only call the rest of your script once the auth object has finished loading.

Advertisement