Home > OS >  Nuxt firebase write doc after createUserWithEmailAndPassword fail
Nuxt firebase write doc after createUserWithEmailAndPassword fail

Time:10-21

The idea of register form is

  1. add user email and password to firebase auth, this is successful, then
  2. add new document using their uid as document id and insert street field and value; to profile collection, failed without error.

The user and email are added to the auth users in firebase console, but the document writing still unsuccessfull with no error on the console either.

Been scratching my head for awhile.

Here's my code

<template>
    <v-form @submit.prevent="createUser">
        <v-text-field
            v-model="register.email"
            label="Email"
            required
        />
        <v-text-field
            v-model="register.password"
            label="Password"
            required
        />
        <v-text-field
            v-model="register.street"
            required
            label="Street"
        />
        <v-btn
            type="submit"
        >
            Register
        </v-btn>
    </v-form>
</template>

<script>
import Vue from 'vue'
import { createUserWithEmailAndPassword, onAuthStateChanged } from 'firebase/auth'
import { doc, setDoc } from 'firebase/firestore'
import { auth, db } from '~/plugins/firebase.js'

export default Vue.extend({
  data () {
    return {
      register: {}
    }
  },
  
  methods: {
    async createUser () {
      await createUserWithEmailAndPassword(
        auth,
        this.register.email,
        this.register.password
      ).catch((error) => {
        console.log(error.code)
        console.log(error.message)
      })

      onAuthStateChanged(
        auth,
        (user) => {
          if (user) {
            const ref = doc(db, 'profile', user.uid)
            const document = {
              street: this.register.street
            }
            try {
              setDoc(ref, document)
            } catch (e) {
              alert('Error!')
              console.error(e.code)
              console.error(e.message)
            }
          }
        }
      )
    }
  }
})
</script>

firestore rule with no restriction

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read;
      allow write;
    }
  }
}

CodePudding user response:

Try like following:

async createUser () {
  await createUserWithEmailAndPassword(
    auth,
    this.register.email,
    this.register.password
  )
  .then((user) => {
      this.writeToFirestore(user)
  })
 .catch((error) => {
    console.log(error.code)
    console.log(error.message)
  })
},

async writeToFirestore(user) {
  if (user) {
    const ref = doc(db, 'profile', user.id)
    const document = {
      street: this.register.street
    }
    try {
      setDoc(ref, document)
    } catch (e) {
      alert('Error!')
      console.error(e.code)
      console.error(e.message)
    }
  }
},
  • Related