Develop Reference

firebase.auth().SignInWithPhoneNumber is not a function

window.onload=function(){
render();
};
function render(){
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
recaptchaVerifier.render().then(widgetId => {
window.recaptchaWidgetId = widgetId;
})
}
function phoneAuth(){
var number=document.getElementById('number').value;
firebase.auth().SignInWithPhoneNumber(number,window.recaptchaVerifier).then(function(confirmationResult){
//const sentCodeId = confirmationResult.verificationId;
//signInWithPhoneButton.addEventListener('click', () => signInWithPhone(sentCodeId));
window.confirmationResult = confirmationResult;
coderesult=confirmationResult;
console.log(coderesult);
alert("Message sent");
}).catch(function(error){
alert(error.message);
});
}
function codeverify(){
var code= document.getElementById('verificationCode').value
coderesult.confirm(code).then(function(result){
alert("Successfully register");
var user=result.user;
console.log(user);
}).catch(function(error){
alert(error.message);
});
}
<h1>Enter number</h1>
<form>
<input type="text" id ="number" placeholder="+49**********">
<div id="recaptcha-container"></div>
<button type="button" onclick="phoneAuth();">SendCode</button>
</form><br>
<h1>Enter Code</h1>
<form>
<input type="text" id ="verificationCode" placeholder="Enter verification Code">
<button type="button" onclick="codeverify();">Verify Code</button>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-performance.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<!--<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-analytics.js"></script>-->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "-",
authDomain: "-",
databaseURL: "-",
projectId: "-",
storageBucket: "-",
messagingSenderId: "-",
appId: "-",
measurementId: "-"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//firebase.analytics();
// make auth and firestore references
const auth = firebase.auth();
const db = firebase.firestore();
// update firestore settings
//db.settings({ timestampsInSnapshots: true });
</script>
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--<script src="scripts/auth.js"></script> -->
<script src="scripts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="script.js"></script>
Hello everyone! I want to use the Firebase-Phone-Authentication but it's not working, here my code.
Everytime I want to use it there is an error in the console "firebase.auth().SignInWithPhoneNumber is not a function".I have watched some videos on Youtube and also tried some code from the internet but nothing works. I'm thankful for every Help:)!

Why does it show up a null in the textarea twice?

When I type in the title it shows up as null even though it is there. Also the textarea shows up twice. Thank you any help is appreciated. I feel like I need to convert it to something for it actually read, but I am just a begineer.
I have tried parsing it to JSON,but feel free to show me how it is properly done.
Sorry for my English
var title_s = document.getElementById("TitleSearch");
var titlejson = JSON.parse(title_s);
var teststring = "test";
//This is to intialize everything and auth. with the firebase server
var config = {
apiKey: "AIzaSyB9p1VvVfhnbrcDwUKUuSqw9aQsqnDi4nQ",
authDomain: "html5project-870df.firebaseapp.com",
databaseURL: "https://html5project-870df.firebaseio.com",
projectId: "html5project-870df",
storageBucket: "html5project-870df.appspot.com",
messagingSenderId: "54935462861"
};
//firebase.initializeApp(config);
//checks if it has been init
if (!firebase.apps.length) {
firebase.initializeApp({});
}
//declare variables
var database = firebase.database();
//tells where the items are going to be
var Rootref = database.ref().child("users");
var ref = firebase.database().ref("users");
ref.on("value", function(snapshot) {
console.log(snapshot.val());
}, function (error) {
console.log("Error: " + error.code);
});
//var Rootref1 = database.ref().child("users").child("id: 113295907411766134791")/*.child("trans")*/;
//used to retrieve data
Rootref.on("child_added",snap => {
//gets the child of titles stores it as variable
var transcript_title = snap.child("titles").val();
//var transcript_title = (snap.val() && snap.val().titles);
//gets the actual title and stores it as a var
//var transcript = snap.child(transcript_title).val();
$('#transcrip').val(snap.child('users/id: 107621796826103613669'))
//jquery - way to add html elemnts with javascript
snap.child("titles").forEach(function(titleSnap) {
$("#read").append('<h4 id = "clicked">'+titleSnap.val()+'</h4>');
})
console.log(teststring);
$( "#TitleButton" ).click(function() {
var search = snap.child(title_s).val();
$("#ReadHere").append('<textarea placeholder="Shows up right here" col="50" row="10">'+search+'</textarea>');
});
//$("#read").append('<h4 >Test</h4>');
//when button view was clicked it will show the transcriptiodn
});
<!DOCTYPE html>
<html>
<head>
<!--Calling every thing required-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="54935462861-sedlkvk3ufqujgpo2hmevectur8p4o2u.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyB9p1VvVfhnbrcDwUKUuSqw9aQsqnDi4nQ",
authDomain: "html5project-870df.firebaseapp.com",
databaseURL: "https://html5project-870df.firebaseio.com",
projectId: "html5project-870df",
storageBucket: "html5project-870df.appspot.com",
messagingSenderId: "54935462861"
};
firebase.initializeApp(config);
</script>
<!--Title on top left-->
<h1>View your Transcriptions</h1>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="read.js"></script>
</head>
<body>
<input type="text" id="TitleSearch">
<button id = "TitleButton">Search</button>
<center>
<ul id="read">
</ul>
</center>
<div id = "ReadHere">
</div>
<!--When clicked on you view it here-->
<h1>Viewed Right Here</h1>
<p id = "transcrip"></p>
</body>
</html>
{
"users" : {
"id: 110753432956858279660" : {
"Test" : "He",
"Test2" : "He",
"titles" : {
"201920201828" : "Test",
"201920202259" : "Test2"
}
},
"id: 113295907411766134791" : {
"test" : {
"text" : "text"
},
"test3" : {
"text" : "text"
}
}
}
}

User is not getting created in Firebase web app

User is not getting created ! The same code works on another sample file I got from youtube , but when I copied and used in my code , it is not working. The user is successfully created in my database with my init-details on that sample file,so I dont think the problem is with my firebase , its somewhere here i think.
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var user = firebase.auth().currentUser;
if(user != null){
}
} else {
// No user is signed in.
}
});
function login(){
var userEmail = document.getElementById("ie").value;
var userPass = document.getElementById("ip").value;
window.alert(userEmail+ " "+ userPass);
firebase.auth().createUserWithEmailAndPassword(userEmail, userPass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
window.alert("Error : " + errorMessage);
// ...
});
}
function logout(){
firebase.auth().signOut();
}
<html>
<head>
<title>Admin Login</title>
<link href="index-css.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="login-page">
<div class="form">
<p>Admin Login</p>
<form class="login-form">
<input id="ie"type="text" placeholder="Email"/>
<input id="ip"type="password" placeholder="Password"/>
<button id="loginbtn" onclick="login()">Login</button>
</form>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/5.8.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyA8QeKSDbtgq6GiSS3MBjU2i43IZgYeMRE",
authDomain: "web-app-login-a90bb.firebaseapp.com",
databaseURL: "https://web-app-login-a90bb.firebaseio.com",
projectId: "web-app-login-a90bb",
storageBucket: "web-app-login-a90bb.appspot.com",
messagingSenderId: "695872421055"
};
firebase.initializeApp(config);
</script>
<script src="index.js"></script>
</body>
</html>

firebaseui.js:formatted:9514 Uncaught TypeError: Cannot read property 'EmailAuthProvider' of undefined

i wanted to use the Firebase UI and i used it, It was working fine at the first time but broken
But i don't think this has the problem because its the code from Firebase UI themself
This is the code I have in index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
<script>
var config = {
apiKey: "**************************",
authDomain: "chat-77ca3.firebaseapp.com",
databaseURL: "https://chat-77ca3.firebaseio.com",
projectId: "chat-77ca3",
storageBucket: "chat-77ca3.appspot.com",
messagingSenderId: "312413147357"
};
firebase.initializeApp(config);
</script>
<title>Chat</title>
<script defer="defer" src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"></script>
<script defer="defer" src="https://www.gstatic.com/firebasejs/5.0.4/firebase-database.js"></script>
<script defer="" src="/__/firebase/init.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.firebase.com/libs/firebaseui/3.3.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.3.0/firebaseui.css" />
<script src="node_modules/firebaseui/dist/firebaseui.js"></script>
<script type="text/javascript">
var uiConfig = {
signInSuccessUrl: 'loggedin.html',
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
]
}
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<div id="firebaseui-auth-container"></div>
</body>
</html>
And this is the javascript in loggedin.html
HTML not included
< script type = "text/javascript" >
initApp = function() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var uid = user.uid;
var phoneNumber = user.phoneNumber;
var providerData = user.providerData;
user.getIdToken().then(function(accessToken) {
document.getElementById('sign-in-status').textContent = 'Signed in';
document.getElementById('sign-in').textContent = 'Sign out';
document.getElementById('account-details').textContent = JSON.stringify({
displayName: displayName,
email: email,
emailVerified: emailVerified,
phoneNumber: phoneNumber,
photoURL: photoURL,
uid: uid,
accessToken: accessToken,
providerData: providerData
}, null, ' ');
});
} else {
document.getElementById('sign-in-status').textContent = 'Signed out';
document.getElementById('sign-in').textContent = 'Sign in';
document.getElementById('account-details').textContent = 'null';
}
}, function(error) {
console.log(error);
});
};
window.addEventListener('load', function() {
initApp()
});
</script>

Getting the ID when message is sent - Firebase & AngularFire

I have a messaging "app" and I need to get the ID when a message is created.
Here is all of the code below:
<html ng-app="sampleApp">
<body ng-controller="SampleCtrl">
<ul>
<li ng-repeat="message in messages">
<input ng-model="message.message" ng-change="messages.$save(message)" />
<input ng-model="message.by" ng-change="messages.$save(message)" />
<button ng-click="messages.$remove(message)">Delete Message</button>
</li>
</ul>
<form ng-submit="addMessage()">
<input ng-model="newMessageText" />
<input ng-model="newMessageBy" />
<button type="submit">Add Message</button>
</form>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<script>
var config = {
apiKey: "xxx",
authDomain: "xxx",
databaseURL: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx"
};
firebase.initializeApp(config);
var app = angular.module("sampleApp", ["firebase"]);
app.controller("SampleCtrl", function ($scope, $firebaseArray) {
var ref = firebase.database().ref().child("messages");
$scope.messages = $firebaseArray(ref);
$scope.addMessage = function () {
$scope.messages.$add({
message: $scope.newMessageText,
by: $scope.newMessageBy
});
};
});
</script>
</body>
</html>
When a message is sent, it creates a ID and the message content under it. So, I need to get the ID of the message sent, and write the ID to Firebase.
Here's what the database looks like:
{
"messages" : {
"-KrsHPUi7pIWTQ1qgO4q" : { // I NEED TO GET THIS
"message": "blah blah blah...",
"by": "john"
}
},
"ids" : {
"first": "-KrsHPUi7pIWTQ1qgO4q" // AND PUT IT HERE
}

here how you can get the id
$scope.messages.$add({
message: $scope.newMessageText,
by: $scope.newMessageBy
}).then(function(ref) {
var id = ref.key;
// do with the key what ever you want
})