Firebase authentication on React Native auth.tenandId error - javascript

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.

Related

ERROR in Module not found: Error: Package path . is not exported from package

Firebase.js:
import firebase from "firebase";
const firebaseConfig = {
apiKey: <<API_KEY>>,
authDomain: "fir-42683.firebaseapp.com",
projectId: "fir-42683",
storageBucket: "fir-42683.appspot.com",
messagingSenderId: "950284829228",
appId: "1:950284829228:web:f9e6862d17650cfca38789",
measurementId: "G-VWT1P7ES8S"
};
export const db = firebase.initializeApp(firebaseConfig)
App.js
import {db } from './Firebase'
I wrote just a simple code for read data from firebase. but now, iam stuck on this error, what will i do.
ERROR in ./src/Firebase.js 3:0-32 Module not found: Error: Package path . is not exported from package D:\BROCAMP\Week 15\olx\node_modules\firebase (see exports field in D:\BROCAMP\Week 15\olx\node_modules\firebase\package.json)
The problem is const db = firebase.initializeApp(firebaseConfig)
You missed one step, this is actually const app = firebase.initializeApp(firebaseConfig)
Consider this hook which can get your db:
useGetFirestore.ts
import { getApp } from 'firebase/app';
import { getFirestore, Firestore } from 'firebase/firestore';
const useGetFirestore = (): Firestore => {
const app = getApp();
return getFirestore(app);
};
export default useGetFirestore;
The code you are calling db is actually app and that code just needs to run at the top of your app before anything:
const app = initializeApp(firebaseConfig);
Sometimes you only need this:
initializeApp(firebaseConfig);

Firebase Module not found: Can't resolve '../firebase' in '/vercel/path0/components' during deployment

I was trying to deploy my application that uses firebase on Vercel. But it gives `Module not found: Can't resolve '../firebase' in '/vercel/path0/components', in development this works.
My firebase.js
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_PROJECTID,
storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_APP_ID,
measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { auth, db, provider };
I am import auth, db and provider where ever I want to use them.
Here is one of the file where this error occurs.
import { auth } from "../firebase";
const Sidebar = () => {
const [user] = useAuthState(auth);
I guess the error is at import { auth } from "../firebase"; part.
Is there any way to fix this? Help would be appreciated.

React Native import firebase 'auth' and 'firestore'

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.

Module not found: Can't resolve 'firebase' in 'D:\gmail-react\src'

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());
}

Vue.js - Function DocumentReference.set() called with invalid data. Unsupported field value: undefined

I'm using Vue.js and firestore to make a landing page for my project, I've tried to make a registration form to make new account for my website.
I've created a collection in my firebase project, named "users", where the user information where stored when the sign up completed. But when I call the function, the error appeared:
Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field handle in document users/XcAx6dK1rmZSeoQQO9p3K6kAW3e2)
What can I do? I'll share my code here:
Signup.vue
import { Auth, db, usersCollection } from '#/firebase/auth.js'
import * as fb from 'firebase'
import {App} from '#/firebase/app.js'
async addEmail(email,password) {
var noticeMessage = "🎉 Your account has been reserved 🎉"
const {user} = await Auth.createUserWithEmailAndPassword(email, password )
await usersCollection.doc(user.uid).set({
email: email,
password: password,
userId: user.uid,
createdAt: new Date().toISOString(),
})
auth.js
import {App} from './app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
export const Auth = App.auth();
export const db = App.firestore();
export const usersCollection = db.collection('users')
app.js
import Firebase from 'firebase/app'
import credentials from './credentials'
export const App = Firebase.initializeApp(credentials.config);

Categories