I'm trying to use Firebase to allow users to create accounts and sign in to a chat app. I've copy-pasted the code on Firebase's console to add a web app and have followed the docs for creating a user account with email and password. THe docs say to pass email and password to their function firebase.auth().createUserWithEmailAndPassword(email, password), and although I've done the integration properly thus far, my IDE says that createUserWithEmailAndPassword(email, password) is an unresolved method. I am working in a separate JS file called main.js, with the required JS files from Firebase in <script> tags above the tag that links main.js to index.html.
function submitAcc() {
var email = document.getElementById("emailinput").value;
var password = document.getElementById("passinput").value;
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function (error) {
console.log(error.log);
console.log(error.message);
});
}
is the problematic function in main.js and here
<script>
// Initialize Firebase
var config = {
apiKey: "censored",
authDomain: "censored",
databaseURL: "censored",
projectId: "censored",
storageBucket: "censored",
messagingSenderId: "censored"
};
firebase.initializeApp(config);
</script>
<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-app.js"></script>
<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-functions.js"></script>
<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.8.5/firebase-storage.js"></script> -->
<!-- <script src="main.js" rel="script"></script> -->
<script src="main.js"></script>
are the Firebase script tags copy-pasted from what the docs tell me to do. It's only firebase.auth() that doesn't work; we tried firebase.database().ref() to test and that works fine.
As it turns out, there WAS no error, instead it was simply the IDE that had a problem. Upon testing the function performed as intended. For anyone else that has this error, try making an account as you would if you were a user and then checking the users under firebase > auth. This error occurred with the JetBrains WebStorm IDE.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
Stuck for days now.
Codes are literally copied from the google firebase documentation.
All I want is just write and read data on firestore in firebase console.
Firebase (Firestore) Javascript Keep showing error.
Can anyone help me with code? I don't need fancy code or whatever. Just write and read from firestore that's it.
<!DOCTYPE html>
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
</head>
<body>
<script>
// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"
// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";
// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";
// TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
apiKey: "******",
authDomain: "retest-5308a.firebaseapp.com",
databaseURL: "https://retest-5308a-default-rtdb.firebaseio.com",
projectId: "retest-5308a",
storageBucket: "retest-5308a.appspot.com",
messagingSenderId: "125780245080",
appId: "1:125780245080:web:530259dc2a4b1362aae82d",
measurementId: "G-PNTZS15X9K"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");
// Initialize Cloud Firestore through Firebase
firebase.initializeApp({
apiKey: "********",
authDomain: "retest-5308a.firebaseapp.com",
projectId: "retest-5308a"
});
var db = firebase.firestore();
db.collection("users").add({
first: "Ada",
last: "Lovelace",
born: 1815
})
.then((docRef) => {
console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
console.error("Error adding document: ", error);
});
</script>
</body>
</html>
You cannot use import firebase from "firebase/app"; inside a script tag in an HTML page.
Instead you should import those SDKs though their own script tags, as you've already done for <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"> and firebase-firestore.js.
Once you've added the SDKs through script tags, the imports are no longer needed.
Here is the whole html and javascript code.
After submiting also my firebase is not showing anydata plzz help....
Enter any number
enter e-mail
enter nick-name
Submit
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.17.1/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.17.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyALexu52pRX3m0nL92qSNcl9t2ohhIzAS4",
authDomain: "just-demo-373a2.firebaseapp.com",
databaseURL: "https://just-demo-373a2.firebaseio.com",
projectId: "just-demo-373a2",
storageBucket: "just-demo-373a2.appspot.com",
messagingSenderId: "834837235468",
appId: "1:834837235468:web:f3dbef999d51d15612ab29",
measurementId: "G-FEJBSGENTD"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
Here is the javascript.
function button(){
firebase.database().ref("user").set({
userid:document.getElementById("userID").value,
useremail:document.getElementById("email").value,
username:document.getElementById("name").value
});
}
what should I do?
I created a fiddle for this at: https://jsfiddle.net/raddevus/sqm3og1r/5/
When I click the Test button (I added) I see an error in the console that states:
firebase.database is not a function
Is that a valid call. The initialize seems to be running, but not that database call.
I recently started integrating firebase into my html project, i installed firebase-tools using npm and initialized the project, but then after I included all the scripts mentioned on the firebase website, I used firebase.auth() to sign in the user, then I got an error that firebase is undefined, so I inserted these script tags into my code:
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/firebase/init.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-firestore.js"></script>
and below these I had my firebase config:
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "MY_API_KEY",
authDomain: "MY_PROJECT.firebaseapp.com",
databaseURL: "https://MY_PROJECT.firebaseio.com",
projectId: "MY_PROJECT",
storageBucket: "MY_PROJECT.appspot.com",
messagingSenderId: "MESSAGER_ID",
appId: "MY_APP_ID",
measurementId: "MEASUREMENT_ID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
async function signIn(email, password){
await firebase.auth().signInWithEmailAndPassword({
email,
password
}).then(() => {window.location.href = "HomeScreen.html"}).catch((err) => {
document.getElementById('FailedSignIn').style.display = "flex";
})
}
</script>
And then I got these errors:
[2020-03-30T17:24:20.332Z] #firebase/app: Warning: Firebase is already defined in the global scope. Please make sure Firebase library is only loaded once.
Website.htmlAccess to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/MY_PROJECT/installations' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
https:/…base-analytics.js:1POST https://firebaseinstallations.googleapis.com/v1/projects/MY_PROJECT/installations net::ERR_FAILED
TypeError: Failed to fetch
So I would really appreciate some clarification of the ordering of these script tags, as well as how to properly initialize firebase and use it in my file without any errors.
After you’ve created your account and the Firebase project, all you need to do is add the JavaScript code to your HTML, as described in the Setup Docs
<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
// Get a reference to the database service
var database = firebase.database();
// update the variable when the starCount is changed in the database
var starCountRef = database.ref('posts/' + postId + '/starCount');
starCountRef.on('value', function(snapshot) {
updateStarCount(postElement, snapshot.val());
});
// update the UI
function updateStarCount(el, val) {
el.innerHtml(`${val} Stars!`);
}
</script>
Then you can continue to learn about Realtime Database here
The Javascript/Node.JS SDK is introduced here.
How do you start your local web-server at http://localhost:63342?
Maybe you just have to start your web-server with using CORS request headers for external requests.
Example:
yarn serve --cors
I've used firebase in the past for a few projects and config has been super easy. I'm experiencing issues with the new version of firebase - and keep getting a TypeError
saying firebase.database() is not a function
Here are the script tags at the bottom of the body section in my HTML:
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="assets/app.js"></script>
and my JS config looks like this:
var firebaseConfig = {
apiKey: apiKey,
authDomain: authDomain,
databaseURL: dbURL,
projectId: id,
storageBucket: sb,
messagingSenderId: msid,
appId: appId
};
firebase.initializeApp(firebaseConfig);
var database = firebase.database()
The issue is not in the config because firebase.initializeApp works fine - but I cant seem to find any updates to the official docs that would explains why firebase.database() doesn't seem to work anymore.
Okay was able to figure this out on my own...
I only imported the basic firebase script:
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
BUT I also needed to import the developmental firebase SDK to give me access to the realtime database functionality, hence why firebase.database() wasn't working. So I had to import a new script after the one referenced above:
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase.js"></script>
Database functions seems to be working fine now.
I'm just trying to get simple email/password authentication working. As a test, trying to just create users. It's not working, when clicking the button to pass some hard-coded email/password vars to auth, I get this console error below. As far as I understand I should be able to do this from client-side without having to set up any server. I also have firebase email/password authentication enabled in firebase console.
{
"error": {
"errors": [
{
"domain": "usageLimits",
"reason": "accessNotConfigured",
"message": "Access Not Configured. Google Identity Toolkit API has not been used in project 87795057294 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/identitytoolkit.googleapis.com/overview?project=87795057294 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.",
"extendedHelp": "https://console.developers.google.com/apis/api/identitytoolkit.googleapis.com/overview?project=87795057294"
}
],
"code": 403,
"message": "Access Not Configured. Google Identity Toolkit API has not been used in project 87795057294 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/identitytoolkit.googleapis.com/overview?project=87795057294 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry."
}
}
Though I did check and Google Identity Toolkit API is enabled
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Firebase Auth Test</title>
<!-- Firebase JavaScript Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-database.js"></script>
</head>
<body>
<!-- JQuery -->
<!-- ================================================================================== -->
<script>
$(document).ready(function() {
// Initialize Firebase
// This is the code we copied and pasted from our app page
var config = {
apiKey: "AIzaSyBJOZIBC9J3MUfkLfXGKgvaNYxilplQ7fI",
authDomain: "project1-e7460.firebaseapp.com",
databaseURL: "https://project1-e7460.firebaseio.com",
projectId: "project1-e7460",
storageBucket: "project1-e7460.appspot.com",
messagingSenderId: "87795057294"
};
firebase.initializeApp(config);
var email = "geochanto#yahoo.com";
var password = "Abc1234!";
// Get a reference to the database service
var database = firebase.database();
var clickCounter = 0;
$("#clickme").on("click", function() {
console.log('clicked!');
clickCounter++;
database.ref().set({
clickCount: clickCounter,
em: email,
pa: password
});
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
});
});
</script>
<button id="clickme">Click Me</button>
</body>
</html>
You need to login to your Firebase Console and enable the Sign-In Method.
See the point 3 of the Before You Begin section in the Authentication documentation.
Enable Email/Password sign-in:
In the Firebase console, open the Auth section.
On the Sign in method tab, enable the Email/password sign-in method and click Save.
Then try again - it should work once enabled.