Firestore collection.set method doesn't work

Question

I have a google button, which provides sign in with google.

Everything is okey, but i can't write user datas to firestore database. When i look firestore auth page in firestore website, i can see, user can login successfully, but user datas can't write firestore database, why? What's wrong?

My google button codes:

const LoginForm = () => {
  var provider = new firebase.auth.GoogleAuthProvider();
  return (
    <>
      <div
        className="btn-google login-button google"
        onClick={() =>
          firebase
            .auth()
            .signInWithPopup(provider).then((result) => {
              var user = result.user;
              firebase.firestore().collection("users").doc(user.uid).set({
                username: user.displayName,
                email: user.email,
                uid: user.uid,
              });
            })
        }
      >
        <GoogleOutlined /> Sign in With Google
      </div>
    </>
  );
};

Firebase auth page screenshot:

Firestore database screenshot:

Answer 1

I changed the rules secion like this and i solved the problem:

// Allow read/write access on all documents to any user signed in to the application
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}