javascript - Firebase onAuthStateChanged() triggering before retrieving name from signup form?

Question

I'm creating a dashboard using vanilla HTML, CSS and JS, with Firebase as my backend. In my signup.html page, I have a form that allows users to input their name along with their email address and password. Upon signup, users are redirected to dashboard.html with their personalized content. Inside the dashboard, it has a spot where it displays their name.

The problem is it is not always getting the name from the form, and if it doesn't get the user's name from the signup form then it just doesn't have their name as I don't have a "add name" function in the dashboard. I suspect this is because of the way I use the onAuthStateChanged() inside signup.html.

The following is my signup page JS code:

firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
        window.location.replace('dashboard.html')
    } else {
        return
    }
});

document.querySelector('#signup_btn').addEventListener("click", (e) => {
    e.preventDefault();

    var user_email = document.getElementById('user_email').value;
    var user_pass = document.getElementById('user_pass').value;
    var user_name = document.getElementById('user_name').value;

    // Sign Up
    firebase.auth().createUserWithEmailAndPassword(user_email, user_pass)
        // Success
        .then((userCredentials) => {
            userCredentials.user.updateProfile({
                displayName: user_name
            })
        })
        // Errors
        .catch(function (error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            if (errorCode == 'auth/weak-password') {
                alert('The password is too weak.');
            } else {
                alert(errorMessage);
            }
            console.log(error);
        });
})

If it helps, here is the form from my signup.html page:

<form>
        <h1>Sign Up</h1>
        <!-- <h2>Log into your account using your email address</h2> -->

        <label for="user_name">Name</label>
        <input type="text" name="name" id="user_name">

        <label for="user_email">Email Address</label>
        <input type="text" name="email" id="user_email">

        <label for="user_pass">Password</label>
        <input type="password" name="Password" id="user_pass">

        <button type="submit" id="signup_btn">Sign Up</button>

        <p>Already have an account? <a href="./index.html">Log In</a></p>
    </form>

Answer 1

Waitting for answers