After onauthstatechanged still currentuser is null

Question

I am trying to make Axios request with Bearer token.
This is my Axios function.

import axios from "axios"
import {auth} from '../../config/firebase.config'

    export function createRequest(upload) {
        const tenantId = localStorage.getItem("tenantId")
        const isUser = auth.onAuthStateChanged((user) => {
            if (user) {
                return auth.currentUser
            }
        });
    
        if (isUser) {
            const user = auth.currentUser;
            const idToken = user.getIdToken(true);
            return axios.create({
                baseURL: `${process.env.REACT_APP_BASE_API_URL}/${tenantId}/`,
                headers: {
                    "Content-type": !upload ? "application/json" : "multipart/form-data",
                    Authorization: `Bearer ${idToken}`
                }
            })
        }
        return null
    }

But the problem is my user id always returns null. I refer this link on StackOverflow and firebase doc. I did everyting according to the docs. But still not working.

score 1 · Answer 1 · answered Aug 09 '22 at 08:49

The onAuthStateChanged observer waits until the related observable emits an event. However, Javascript does not wait hence auth object might be in intermediate state. Document reference: https://firebase.google.com/docs/auth/web/manage-users#get_the_currently_signed-in_user.

Move your code inside subscription:

import axios from "axios"
import {auth} from '../../config/firebase.config'

    export function createRequest(upload) {
        const tenantId = localStorage.getItem("tenantId")
        return auth.onAuthStateChanged((user) => {
            if(user){
                const idToken = user.getIdToken(true);
                return axios.create({
                    baseURL: `${process.env.REACT_APP_BASE_API_URL}/${tenantId}/`,
                    headers: {
                        "Content-type": !upload ? "application/json" : "multipart/form-data",
                        Authorization: `Bearer ${idToken}`
                    }
                })
            }else{
                return null;
            }
        });
    }

I am not 100% sure about the code above since I cannot test it. You can try different variations and ask more.

Related questions:

score 1 · Accepted Answer · answered Aug 09 '22 at 13:54

The callback that you pass to onAuthStateChanged isn't expected to return any value, so your return auth.currentUser never ends up anywhere:

const isUser = auth.onAuthStateChanged((user) => {
    if (user) {
        return auth.currentUser
    }
});

One solution is to create your own Promise on top of onAuthStateChanged as bojeil showed in this GitHub issue:

function getCurrentUser(auth) {
  return new Promise((resolve, reject) => {
     const unsubscribe = auth.onAuthStateChanged(user => {
        unsubscribe();
        resolve(user);
     }, reject);
  });
}

With that, your code could become:

const isUser = await getCurrentUser(auth);

Of (if you can't use await):

getCurrentUser(auth).then((user) => {
  ...
})

After onauthstatechanged still currentuser is null

2 Answers2