There is an issue with adding data to the database after inputting email and password for authorization in Firebase via Vue.js

The data is not being added to the database even after entering the email and password for authorization in Firebase using vue.js.

When I use:

firebase.auth().createUserWithEmailAndPassword(this.email, this.password) 

The following code does not get executed:

ref.set({
    alias: this.alias,
    geolocation: null,
    user_id: cred.user.uid
})

Although the email and password are successfully added to Authorization, other fields such as alias, geolocation, and user_id are not being added to the database.

import slugify from 'slugify'
import db from '@/firebase/init'
import firebase from 'firebase'

export default {
    name: 'Signup',
    data(){
        return {
            email: null,
            password: null,
            alias: null,
            feedback: null,
            slug: null,
        }
    },
    methods: {
        signup() {
            if(this.alias && this.email && this.password) {
                this.feedback = null
                this.slug = slugify(this.alias, {
                    replacement: '-',
                    remove: /[$*_+~.()'"!\-:@]/g,
                    lower: true
                })
                let ref = db.collection('users').doc(this.slug)
                ref.get().then(doc => {
                    if(doc.exists){
                        this.feedback = 'This alias already exists'        
                    }
                    else {
                        firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
                        .then(cred => {
                            ref.set({
                                alias: this.alias,
                                geolocation: null,
                                user_id: cred.user.uid
                            })
                        }).then(() => {
                            this.$router.push({ name: 'GMap' })
                        })
                        .catch(err => {
                            console.log(err)
                            this.feedback = err.message
                        })
                    }
                })
            } else {
                this.feedback = 'You must enter all fields'
            }
        }
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message: In ReactJS, Firebase is requesting the "projectId" app configuration value which has not been provided, resulting in the error code installations/missing-app-config-values

When I deploy my Firebase React app using the command line, everything works fine. However, I encounter an error when deploying it with Travis. https://i.stack.imgur.com/372a3.png Here are my configuration files. .travis.yml language: node_js node_js: ...

What are the steps to fetch data from Firebase v9 and showcase it on the frontend?

Hello, I have successfully connected a contact form to Firebase and now I need help displaying the data in the browser. Despite trying multiple approaches, I have been unsuccessful so far. The collection for the data is named messages. Below is the code ...

Steps for launching a hyperlink in a browser on Vue Native

I'm having trouble finding information on how to properly use the Linking component in react-native. The resources available are limited, and I'm not sure if I am implementing it correctly... Below is what I have in my template: <nb-button :o ...

Issue encountered when attempting to batch delete documents within a subcollection: Error message displays "TypeError: n.indexOf is not a

When attempting to batch delete a document within a subcollection, I encounter some issues. There are scenarios where I may need to remove the same product document ID along with various history document IDs, or multiple product document IDs with differen ...

Dynamically importing files in Vue.js is an efficient way to

Here's the code snippet that is functioning correctly for me var Index = require('./theme/dir1/index.vue'); However, I would like to utilize it in this way instead, var path = './theme/'+variable+'/index.vue'; var Inde ...

Ways to access information and functions from another component

Creating a timer dashboard where alarms can change the background color of the timer. Looking to display the timer on a different page with the set background color from the dashboard, but struggling to pass data between components successfully. http ...

The method s.indexOf is not a valid function and throws an error at the `Function

I'm puzzled by this unexpected error popping up, as I can't pinpoint the source considering I haven't used that. Could it be related to my firebase update after a user modifies a row in DataGrid MUI? I followed the usual process for updating ...

Enhancing React performance for rapid re-rendering in a networked environment

In my current React coding project, it seems like every local update made by a user in a realtime distributed system (like Firebase) requires updating Firebase first. Then, if the update is successful, a new object containing both the old data and the newl ...

Get multiple documents when using Next.js with Firebase - Why is getDocs() only retrieving the

I'm in need of the complete collection. The issue I'm facing is that the places variable is only fetching the first document. Any assistance on this matter would be greatly appreciated. import { app, auth } from '../firebase' import { g ...

What is the best way to create a compound query in Firebase?

I am working on a TypeScript script to search for a city based on its population... import { getFirebase } from "react-redux-firebase"; ... get fb() { return getFirebase(); } get fs() { return this.fb.firestore(); } getCollection(coll ...

I successfully installed the Firebase tools using npm, but encountered an error during the process

Alert: Please choose at least one feature. Press SPACEBAR to select features, or mention a feature by executing firebase init [feature_name] ...

Exploring the discrepancies in utilizing the i18n library versus directly incorporating locale from JSON in vue.js

Recently, I decided to incorporate Chinese language into my Vue app. To achieve this, I loaded the entire JSON text into Vuex and utilized the stored text directly, instead of relying on an i18n library. I'm curious to know if there are any potential ...

Loop proceeding without waiting for promise resolution containing nested Firebase call

I am currently facing an issue with making Firebase database calls within a loop and an outer Firebase call. The inner database call utilizes data returned from the outer call and the loop, hence it is nested inside the outer one. The goal is to set the re ...

The persistence of authentication state in Next.js Firebase is inconsistent

I can't figure out why Firebase auth isn't persisting. My project is quite basic at this point, with a simple sign-in function: await signInWithEmailAndPassword(auth, email, password); In my layout.tsx, I have the onAuthStateChange: const unsubs ...

Tips for ensuring users stay logged in even after refreshing the page using Firebase's persistence feature

I implemented the use of Context API to manage user login state and also utilized Firebase Auth persistence to keep users logged in even after a page reload, however, it seems to not be working as expected. While the user information is being saved in the ...

What is the correct method to authenticate a user's ID token in Firestore with Javascript?

I am in the process of developing a react native application and have integrated Firebase, specifically firestore, for data management purposes. My current goal is to incorporate an automatic login feature in my app, where users remain signed in even after ...

Firestore Error: Unable to use collection().where() method

I'm currently working on filtering my documents in Firebase Firestore by checking if the 'users' array in a document contains the user's email address. Within the 'chat' collection, there are documents with IDs: '[email&# ...

Splitting files with Webpack generates dynamic chunk files

Anticipating to only have two distinct chunks named vendors and commons, webpack unexpectedly generates a new chunk file for specific entries with a delimiter. optimization: { splitChunks: { chunks: 'all', cacheGroups: { ...

What could be causing React onclick events to not trigger when wrapped within a Vue application? (No additional libraries)

As I dive into the world of combining React and Vue components, I encountered an interesting challenge... const RootTemplate = () => { return ( <div id="vue-app"> ... <IconButton color="inherit" onClick={thi ...

Analyzing and refreshing the data entries in firebase database

https://i.stack.imgur.com/ZMjck.png I have been attempting to modify my Username password group name. However, the update process is not successful. I am looking for a way to compare data before updating fields, but I am unable to find a suitable method. ...