"Encountering a new error with the creation of a user using AngularJS and Firebase

Attempting to create a user using Angular.

myApp.controller('loginCtrl',['$scope','$firebaseAuth','config',function($scope,$firebaseAuth,config){

console.info('[APP-INFO] ~ loginCtrl Start')

var ref = new Firebase('https://myauth-tadmit.firebaseio.com/');
var auth = $firebaseAuth(ref);

$scope.register =  function(){    
    auth.$createUser({
        email: $scope.user.email,
        password: $scope.user.password
    }).then(function(regUser){
        console.log('User registration complete')
    }).catch(function(error){
        console.log(error.message)
    });
}

}]);

When calling the register() function, I encounter a console error:

Projects created at console.firebase.google.com must use the new Firebase Authentication SDKs available from firebase.google.com/docs/auth/

Using Angular 1.5.8 +

<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>   

Answer №1

firebase sdk 3.

Controller:

myApp.controller('loginCtrl',['$scope','FbAuthService',function($scope,FbAuthService){

console.info('[APP-INFO] ~ loginCtrl Start')

$scope.register = function(email,password,info){

    FbAuthService.register(email,password,info);
}


}]);

then service:

    myApp.service('FbAuthService',['$firebaseAuth','$location',function($firebaseAuth,$location){

var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: "",
};

firebase.initializeApp(config);


// Authentication   
var authObj = $firebaseAuth();
var self = {};

self.register = function(email,password,info){
    authObj.$createUserWithEmailAndPassword(
        email,
        password
    ).then(function(newUser){

        //add Info from Signup to USERS => newUser.id => info(Object)
        var ref = firebase.database().ref().child('users').child(newUser.uid);
        ref.set({ firstname: info.firstname, lastname: info.lastname, uid: newUser.uid });
        $location.path('/login')
    }).catch(function(error){
       console.log(error.message)
    });
}

return self;
}]);

To access your firebase app's config value, visit your firebase app overview:

then click on "Add Firebase to your web app"

Enjoy the smooth functionality!

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

Looking for a new slider option to replace the traditional Conveyor belt slideshow?

I have successfully used the Conveyor belt slideshow script from http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm. Now, I am looking to find another script that works similar to this one. Does anyone have any recommendations for a tool that ...

What could be the reason for the malfunctioning transition effect in my slider animation?

Having trouble getting my slider animation to work. I've tried different CSS styles but the slide transition is not functioning as expected. When one of the buttons is clicked, I want the slide to change from right to left or left to right. Can anyone ...

Tips for clearing a material-ui search input field with the help of a button

Currently, I am working on a tutorial that involves implementing react material-ui tables along with a search input textfield. I am attempting to enhance this by adding a button that not only resets the table report but also clears the search input textfie ...

Test fails in Jest - component creation test result is undefined

I am currently working on writing a Jest test to verify the creation of a component in Angular. However, when I execute the test, it returns undefined with the following message: OrderDetailsDeliveryTabComponent › should create expect(received).toBeTru ...

Transferring data between Javascript and PHP with AJAX and JQuery

I'm currently working on a basic web page that involves sending data from an HTML page to a PHP script and receiving some data back. My approach involves using AJAX, but for some reason, the PHP script doesn't seem to execute at all. Here's ...

What is the method for configuring environment variables in the Lumber framework?

Installing Lumber CLI npm install -g lumber-cli -s Next, lumber generate "adminpanel_test" --connection-url "mysql://root@localhost:3306/admin-dev" --ssl "false" --application-host "localhost" --application-port "3310" Error: lumber is not recognized a ...

Terminate a browser tab with the click of an HTML button

I'm facing an issue with my HTML button - I need it to close the tab upon clicking. Unfortunately, the common methods seem to no longer work on newer versions of Chrome and Firefox. I've tried using these two solutions but they did not work: & ...

What's the best way to format text as bold in a .ts file so that it appears as [innerText] in the HTML section?

When looking to emphasize specific text without using [innerHTML], what is the alternative method besides the usual line break changes in the interface? How can we make certain text bold? For instance: .ts file string = This is a STRING bold testing.&bso ...

Modifying webpack settings for a create-react-app based project: A step-by-step guide

After starting a new react project with create-react-app, I am looking to update the webpack configuration. However, I cannot seem to locate the webpack file. Should I be creating this file myself, or is there another process involved? As someone who is ...

Removing an item from an array while also updating one of its attributes in JavaScript

I am facing a challenge with this list of objects: const flights = [ { id: 00, to: "New York", from: "Barcelona", cost: 700, scale: false }, { id: 01, to: "Los Angeles", from: "Madrid", cost: 1100, scale: tru ...

Is there a way for me to retrieve the locator value of a webelement?

How can I retrieve the selector value used in a selenium webelement in javascript? Let's say I have the following object: var el = browser.driver.findElement(by.id('testEl')); I want to extract the text 'testEl' from this object ...

send back information obtained via an ajax request made by a javascript module

Here is a code snippet featuring an object with a function that makes an AJAX call. The function currently returns an empty array, but we need to figure out how to return the data after receiving the response. var receivedData = []; var AjaxUtil = { ...

Enhance security in AngularJS by enabling data sharing between controllers and implementing callback functions for authentication

Currently, I am engaged in building an Angular front-end application, aiming to keep things simple without relying on tools like breeze or restangular while still maintaining code integrity. However, I have noticed that my code tends to become overly compl ...

What is the best way to store a downloaded video from the server?

I am currently in the process of downloading a video from a server using JavaScript XHR (specifically Angular $http GET with response type 'blob'). My question is, how can I save this downloaded video to a Chrome application's local storage ...

Preventing typing during onKeyDown event in React/JavaScript and other languages

One of the reasons why I opt to use onKeyDown is because the language for typing is Korean. With multiple inputs on the page, my aim is to prevent users from typing more than 20 bytes. //this function calculates the byte length const getByteLength = (s,b ...

The issue with ng-bind-html causing the disappearance of paragraph spaces

Is there a way to preserve paragraph breaks when using ng-bind-html to display text on the screen? I am having an issue where all the text appears as one big chunk if there are paragraph breaks in the data pulled from the database. Not sure what is causing ...

How can we transfer data using Routes in React applications?

In my React application, I have a datatable that opens an "Add New" page (a reusable form) when the user clicks on the corresponding button. This AddNew page reads form fields (employeeInputs) specified in App.js. import { employeeInputs } from "./formSour ...

Securing a single component within a named view router in Vue.js

Within my routes configuration, I have a named view route set up: let routes = [ { name: "home", path: '/', components: { default: Home, project: ProjectIndex } } ] The goal is to ...

Set the style to be displayed as a block element

I am working on a Rails application that contains some <li> elements with the CSS property display: none;. I want these elements to only appear on the page when they are being dragged. However, there are some elements that do not have the display: no ...

Is it possible to change the name of a PHP file using the value entered in an input

I am currently in the process of trying to change the name of a file while uploading it using the JQuery uploader. I have made some progress, and here is the crucial part of my UploadHandler.php: protected function handle_file_upload($uploaded_file, $name ...