How can I use the Firebase user object outside of the Firebase function?

Question

I am able to log users into my application using Google Auth from Firebase. However, I can't seem to get any part of the User object to appear on the front end of my application (I'm using Pug templates). How can I achieve this?

This is the code that I am using to sign the user into my web app using Google Auth:

document.getElementById('LogInButton').addEventListener('click', (e) => {
  signInWithPopup(auth, provider)
    .then((result) => {
      // This gives you a Google Access Token. You can use it to access the Google API.
      const credential = GoogleAuthProvider.credentialFromResult(result);
      const token = credential.accessToken;
      // The signed-in user info.
      const user = result.user;
      // ...
      window.setTimeout(() => {
        location.assign('/dashboard');
      }, 1500);
    })
    .catch((error) => {
      // Handle Errors here.
      const errorCode = error.code;
      const errorMessage = error.message;
      // The email of the user's account used.
      const email = error.email;
      // The AuthCredential type that was used.
      const credential = GoogleAuthProvider.credentialFromError(error);
      // ...
    });
});

I would like to be able to reference the "user" variable in my .pug files throughout the application. Right now, I have a viewController file where I can pass in data, for example:

exports.getSignIn = (req, res) => {
  res.status(200).render('signin', {
    title: `Sign in`,
  });
};

Is there a way for me to pass the user object from index.js into my viewController so it's available in the Pug template? I'm pretty lost. Any help would be appreicated.

score 1 · Accepted Answer · answered Oct 15 '21 at 23:18

The problem here is two-fold:

You need to pass the variable to your pug template, which you can do when you tell pug to render the template (as shown for example here).
User data is loaded from Firebase asynchronously. You need to either only render the template once the data is loaded, or re-render the template when it has loaded.

I don't see any canned solutions for this second step, but I'd typically look for a way to call the pug rendering from within the callback (so where you now have location.assign('/dashboard')).

Also see this similar question:

Pass asynchronously loaded data to pug-html-loader in webpack
How to dynamically render Async function output with Express/Pug? (similar problem, but then in Express).

How can I use the Firebase user object outside of the Firebase function?

1 Answers1