Data is not going to firebase database in javascript

Question

Here i am using firebase auth , so i also upload the data given by the user into the firebase real time database but my data is going one time only when a server is started , and if i add more user in one time when serer is started then data is not going to firebase and even not showing any short of error , working smothly. One warning is coming.

I dont know where is the problem , as user.uid is also printing well and username is also printing well.

This is my code

<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Firebase Server Auth</title>
    <link rel="stylesheet" href="/css/mvp.css" type="text/css" />

    <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

</head>

<body>

    <section>
        <form id="signup">
            <label>
                    Username
                </label>

            <input type="text" name="username" id="username" required/>
            <label>Full Name</label>
            <input type="text" name="name" id="name" required/>

            <label>Email</label>
            <input type="text" name="email" id="email" required/>
            <label>Contact</label>
            <input type="number" name="phone" id="phone" required/>



            <label>Password</label>
            <input type="password" name="password" id="password" required/>
            <button type="submit" id="signup">Sign up</button>

        </form>
        <form action="/login" method="GET">
            <button type="submit">Having Account</button>
        </form>
    </section>
    <script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-database.js"></script>



    <script>
        var firebaseConfig = {
            apiKey: "",
            authDomain: "",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: "",
            measurementId: ""
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);

        firebase.auth().setPersistence(firebase.auth.Auth.Persistence.NONE);

        document
            .getElementById("signup")
            .addEventListener("submit", (event) => {
                event.preventDefault();
                var email = document.getElementById("email").value;
                var password = document.getElementById("password").value;
                var username = document.getElementById("username").value;
                var name = document.getElementById("name").value;
                var phone = document.getElementById("phone").value;

                firebase
                    .auth()
                    .createUserWithEmailAndPassword(email, password)
                    .then(({
                        user
                    }) => {
                        console.log(user.uid)
                        console.log(username);

                        firebase.database().ref(user.uid).set({
                            "Username": username,
                            "Name": name,
                            "Phone": phone,
                            "Email": email
                        });

                        return user.getIdToken().then((idToken) => {
                            return fetch("/sessionLogin", {
                                method: "POST",
                                headers: {
                                    Accept: "application/json",
                                    "Content-Type": "application/json",
                                    "CSRF-Token": Cookies.get("XSRF-TOKEN"),
                                },
                                body: JSON.stringify({
                                    idToken
                                }),
                            });
                        });
                    })
                    .then(() => {
                        window.location.assign("/login");
                    }).catch(err => {
                        alert("Email Already exist");
                        window.location.assign("/login");
                        console.log(err);
                    })
                return false;
            });
    </script>
</body>

</html>

look at Network tab in devTools. What do you see there?

alchemist95
– alchemist95

2020-06-10 20:42:44 +00:00
Commented Jun 10, 2020 at 20:42 — alchemist95
– alchemist95, Commented Jun 10, 2020 at 20:42

Renaud Tarnec · Accepted Answer · 2020-06-10 20:55:18Z

1

It is probably because you assign the submit type to your button: your form is submitted before the createUserWithEmailAndPassword() Firebase method is triggered.

You should change the button type to button (See the W3 specification for more detail on button types).

Something like the following (untested):

    <form id="signup">
        //...
        <button type="button" id="signupButton">Sign up</button>

    </form>


    //...

<script>
    var firebaseConfig = {
      //...
    };
    // Initialize Firebase
    //...

    document
        .getElementById("signupButton")
        .addEventListener("click", function() => {...})

answered Jun 10, 2020 at 20:55

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Data is not going to firebase database in javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related