Firebase javascript auth user displaying null even though user is signed in

I followed the Firebase docs for web development and I used the user.updateProfile method to add a displayName. After signing in, i used console.log(user) and it worked but when i called user.updateprofile, it reads user as null. Any solutions?

My code is attached

var button = document.getElementById("profile-button");
var username = document.getElementById("username-Box").value;

var user = firebase.auth().currentUser;

auth.onAuthStateChanged(user =>{
        console.log(user);
})


function updateProfile(){
        if (user != null){
                user.updateProfile({
                displayName : username
        }).then(user => {
                console.log("Updated Successfully");
                window.location.href="chatpage.html";
        }).catch(err =>{
                console.log(err);
                window.alert(err);
        });
        }else if(user == null){
                console.log("No user signed in");
        }
}