Encountering a Firebase error: createUser failed due to missing "password" key in the first argument in AngularJS

Recently, I started learning Angular and decided to follow an online tutorial on creating a chat application. However, I encountered an issue when trying to register with an email and password - the error message "Firebase.createUser failed: First argument must contain the key 'password'" keeps popping up. Even though the app is not yet complete and I just finished the authentication part, I'm unsure of what steps to take next. Some advice from Google pointed me towards updating to the latest version of angularfire (1.1.3), which I did. Still stuck on how to proceed.

Here are some snippets from my code:

  .state('register', {
    url: '/register',
    templateUrl: 'auth/register.html',
    controller:'AuthCtrl as authCtrl',

    resolve:{
      requireNoAuth: function($state,Auth){
        return Auth.$requireAuth()
          .then(function(auth){
          $state.go('home');
          },
          function(error){
            return;
          });
        }
      }

  })

In authController.js:

angular.module('chatApp')

  .controller('AuthCtrl', function (Auth, $state) {

    //Following the 'Controller as' syntax instead of using $scope.

    var authCtrl = this;

    //User object for the controller

    authCtrl.user = {

      email:'',
      pass:''

    };

    //Using Firebase functions for login with promises for success or failure

    authCtrl.login = function () {



      Auth.authWithPassword(authCtrl.user)
        .then(function (auth) {

            $state.go('home');
          },

          function (error) {
            authCtrl.error = error;

          });

    };

//Function for registering user
    authCtrl.register = function () {
      Auth.$createUser(authCtrl.user)

        .then(function (user) {
            authCtrl.login();
          },

          function (error) {

            authCtrl.error = error;
          })


    }






});

In authFactory.js:

angular.module('chatApp')

.factory('Auth',function($firebaseAuth,FirebaseUrl){

  var declare= new Firebase(FirebaseUrl);
  var auth=$firebaseAuth(declare);
  return auth

});

Answer №1

Remember, it's password, not pass.

Another thing to note is that you need to correctly handle user resolution in your route configuration. Instead of using a promise chain in resolve, simply return the promise like so:


  .state('register', {
    url: '/register',
    templateUrl: 'auth/register.html',
    controller:'AuthCtrl as authCtrl',

    resolve:{
      requireNoAuth: function($state,Auth){
        return Auth.$requireAuth(); // return the promise
      }
    }

  })

During the run() phase, make sure to capture any routing errors:

app.run(function($rootScope, $location) {
  $rootScope.$on("$routeChangeError", function(event, next, previous, error) {
    if (error === "AUTH_REQUIRED") {
      $location.path("/home");
    }
  });
});

For more details on using Auth with Routing, refer to the AngularFire documentation.

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

Setting up Geolocation

I have been utilizing an APM tool for my work. The tool currently requires a pop-up in order to capture the user's location. However, there is now a need to capture the user's location without the pop-up appearing. Is there a method or workaroun ...

Requesting the user to repeatedly input their birth year until it is less than the current year

Can anyone help me figure out how to display a prompt until the user enters a birth year that is less than the current year? I've tried using a loop in my code, but I'm having trouble getting it right. Any assistance would be greatly appreciated. ...

How can we prevent Material-UI and Redux-form from re-rendering when an option is clicked in the select input?

I am facing an issue with rendering options dynamically. Whenever I click on the select or the options, the component re-renders and changes the options. As a result, I need to click twice to select an option in the dropdown. This re-rendering is happening ...

What could be causing the callback function to not function correctly within the HOC component?

I am encountering an issue while passing the state (setActive) to the ButtonsOur component and then trying to pass it to the HOC through a callback. The error message "Uncaught TypeError: setActive is not a function" keeps popping up. Could you please help ...

Minimize the amount of information retrieved and shown based on the timestamp

I am currently working on storing and retrieving the date of a user request. For creating the timestamp, I use this code: const date = firebase.firestore.FieldValue.serverTimestamp(); This is how I fetch and display the data: <tr class="tr-content" ...

Why am I receiving an error message stating "undefined is not a function" when trying

I am attempting to create a popover using the Angular UI pop over feature. I have loaded my HTML and compiled it, but when I run my program and click on the star icon (where I display the popover), I receive an error stating that 'undefined is not a f ...

Can a function be activated in JavaScript when location permission is declined?

Background: Following up on a previous question regarding the use of getCurrentPosition and async functions. I am currently working on The Odin Project and attempting to create a basic weather application. My goal is to include a feature that automatically ...

Is there a way to access an SD card by clicking on an HTML link using JavaScript?

UPDATE: I am seeking a way to embed an HTML file with JavaScript or jQuery that can directly access the contents of the SD card while being opened in a browser. Currently, I have posted code for accessing it through an activity, but I want to be able to d ...

Generating a random number to be input into the angular 2 form group index can be done by following these

One interesting feature of my form is the dynamic input field where users can easily add more fields by simply clicking on a button. These input fields are then linked to the template using ngFor, as shown below: *ngFor="let data of getTasks(myFormdata); ...

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

I am working on a feature where posts are displayed using ng-repeat in a div, and users can enter new posts in an input box. The posts are sorted so that the latest one appears at the bottom. After adding a new post, I want to automatically scroll down t ...

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

I currently have the following elements: #elementA { position: absolute; width: 200%; height: 100%; background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3)); z-index: 250; } #containerofA { position: fixed; ...

The table appears to be fixed in place and will not scroll, even though the data

Previously, my code was functioning perfectly with the mCustomScrollbar I implemented to scroll both vertically and horizontally on my table. However, while revising my jQuery code for organization purposes, I seem to have unknowingly altered something tha ...

Vue component lifecycle hook to fetch data from Firebase

Looking for a solution with Vue 2 component that utilizes Vuefire to connect declaratively with a Firebase real-time database: import { db } from '../firebase/db' export default { data: () => ({ cats: [] }), firebase: { ...

JQuery not refreshing data values

function addToRewardDatabase() { var rewardValue = "98"; $.post("db/mkreward.php", { proid: getURLParameter("id") }, function(data) { rewardValue = "99"; alert(rewardValue); }); alert(rewardValue); return ...

getting rid of the angular hash symbol and prefix from the anchor tag

I am having difficulty creating a direct anchor link to a website. Whenever I attempt to link to the ID using: where #20841 is my anchor tag. Angular interferes with the URL and changes it to: This functions properly in Chrome and Firefox, but i ...

Define the content and appearance of the TD element located at the x (column) and y (row) coordinates within a table

In my database, I have stored the row and column as X and Y coordinates. Is there a straightforward way to write code that can update the text in a specific td element within a table? Here is what I attempted: $('#sTab tr:eq('racks[i].punkt.y&a ...

What is the best way to retrieve the canonicalized minimum and maximum values within the beforeShow method of jQuery UI's datepicker?

I have a pair of datepicker elements that I want to function as a range. When a value is set in the "low" datepicker, it should adjust the minDate and yearRange in the other datepicker, and vice versa with the "high" datepicker. The challenge I'm faci ...

Fetch information that was transmitted through an ajax post submission

How can I retrieve JSON formatted data sent using an ajax post request if the keys and number of objects are unknown when using $_POST["name"];? I am currently working on a website that functions as a simple online store where customers can choose items m ...

Tips on handling jsonp responses in CakePHP without using the .json extension

When working with CakePHP, the framework determines the data type to return by either checking for the presence of the .json extension in the URL or examining the Accepts HTTP header. It becomes a bit trickier when dealing with JSONP, as it doesn't a ...

Combining disparate arrays with serialized name/value pairs

Is there a way to merge an unassociated array with serialized name/value pairs without manually iterating over them? //First, I select certain values from mytable var data = $('#mytable input:checked'); console.log(data); //Object[input attribu ...