Trying to add the Firebase script in my html, after initializing Firebase app with firebase.initializeApp(config);.
So then I have this :
<script>
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button',
{
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
});
</script>
Which provides the error :
firebase.auth.RecaptchaVerifier is not a constructor error
How to solve this error (found similar questions without a direct answer)
How to proceed from here with the full flow ?
EDIT:
I have this in the beginning of the html :
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
I am initializing the app with :
<script>
var config = {
apiKey: "AIzaSxxxxxxxxxxxxxxxZQ14",
authDomain: "xxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxx.firebaseio.com",
projectId: "xxxxxx",
storageBucket: "xxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxx"
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({timestampsInSnapshots:true});
</script>
and those are the only things relate to Firebase I have in this file.
Solved by changing version of the imported files with : (thanks a lot Frank)
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-functions.js"></script>
Related
error that i'm getting:
Uncaught TypeError: Failed to resolve module specifier
"firebase/database". Relative references must start with either "/",
"./", or "../".
i am trying to setup firebase configuration for the latest version of firebase 9.1
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js";
const firebaseConfig = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "....",
appId: "..."
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
//below import statement is causing the error
import { getDatabase, ref, set } from "firebase/database";
const db = getDatabase();
</script>
<script type="text/javascript" >
function InsertData() {
set(ref(db, 'TheStudent/'+rollV), {
NameOfStudent: "abc",
RollNo: 13,
Section: "B",
Gender: "Male"
});
}
document.getElementById('insertBtn').onclick = InsertData;
</script>
PS. i have hidden the config on purpose, so thats not the problem.
It seems you are using Firebase SDK over CDN so try importing database in same way:
import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js";
// CDN URL instead of "firebase/database"
I am just getting started using firebase and I keep getting an error. It says it is on line thirty one. Thanks in advance! I am a beginner to firebase. I am interediate at javascript. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>firebase</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.3/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.14.3/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXX",
databaseURL: "XXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXX",
measurementId: "XXXXXXXXXXXXX"
};
rules_version = '2';
// Grants a user access to a node matching their user ID
service firebase.storage {
match /b/{bucket}/o {
// Files look like: "user/<UID>/path/to/file.txt"
match /user/{userId}/{allPaths=**} {
allow read, write: if request.auth.uid == userId;
}
}
}
</script>
<script>
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
</script>
</body>
</html>
I added a sign-in method for Google on my webpage from Firebase and got a redirect to login with Google successfully. The problem is, after logging in I can't see any of the users in Authentication Section of Firebase. Please help.I've been stuck on this for very long.
Here is the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<button type="button" id="googlebtn" onclick="GoogleLogin();">Google</button>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.6.2/firebase.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.2/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyA4SJ-R5AK6YUd4Z1hXXQBH-UGb0pLi8ug",
authDomain: "oshop-c2ca6.firebaseapp.com",
databaseURL: "https://oshop-c2ca6.firebaseio.com",
projectId: "oshop-c2ca6",
storageBucket: "oshop-c2ca6.appspot.com",
messagingSenderId: "1089602124550",
appId: "1:1089602124550:web:4607bbd77cffa950eebc87",
measurementId: "G-64Z9HFJD92"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="google.js" type="text/javascript"></script>
</body>
</html>
google.js file:
function GoogleLogin(){
var provider=new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithRedirect(provider).then(function(){
window.location="index.html";
}).catch(function(error){
var errorMessage=error.message;
alert(errorMessage);
})
}
Where do I put the firebase initial code that is responsable to give the keys? Before the html tag closes? or before the body tag closes?
Here is the code:
<script src="https://www.gstatic.com/firebasejs/4.7.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "jsdfiojsifjsiodfjiosfiosdfsj",
authDomain: "dribbbleapi.firebaseapp.com",
databaseURL: "https://dribbbleapi.firebaseio.com",
projectId: "dribbbleapi",
storageBucket: "dribbbleapi.appspot.com",
messagingSenderId: "931058019229"
};
firebase.initializeApp(config);
You have to add it before the body tag closes like this:
<!doctype html>
<html>
<body>
...
<!-- Import and initialize the Firebase SDK -->
<script src="/__/firebase/3.7.4/firebase-app.js"></script>
<script src="/__/firebase/3.7.4/firebase-auth.js"></script>
<script src="/__/firebase/init.js"></script>
<script>
// The Firebase SDK is ready to rock!
firebase.auth().onAuthStateChange(function(user) { /* … */ });
</script>
</body>
</html>
So inside a script tag then close body and close html tag
I am refactoring some code so that different javascript modules in different js files can use the same Firebase instance. I also want to eliminate the possibility of race conditions as different modules are loaded.
I believe that these are the steps that I would need to follow in order to avoid a race condition:
Load firebase.js
Initialize firebase prototype with authentication
Execute external JS files module1.js and module2.js
In code this will roughly translate to the following:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.1/firebase.js"></script>
<script type="text/javascript">
if (firebase.apps.length === 0) {
firebase.initializeApp({
apiKey: "<REMOVED>",
authDomain: "<REMOVED>",
databaseURL: "<REMOVED>",
storageBucket: "<REMOVED>",
messagingSenderId: "<REMOVED>"
});
}
firebase.auth().signOut().then(function () {
var customTokenUrl = "<REMOVED>";
$.ajax({
url: customTokenUrl,
data: {},
xhrFields: {withCredentials: true},
crossDomain: true,
success: function (token) {
firebase.auth().signInWithCustomToken(token);
},
type: 'POST'
});
});
</script>
<script src="someurl/module1.js"></script>
<script src="someurl/module2.js"></script>
This is roughly the code for both module1.js and module2.js:
var module1 = (function (MODULE) {
...
...
firebase.auth().onAuthStateChanged(MODULE.onAuthStateChanged.bind(MODULE));
function onAuthStateChanged(user) {
if (user) {
// User is signed in.
MODULE.uid = user.uid;
setWatchers(); // This is where I set the firebase refs
}
}
return MODULE;
}
Here are the questions I have:
In module1.js, is there a possibility that onAuthStateChanged won't fire? I think that, theoretically, module1.js can execute after the auth state changed in firebase. Wouldn't that make the onAuthStateChanged method not fire?
Can the var firebase ever be undefined in module1.js?