0
votes

all.

I'm developing a web app using Vue.js + Firebase. In the project, I'm developing a sign-up feature.

That feature basically uses an firebase auth function and it works correctly. As an additional feature, I need to create a document in the Firestore 'users' collection. Here, the document ID is shall be same as the auth UID. But that doesn't work as intended. I just need some help.

const firebaseApp = firebase.initializeApp(firebase_config)
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
export {db, auth};
import {db,auth} from '../plugins/firebase'

// ( omit ) //

methods: {
  // this works
  test: function(){
    db.collection("users").doc("new_user").set({
      displayName: "Bob",
    }).catch(error=>{
      console.log('error on debugging: ',error)
    })
  },
    
  register: function(){
    auth.createUserWithEmailAndPassword(this.user_mail, this.user_password)
    .then(result=>{
      // this works
      console.log(result.user.uid)

      // this does not work
      db.collection('users').doc(result.user.uid).set({
        displayName: 'John',
      }).catch(error=>{
        console.log('fail to add data: ',error)
      })
    })
    .catch(error=>{
      console.log('something goes wrong on auth: ',error)
    })
  }
}

Firestore security rules are temporally as below.

match /{document=**} {
  allow read, write, create: if request.auth.uid != null;
}
2
You are not checking for errors on the call to set(). It returns a promise that you should handle. - Doug Stevenson
@DougStevenson Thank you for your advice. I've changed my code as below, however, I couldn't add a document and I couldn't get error. ``` db.collection('users').doc(result.user.uid).set({ displayName: 'John', }).catch(error=>{ console.log('fail to add data: ',error) })``` - tenko
Please edit the question to show your updated code that checks for errors as well as the error message itself. - Doug Stevenson
What is firebaseApp? You define the Firebase Auth service with firebase.auth() and you define the Firestore service with firebaseApp.firestore(). You should most probably do firebase.firestore() since firebase.auth() seem to work. - Renaud Tarnec
@DougStevenson I've editted the question. I'm afraid that no error message occurs on the script. - tenko

2 Answers

0
votes

If you are using AngularFire library then following is the way to write in database.


import { AngularFirestore } from '@angular/fire/firestore';

constructor(
        private angularFireStore: AngularFirestore,
        
    ) {}


methods: {
  register: function(){
    firebase.auth().createUserWithEmailAndPassword(this.user_mail, this.user_password)
    .then(result=>{
      // this works
      console.log(result.user.uid)
      const userUid = result.user.uid;
      const data = {
          displayName: 'John',
       }

      createUserDoc(userUid, data);
    })
    .catch(error=>{
      console.log('something goes wrong on auth: ',error)
    })
  }
}

createUserDoc(userUid,userData){
   return this.angularFireStore.collection('users').doc(userUid).set(userData);

}
0
votes

The following should do the trick. And if there is a problem when writing the user document (for example, a security rule that prevents it), you should see it in the catch block.

methods: {
  // ...
 
  register: function(){
    auth.createUserWithEmailAndPassword(this.user_mail, this.user_password)
    .then(result=>{
      // this works
      console.log(result.user.uid)

      // this does not work
      return db.collection('users').doc(result.user.uid).set({
        displayName: 'John',
      })
    })
    .catch(error=>{
      console.log('something goes wrong on auth: ',error)
    })
  }
}