I have the following piece of code I'm trying to use to authenticate a newly registered user, although it fails to even initialize firebase, popping up this error:
Uncaught ReferenceError: firebase is not defined
Below is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>register</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.4.2/firebase.js'></script>
</head>
<body>
<script>
var config = {
databaseURL: 'https://apcs-4bfaa.firebaseio.com/'
};
firebase.initializeApp(config);
var ref = new Firebase("https://apcs-4bfaa.firebaseio.com/");
function registerUser() {
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
ref.auth().createNewUserWithEmailAndPassword(email, password);
}
</script>
<div class="form">
<div id="error"></div>
<form onsubmit="registerUser();">
<label>Email:</label>
<input type="text" name="email" id="email"><br>
<label>Password:</label>
<input type="password" name="pwd" id="password"><br>
<input type="submit" value="Sign Up"><br>
</form>
</div>
</body>
</html>
Your code is mixed up between the older 2.4.2 API and the the 3.0 SDK.
There are no more new Firebase() calls. You need to use the new SDK, currently 3.0.3, and then configure your app.
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
storageBucket: '<your-storage-bucket>'
};
firebase.initializeApp(config);
</script>
After configuring you can then create references.
firebase.database().ref()
So in your case it would be:
<script>
var config = {
databaseURL: 'https://apcs-4bfaa.firebaseio.com/'
};
firebase.initializeApp(config);
// new 3.0 SDK method!
var ref = firebase.database().ref();
function registerUser() {
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
firebase.auth().createNewUserWithEmailAndPassword(email, password);
}
</script>
Check out the docs for more info.
Related
I try to build an authentification app with firebase (email & password) but i have problem with firebase methods.
When I call firebase.auth, they said "it's not a function". Is it because my project and firebase SDK are not linked ?
Do you have some suggestions ? :)
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-app.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.6.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "secret",
authDomain: "secret",
databaseURL: "secret",
projectId: "secret",
storageBucket: "secret",
messagingSenderId: "secret",
appId: "secret",
measurementId: "secret"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<!--Stylesheet CSS -->
<link rel="stylesheet" href="../css/main.css">
<title>Inscription</title>
</head>
<body>
<form id="formSignUp" method="POST" onsubmit="signUp()">
<input type="text" id="form_input_mail" name="mail" placeholder="E-mail" size= "30">
<input type="password" id="form_input_password" name="password" placeholder="Mot de passe"
size= "30">
<button type="submit" id="button_orange_center"> Suivant</button>
</form>
<script>
function signUp(){
firebase.auth().createUserWithEmailAndPassword(form_input_mail, form_input_password)
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == 'auth/weak-password') {
alert('The password is too weak.');
} else {
alert(errorMessage);
}
console.log(error);
});
}
</script>
</body>
</html>
Firebase products (eg. Auth) also need to be downloaded from the CDN
<script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-auth.js"></script>
Reference: https://firebase.google.com/docs/web/setup
You need to add firebase auth to the js file:
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-auth.js"></script>
You can check here for all available products to add:
https://firebase.google.com/docs/web/setup#available-libraries
I need help with Realtime Database: I can't send or retrieve data to Firebase from an HTML Page.
HTML:
<head>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyAQqSYXa-TRHGQwx_Cz9mpg2dreT38tq6k",
authDomain: "miparada-e0e6c.firebaseapp.com",
databaseURL: "https://miparada-e0e6c.firebaseio.com",
projectId: "miparada-e0e6c",
storageBucket: "miparada-e0e6c.appspot.com",
messagingSenderId: "331834990091",
appId: "1:331834990091:web:a1a7925f63be5faf"
};
firebase.initializeApp(firebaseConfig);
function writeData() {
firebase.database().ref("User").set({
name: document.getElementById("nameField").value,
age: document.getElementById("ageField").value
});
}
</script>
<h1>User Database</h1>
<input type = "text" placeholder = "name" id = "nameField">
<input type = "text" placeholder = "age" id = "ageField">
<button onclick = "writeData">SUBMIT</button>
</body>
I'm not getting any results.
You're using a partial import of the Firebase SDK, you need to import the real time database as well as stated in the documentation , and call the function properly (with parenthesis).
<head>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<!-- import the real time database SDK -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-database.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyAQqSYXa-TRHGQwx_Cz9mpg2dreT38tq6k",
authDomain: "miparada-e0e6c.firebaseapp.com",
databaseURL: "https://miparada-e0e6c.firebaseio.com",
projectId: "miparada-e0e6c",
storageBucket: "miparada-e0e6c.appspot.com",
messagingSenderId: "331834990091",
appId: "1:331834990091:web:a1a7925f63be5faf"
};
firebase.initializeApp(firebaseConfig)
function writeData() {
firebase.database().ref("User").set({
name: document.getElementById("nameField").value,
age: document.getElementById("ageField").value
});
}
</script>
<h1>User Database</h1>
<input type="text" placeholder="name" id="nameField">
<input type="text" placeholder="age" id="ageField">
<!-- call the function with parenthesis -->
<button onclick="writeData()">SUBMIT</button>
</body>
Hope it helps ;)
Also: watch out for the security rules, right now anybody can read/write anything in your database.
Add this line of code right after the script block
<!-- import the real time database SDK -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-database.js"></script>
because you didn't connect the real time database to your program
android database is create and i want to authenticate it using html page.
it is not working code is given below.
here basically we have a html login page and script to authenticate it from fire-base database.provide with the solution code or what's wrong with my code or something missing in it.
<!DOCTYPE html>
<html>
<head>
<!-- /////////////////firebase method ///////////////////// -->
<title>
the login form
</title>
<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-messaging.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBgFUWzUrmLXVuKtGtChe2I2zvf5sYga54",
authDomain: "skool-1083c.firebaseapp.com",
databaseURL: "https://skool-1083c.firebaseio.com",
projectId: "skool-1083c",
storageBucket: "skool-1083c.appspot.com",
messagingSenderId: "911580445409"
};
firebase.initializeApp(config);
</script>
</head>
<body>
<h1>Admin Login</h1>
<form class="form" action="new_blank">
<input type="text" placeholder="username" id="email"autofocus><br>
<input type="password" placeholder="pasword" id="password" ><br></br>
<input type="submit" value="login" id="sign-in">
<br>
</form>
<!-- ///////////////stylesheet///////////// -->
<script>
document.querySelector('#sign-in').addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
var email = document.querySelector('#email').value;
var password = document.querySelector('#password').value
var credential = firebase.auth.EmailAuthProvider.credential(email, password);
window.alert(credential);
var auth = firebase.auth();
var currentUser = auth.currentUser;
// Step 2
// Get a credential with firebase.auth.emailAuthProvider.credential(emailInput.value, passwordInput.value)
// If there is no current user, log in with auth.signInWithCredential(credential)
// If there is a current user an it's anonymous, atttempt to link the new user with firebase.auth().currentUser.link(credential)
// The user link will fail if the user has already been created, so catch the error and sign in.
});
</script>
</body>
</html>
If you want to sign in user with email+password on Firebase Authentication, follow the documentation here. From there, the example to sign in is:
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
To detect when a user signs in, follow the documentation here. From there:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
} else {
// No user is signed in.
}
});
implement firebase auth in app/build.gradle
implementation 'com.google.firebase:firebase-auth:18.1.0'
implementation 'com.google.firebase:firebase-database:18.0.1'
use enterd user id and password with this function
private void login() {
FirebaseAuth firebaseAuth=FirebaseAuth.getInstance();
firebaseAuth.signInWithEmailAndPassword(usrId, usrPass).addOnCompleteListener(loginActivity.this, new OnCompleteListener() {
#Override
public void onComplete(#NonNull Task task) {
if (!task.isSuccessful()) {
Toast.makeText(loginActivity.this, "Not sucessfull", Toast.LENGTH_SHORT).show();
} else {
startActivity(new Intent(loginActivity.this, MainActivity.class));
}
}
});
I tried this code for making Firebase phone number authentication:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Firebase Phone Number Auth
</title>
</head>
<body>
Updated
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
authDomain: "groupinger-users.firebaseapp.com",
databaseURL: "https://groupinger-users.firebaseio.com",
projectId: "groupinger-users",
storageBucket: "groupinger-users.appspot.com",
messagingSenderId: "432661298034"
};
firebase.initializeApp(config);
</script>
<script>
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign- in-button', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
}); firebase.auth().signInWithPhoneNumber("+91XXXXXXXXXX", window.recaptchaVerifier)
.then((confirmationResult) => {
// At this point SMS is sent. Ask user for code.
alert('A confirmation message was just sent.');
var code = window.prompt('Please enter the 6 digit code');
return confirmationResult.confirm(code);
}).then((result) => {
console.log(result);
// User is now signed in and accessible via result.user.
}).catch((error) => {
// Error occurred.
});
</script>
</body>
</html>
But it's not working.
I'm a real newbie on Firebase. Please somebody help.
(Note: you can also test it on Localhost.)
The code is live at https://GroupinGer.cu.ma/ph/
Also, I would like to show the user data(Phone number, UID etc.) In another file called details.html.
I tried this code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Logged in</title>
</head>
<body>
Your details are shown below.
<br>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
authDomain: "groupinger-users.firebaseapp.com",
databaseURL: "https://groupinger-users.firebaseio.com",
projectId: "groupinger-users",
storageBucket: "groupinger-users.appspot.com",
messagingSenderId: "432661298034"
};
firebase.initializeApp(config);
</script>
<script>
var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);
alert(credential);
alert('nope.');
</script>
</body>
</html>
Please have a look at it too.
Again, thanks a lot.
First of all, you need to initialize a recaptchaVerifier like this:
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-
in-button', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
});
Second, your code has syntax error. Try the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Firebase Phone Number Auth</title>
</head>
<body>
<form>
<input type="text" id="verificationcode" value="enter verification">
<input type="button" value="Submit" onclick="myFunction()">
</form>
<div id="recaptcha-container"></div>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script type="text/javascript">
// Initialize Firebase
var config = {
apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
authDomain: "groupinger-users.firebaseapp.com",
databaseURL: "https://groupinger-users.firebaseio.com",
projectId: "groupinger-users",
storageBucket: "groupinger-users.appspot.com",
messagingSenderId: "432661298034"
};
firebase.initializeApp(config);
</script>
<script type="text/javascript">
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
firebase.auth().signInWithPhoneNumber("replace with your phone number with country code, start with +1 if US.", window.recaptchaVerifier)
.then(function(confirmationResult) {
window.confirmationResult = confirmationResult;
console.log(confirmationResult);
});
var myFunction = function() {
window.confirmationResult.confirm(document.getElementById("verificationcode").value)
.then(function(result) {
console.log(result);
}).catch(function(error) {
console.log(error);
});
};
</script>
</body>
</html>
For more details, you can refer to the phone auth part of firebase auth doc.
https://firebase.google.com/docs/auth/web/phone-auth
I am trying to learn firebase. But i am unable to save my input to the firebase database because it is not getting initialized even after adding all the required script that I know. Here is my entire code
PS: authentication to my database was also turned off for learning purpose. So it must not be any issue with authentication.
<!DOCTYPE html>
<html>
<head>
<title>Learning Firebase</title>
<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script type="text/javascript">
var config = {
apiKey: "xxxxxxxx",
authDomain: "xxxxxxxx",
databaseURL: "xxxxxxx",
projectId: "xxxxxx",
storageBucket: "xxxxxxx",
messagingSenderId: "xxxxxxx"
};
firebase.initializeApp(config);
var text=documentgetElementById('text').value;
function validate(){
var database=firebase.database().ref();
database.child("text").set(text);
}
</script>
</head>
<body>
<form onsubmit="validate();">
Text:<input type="text" id='text'/>
<input type='submit' value='save'/>
</form>
</body>
Your problem is not with your Firebase code, it is about your JavaScript code. Replace this code below and try it again:
<!DOCTYPE html>
<html>
<head>
<title>Learning Firebase</title>
<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script type="text/javascript">
var config = {
apiKey: "xxxx",
authDomain: "xxxx",
databaseURL: "xxxx",
projectId: "xxxx",
storageBucket: "",
messagingSenderId: "xxxx"
};
firebase.initializeApp(config);
function validate(){
var yourNewChildValue=document.getElementById('text').value;
var database=firebase.database().ref();
database.child("yourNewChildKey").set(yourNewChildValue);
}
</script>
</head>
<body>
<form>
Text:<input type="text" id='text'/>
<input type='button' onclick="validate();" value='save'/>
</form>
</body>
It must be save your data to Firebase database if your credentials are true. Please let me know.