I am installed firebase logged in as well.
I am getting a completely white screen on importing it.
This is the firebase.js file
import firebase from 'firebase'
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyBb9O35r_N--vwBZNfpxY3vZHzi4wH1oII",
authDomain: "fir-237a1.firebaseapp.com",
projectId: " fir-237a1",
storageBucket: "fir-237a1.appspot.com",
messagingSenderId: "1055799909510",
appId: "1:1055799909510:web:c90fad7d5113500585c507"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = app.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { db, auth, provider };
This is where I am importing firebase, SendMail.js file
import { db } from "./firebase.js"
import firebase from 'firebase';
function SendMail() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const dispatch = useDispatch();
const onSubmit = (formData) => {
console.log(formData);
db.collection('emails').add({
to: formData.to,
subject: formData.subject,
message: formData.message,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
dispatch(closeSendMessage());
};
If the files are one by another the import here:
import { db } from "./firebase.js"
Should be like this:
import { db } from "/firebase.js"
without the ".". If you use the "." the file will be searched in the folder above and that is how it looks like. It wen to the src folder witch is probable above the one where your file is.
Also update your firebase.js file to this:
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyBb9O35r_N--vwBZNfpxY3vZHzi4wH1oII",
authDomain: "fir-237a1.firebaseapp.com",
projectId: " fir-237a1",
storageBucket: "fir-237a1.appspot.com",
messagingSenderId: "1055799909510",
appId: "1:1055799909510:web:c90fad7d5113500585c507",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore();
const auth = getAuth();
const provider = new GoogleAuthProvider();
export { db, auth, provider };
and make sure you use the latest Firebase JS SDK Version 9.x
A just saw that a lot of your code has the old SKD 8 in the repo. You can either stay with that syntax by using the compad version in the new SDK or refactor your code to use the new syntax of SDK version 9. Here is a migration guid.
You need to pick one of those two options. I would recommend to migrate to the new version.
With the new SDK version you don't even need the firebase.js file. Your code would look like this:
import { getFirestore, addDoc, collection } from "firebase/firestore";
function SendMail() {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const dispatch = useDispatch();
const onSubmit = (formData) => {
console.log(formData);
addDoc(collection(db, "emails"), {
to: formData.to,
subject: formData.subject,
message: formData.message,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
};
dispatch(closeSendMessage());
}
Related
I'm trying a email-password authentication with Firebase. I initiated a web app on Firebase followed the Get Started section of web. But I'm getting this error from catch():
[TypeError: undefined is not an object (evaluating 'auth.tenantId')]
My Firebase config:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore"
const firebaseConfig = {
apiKey: "",
authDomain: "spotifymockrn.firebaseapp.com",
projectId: "spotifymockrn",
storageBucket: "spotifymockrn.appspot.com",
messagingSenderId: "",
appId: "",
measurementId: "",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
My SignUp Screen where I call handleFirebase function when SignUp is pressed.Normally use is also saved with AsyncStorage but for simplicity I'm trying like this now:
import { createUserWithEmailAndPassword } from 'firebase/auth';
import auth from '../../../../firebase/firebase'
.
.
const handleFirebase = () => {
createUserWithEmailAndPassword(auth, email, password).then(response => { console.log(response.user); })
.catch((error) => (console.error(error)));
}
I'm getting email, and password from redux store, but I also tried directly writing strings there and got the same error and couldn't find anything online. I tried writing real emails as well as random strings nothing changes. Thank you for reading.
import auth from '../../../../firebase/firebase'
This import would be an object { auth, db } but you need to pass the Firebase Auth instance in createUserWithEmailAndPassword(). Try changing your import as shown below:
// the { }
import { auth, db } from '../../../../firebase/firebase'
Now auth will be the Auth instance.
Getting firebase not defined
This is the code error pic
Here, I want to create subfolders for every push
Picture of my data structure.
In this way, I want to create in firebase.
Help me out.
My full code is
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
import { getDatabase, set, ref, update } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-database.js";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-auth.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyCOpPG9TgRbP5Z5HPAka01JmOuavbA_35U",
authDomain: "ccc-auth-3851a.firebaseapp.com",
databaseURL: "https://ccc-auth-3851a-default-rtdb.firebaseio.com",
projectId: "ccc-auth-3851a",
storageBucket: "ccc-auth-3851a.appspot.com",
messagingSenderId: "75734744670",
appId: "1:75734744670:web:4217d6054687bc7fb3fecf"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
const auth = getAuth();
const number=sessionStorage.getItem('mobile');
console.log(number);
var orders_data = firebase.database().ref("orders");
var order_db=database.ref('orders/');
function placeOrder(){
console.log('Order clicked');
var new_order = order_db.push();
new_order.set('user_details/','order_items/');
}
// var contactFormDB = firebase.database().ref("contactForm");
export { placeOrder };
I'm getting errors when I try to simply load the auth and firestore from firebase.
Error message:
TypeError: (0, _app.initializeApp) is not a function. (In '(0, _app.initializeApp)(firebaseConfig)', '(0, _app.initializeApp)' is undefined)
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: "KEY",
authDomain: "app.firebaseapp.com",
projectId: "app",
storageBucket: "app.appspot.com",
messagingSenderId: "1293821378",
appId: "5647"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = app.auth();
export { db, auth }
Also when I try to import the auth from another file I try this:
import { auth } from '../firebase';
If you are using Firebase version <9.0.0 which only supports name-spaced SDK, then use the older imports only and not the modular syntax. Try refactoring the code as shown below:
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth"
const firebaseConfig = {};
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const auth = firebase.auth();
export { db, auth }
Also makes sure you are referring to Web (name-spaced) tab in the documentation.
I'm creating an app on React that uses Firebase for backend data and want to be able to upload pictures. When trying to get a Storage Ref through firebase, I get the following error:
Every time I try to get a ref to the Storage, I get this error. I also use the realtime-databse on firebase, but I don't think that would interfere at all.
Below is the code that is called:
import database, { auth, provider, storage } from '../../components/utils/firebase.js';
import { uploadBytes } from '#firebase/storage';
...
handleSubmit(e) {
e.preventDefault();
const file = e.target[0].files[0];
console.log("File: ", file);
if (!file) {
console.log("No file!");
} else {
const storageRef = ref(storage, `images/${file.name}`);
uploadBytes(storageRef, file);
console.log("Uploaded file!");
console.log("File: " + file);
}
}
firebase.js (my config file):
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getStorage } from 'firebase/storage';
const firebaseConfig = {
apiKey: process.env.REACT_APP_APIKEY,
authDomain: process.env.REACT_APP_AUTHDOMAIN,
databaseURL: process.env.REACT_APP_DATABASEURL,
projectId: process.env.REACT_APP_PROJECTID,
storageBucket: process.env.REACT_APP_STORAGEBUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
appId: process.env.REACT_APP_APPID,
measurementId: process.env.REACT_APP_MEASUREMENTID
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
export const storage = getStorage(app);
export default database;
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();
Does anyone have any ideas as to why this is happening? Thank you!
I found the issue while watching a video of someone setting up their storage bucket.
Essentially, because I am already using ref for my realtime database, and import that command from the realtime database folder, my storage ref was actually a realtime database ref. To fix this, I imported my storage ref function like so:
import { ref as sRef } from 'firebase/storage';
then used sRef instead of ref.
Hope this helps anyone who had the same issue! It was frustrating to hunt down
I have installed Firebase with npm in Firebase, but I don't know what happens with this error.
File FIREBASE.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyAd2EBoYYCRWEc3oClZTV3Wo-TiQkM2MgQ",
authDomain: "crud-react-26836.firebaseapp.com",
databaseURL: "https://crud-react-26836-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "crud-react-26836",
storageBucket: "crud-react-26836.appspot.com",
messagingSenderId: "741718079918",
appId: "1:741718079918:web:1566301b46c4448c8c703f"
};
// Initialize Firebase
const FIREBASE = initializeApp(firebaseConfig);
export default FIREBASE;
TambahKontak.js
import React, { Component } from 'react'
import { StyleSheet, View, TouchableOpacity, Text, Alert } from 'react-native'
import { InputData } from '../../component'
import { FIREBASE } from '../../config/FIREBASE'
onSubmit = () => {
if (this.state.nama && this.state.nomorHP && this.state.alamat) {
console.log("Masuk Submit");
console.log(this.state);
const kontakReferensi = FIREBASE.database().ref('kontak');
You aren't using the new Modular/Functional syntax which is included from version 9.0.0+. You would have to rewrite your code to follow the new syntax:
import { getDatabase } from "firebase/database"
const dbRef = ref(getDatabase());
const snapshot = await get(child(dbRef, 'kontak'))
If you want to use the existing code (with older syntax) then use compat version by changing the imports to:
import firebase from 'firebase/compat/app'
import 'firebase/compat/database'
import 'firebase/compat/[SERVICE_NAME]'
const FIREBASE = firebase.initializeApp(firebaseConfig);
export default FIREBASE;
I'd recommend using the new version and following the documentation for learning more about it.