How to initialize firebase in vite and vue? - javascript

I am new in vite. I am trying to initialize the firebase app. but I am getting errors like below
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()
I created a file name firebase.ts but i am not really sure where can i include this to initialize firebase globally.
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useHead } from '#vueuse/head'
import { isDark } from '/#src/state/darkModeState'
import useNotyf from '/#src/composable/useNotyf'
import sleep from '/#src/utils/sleep'
import { getAuth, signInWithEmailAndPassword } from '#firebase/auth'
const isLoading = ref(false)
const router = useRouter()
const notif = useNotyf()
const username = ref('')
const password = ref('')
const handleLogin = async () => {
if (!isLoading.value) {
isLoading.value = true
signInWithEmailAndPassword(getAuth(), username.value, password.value)
.then((user) => {
isLoading.value = false
router.push({ name: 'sidebar-dashboards-course' })
})
.catch((err) => {
isLoading.value = false
notif.error(
'There is no user record corresponding to this identifier. The user may be deleted'
)
})
}
}
Any solution appreciated!

In your firebase.ts, you are initializing Firebase using the compat version (that let's you use the name-spaced syntax even in V9) but you are trying to use the Modular version in your Vue components. Instead, try initializing Firebase using modular SDK as well. So the firebase.ts should look like:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
const firebaseConfig = {...};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);
export { auth, db, storage };
Then try importing these instances in your components instead of using get[Service]() functions again.
import { auth } from "../path/to/firebase.ts" // update the path as per your dir structure
// usage: instead of getAuth() here
await signInWithEmailAndPassword(auth, username.value, password.value)

Related

How to split files that utilise Firebase into separate files for Webpack

I have decided to convert my project to use Webpack as it was getting pretty messy and I'm struggling to have multiple js files for each part of the app (member, plan, auth, etc) that uses Firebase in some way (functions, database, auth, etc). It seems evverything needs to be in index.js to work.
I always get a (different) weird error that relates to Firebase not be accessible from the index.js file.
How do I structure this so that I can use Firebase in multiple files and then bundle into one with Webpack at the end?
Here's what I have:
index.js
import $ from 'jquery';
import mixpanel from 'mixpanel-browser';
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";
const firebaseConfig = {
...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const analytics = getAnalytics();
const auth = getAuth();
// Javascript
import './js/auth.js';
import './js/members.js';
// Styles
import './scss/fonts.scss';
import './scss/auth.scss';
import './scss/main.scss';
import './scss/navbar.scss';
import './scss/buttons.scss';
import './scss/inputs.scss';
...
members.js
import { getFunctions, httpsCallable } from "firebase/functions";
const functions = getFunctions();
const listMembers = httpsCallable(functions, 'listMembers');
listMembers()
.then((result) => {
const data = result.data;
const sanitizedMessage = data.text;
console.log(sanitizedMessage);
})
.catch((error) => {
const code = error.code;
const message = error.message;
const details = error.details;
});

FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options)

I have created a Next.js application and am using Firebase authentication. I have used the useContext hook for managing user state across my application.
The code for the AuthContext is as follows:
auth.js
import { createContext, useState, useEffect, useContext } from "react";
import { getAuth, onIdTokenChanged } from "firebase/auth";
const AuthContext = createContext({});
export const AuthProvider = ({children}) => {
const auth = getAuth();
const [user, setUser] = useState(null);
useEffect(() => {
return(onIdTokenChanged(auth, (user) => {
if(user) {
setUser(user);
} else {
setUser(null);
}
}))
},[]);
return(<AuthContext.Provider value={{user}}>{children}</AuthContext.Provider>);
}
export const useAuth = () => useContext(AuthContext);
However, I'm getting the following error in the auth.js file:
I am not able to understand how to fix it.
Also, I want to know if using useContext() hook is better for route protection as opposed to storing user session cookies in the browser and verifying it from there.
Edit:
I have configured Firebase in firebaseConfig.js. The code for it is as follows:
firebaseConfig.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
I was just getting the same error, I managed to fix this by doing:
import { initializeApp } from 'firebase/app';
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
const firebaseConfig{
...
}
And adding these lines like that:
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore();
export { auth, db };
Initialize app like Marcos Oliveira said, with error handling:
try
{
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
} catch(error) {
console.log('Error:', error)
}
For anyone still dealing with this issue, my solution was to re-order my imports in the App.js.
For some reason, the components I imported needed to be in a specific order. Otherwise, the same error is thrown.
I did solve the problem by:
first I created a firebaseConfig.js file and put my configs and exported auth
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: "AIzaSyAzlY091r0Ihxxxxxx5F8",
authDomain: "mealxxxxxc.firebaseapp.com",
projectId: "mealxxxxxc",
storageBucket: "meaxxxxxpot.com",
messagingSenderId: "10xxxx00",
appId: "1:1092909165400:web:532xxxxx32d",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
then in authContext.js, I imported auth from firebaseConfig.js
import React, { useState, createContext } from "react";
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "../firebaseConfig";
export const AuthenticationContext = createContext();
export const AuthenticationContextProvider = ({ children }) => {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [user, setUser] = useState(null);
const onLogin = (email, password) => {
setIsLoading(true);
signInWithEmailAndPassword(auth, email, password)
.then((userData) => {
setUser(userData.user);
setIsLoading(false);
console.log("userData", userData.user);
})
.catch((er) => {
setIsLoading(false);
setError(er.toString());
console.log(er.message.toString());
});
};
So, for me, that error came about when I had all my firebase configurations on separate page/file (Firebase.js) including the following:
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);
export const storage = getStorage(app);
So, the initial setup for Firebase was okay.
However, I also had a separate page/file (App.js) where I called createUserWithEmailAndPassword(auth, email, password) as well as other built-in Firebase auth methods...
But, I forgot to import app from Firebase.js and that error popped up after I called createUserWithEmailAndPassword.
Once I did imported app, the error went away.
the problem is with the app object which is not getting initialized before the context provider render's
You should import the 'app' from firebaseConfig.js or whatever.js file your firebase configuration is in, into your Context file.
Note: make sure you are exporting the app from the configuration file
import { app } from 'location/to/firebaseConfig.js';
and in useEffect check for the 'app' if it exists then run the firebase-specific functions afterward and also add the 'app' to the dependency array.
useEffect(() => {
if (app) {
//enter firebase-specific code here
// for example:
onAuthStateChanged(auth, (user) => {
});
}
}, [app]);
you just need to export firebase conifgurations as app or any other type and re import it inside the page you are working on.
for me it was like this
`import { getAuth,signInWithEmailAndPassword } from "firebase/auth";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
function SignInPage(){
const auth=getAuth();
const SignIn=()=>{
signInWithEmailAndPassword(auth,email,password)
.then((userCredentials)=>{
const user =userCredentials.user;
console.log(user);
alert("successfully loged a user")
})
.catch((error)=>{
const errorCode=error.code;
const errorMessage=error.message;
alert(errorCode,errorMessage);
});
}
const [email,setEmail]=useState("")
const [password,setPassword]=useState("")
return(
<div className="main">
<input type={"email"} placeholder="Email" onChange=
{(e)=>setEmail(e.target.value)}/>
<input type={"password"} placeholder="Password" onChange=
{(e)=>setPassword(e.target.value)}/>
<button onClick={()=>SignIn(email,password)}>Create Account</button>
</div>
)}
export default SignInPage;`

Nuxt 3 firebase plugins erros Component auth has not been registered yet

In my project under plugins dir I have a single plugins called firebase.ts and it's look like this
import { defineNuxtPlugin } from "#app";
import { firebaseConfig } from "#/firebaseConfig";
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
export default defineNuxtPlugin((nuxtApp) => {
// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const firebaseAuthInstance = getAuth(firebaseApp);
})
Whenever I run my project it's give this kind of error. But if I make the plugin client only i mean firebase.client.ts then it work just fine. But I want to get this pluin both in client and server side. How to achive that?
[h3] [unhandled] H3Error: Component auth has not been registered yet
at createError (file:///home/riyad/Desktop/nuxt-test/node_modules/h3/dist/index.mjs:238:15)
at Server.nodeHandler (file:///home/riyad/Desktop/nuxt-test/node_modules/h3/dist/index.mjs:428:21) {
statusCode: 500,
fatal: false,
unhandled: true,
statusMessage: 'Internal Server Error'
}
[nuxt] [request error] Component auth has not been registered yet
at createError (./node_modules/h3/dist/index.mjs:238:15)
at Server.nodeHandler (./node_modules/h3/dist/index.mjs:428:21)
Firebase libraries use browser cache to store data on client side, so you cannot load some of their libraries on server side. Auth library is used and works only on client site, same as all lib's with no /lite end. To be able to use library Firestore on server, import all functions from 'firebase/firestore/lite' file path.
Example of plugin:
import { defineNuxtPlugin } from '#app'
import { initializeApp, getApps } from 'firebase/app'
import { connectFirestoreEmulator as connectFirestoreEmulatorServer, getFirestore as getFirestoreServer } from 'firebase/firestore/lite'
import { connectAuthEmulator, getAuth } from "firebase/auth"
import { connectDatabaseEmulator, getDatabase } from "firebase/database"
import { connectFirestoreEmulator, getFirestore } from "firebase/firestore"
import { connectFunctionsEmulator, getFunctions } from "firebase/functions"
import { connectStorageEmulator, getStorage } from "firebase/storage"
export default defineNuxtPlugin((nuxtApp) => {
const firebaseConfig = { ...useRuntimeConfig().public.firebaseConfig }
if (!getApps().length) {
initializeApp(firebaseConfig)
}
// Code bellow allows to work with local emulators you can delete it if you work without emulators
const firestoreHost = getFirestoreServer().toJSON()['settings'].host
if(process.dev && firestoreHost !== 'localhost:8080') {
connectFirestoreEmulatorServer(getFirestoreServer(), 'localhost', 8080)
}
if (process.dev && process.client) {
connectAuthEmulator(getAuth(), "http://localhost:9099")
connectFirestoreEmulator(getFirestore(), "localhost", 8080)
connectDatabaseEmulator(getDatabase(), "localhost", 9000)
connectStorageEmulator(getStorage(), "localhost", 9199)
connectFunctionsEmulator(getFunctions(), "localhost", 5001)
}
})
Usage:
<template>
<div>
<button #click="signIn">Sign In</button>
<p>{{ data.test.title }}</p>
<p>User email: {{userEmail}}</p>
</div>
</template>
<script setup lang="ts">
import { getAuth, OAuthProvider, signInWithPopup } from 'firebase/auth';
import { doc, getDoc, getFirestore } from 'firebase/firestore/lite';
const data = reactive({ test: null })
const userEmail = ref('')
const result = await getDoc(doc(getFirestore(), 'test/test'))
if (result.exists()) data.test = result.data()
if (process.client) {
const userCredentials = await signInWithPopup(getAuth(), new OAuthProvider('google.com'))
if (userCredentials.user) userEmail.value = userCredentials.user.email
}
async function signIn() {
const userCredentials = await signInWithPopup(getAuth(), new OAuthProvider('google.com'))
if (userCredentials.user) userEmail.value = userCredentials.user.email
}
</script>
Code directly in setup will run on server and client. Function signIn and if (process.client) will run only on client same as life cycle hooks like onMounted()
After many attempts, I was able to solve the issue. Here is the code on the directory /plugins/plugins.ts:
import { getAuth } from "#firebase/auth";
import { initializeApp } from "firebase/app";
import { firebaseConfig } from "./firebase/firebaseConfig";
const authInstance = () => {
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
return auth
};
export default defineNuxtPlugin(() => {
return {
provide: {
authInstance,
},
};
});
It appears that the initializeApp Function was not called correctly. But if you call the initializeApp and getAuth on a new function it returns The Auth Object correctly.

firebase signInWithEmailLink method not working properly

I installed firebase to my react app using npm install firebase command and initialized firebase like this
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth"
// 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 = {.........};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// export
export const auth = getAuth(app);
export const googleAuthProvider = new GoogleAuthProvider();
and i want to signInWithEmailLink method like this
import { signInWithEmailLink } from "firebase/auth";
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
useEffect(() => {
setEmail(window.localStorage.getItem('emailForRegistration'));
console.log(window.location.href);
console.log(window.localStorage.getItem("emailForRegistration"));
}, []);
const handleSubmit = async (e) => {
e.preventDefault();
try {
const result = await signInWithEmailLink(
email,
window.location.href
);
console.log("Result", result);
} catch (error) {
console.log(error);
}
};
and it give me this error
Don't use the useEffect() hook. Follow the instructions from the firebase docs here.

auth.onAuthStateChanged on vue3 and firebase 9.0.0 beta.3 not working

** Update **
I got it to work with the following
**main.js **
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { onAuthStateChanged} from "firebase/auth";
import { auth } from './firebase'
let app
onAuthStateChanged(auth, (user) => {
if (!app) {
app = createApp(App).use(store).use(router).mount('#app')
}
if (user) {
//store.dispatch('fetchUserProfile', user)
}
})
** firebase.js **
// Firebase App (the core Firebase SDK) is always required and must be listed first
import { initializeApp } from 'firebase/app';
// Add the Firebase products that you want to use
import { getAuth } from "firebase/auth";
import { getFirestore, collection } from 'firebase/firestore';
const firebaseConfig = {
// config settings
};
const firebaseApp = initializeApp(firebaseConfig);
// utils
const db = getFirestore();
const auth = getAuth(firebaseApp)
// collection references
const usersCollection = collection(db, "users")
const postsCollection = collection(db, "posts")
const commentsCollection = collection(db, "comments")
const likesCollection = collection(db, "likes")
export {
db,
auth,
usersCollection,
postsCollection,
commentsCollection,
likesCollection
};
** When created vue3 and npm run serves it works.**
But when add auth.onAuthStateChanged to main.js and npm run serve than it show blank page.
I already try auth.auth().onAuthStateChanged not worked
** main.js **
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { auth } from './firebase'
let app
auth.onAuthStateChanged(user => {
if (!app) {
app = createApp(App).use(store).use(router).mount('#app')
}
if (user) {
//store.dispatch('fetchUserProfile', user)
}
})
** firebase.js **
/* eslint-disable */
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
const firebaseConfig = {
//... config
};
firebase.initializeApp(firebaseConfig);
// utils
const db = firebase.firestore();
const auth = firebase.auth();
const authProvider = firebase.auth;
// collection references
const usersCollection = db.collection('users');
const postsCollection = db.collection('posts');
const commentsCollection = db.collection('comments');
const likesCollection = db.collection('likes');
// export utils/refs
export {
db,
auth,
authProvider,
firebase,
usersCollection,
postsCollection,
commentsCollection,
likesCollection
};
** I tried another way but not worked **
** main.js **
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { auth, authState } from './firebase';
let app
authState(auth, (user) => {
if (!app) {
app = createApp(App).use(store).use(router).mount('#app')
}
if (user) {
//store.dispatch('fetchUserProfile', user)
}
})
** firebase.js**
// Firebase App (the core Firebase SDK) is always required and must be listed first
import { initializeApp } from 'firebase/app';
// Add the Firebase products that you want to use
import { getAuth, onAuthStateChanged, GoogleAuthProvider } from "firebase/auth";
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
\\ config
};
const firebaseApp = initializeApp(firebaseConfig);
// utils
const db = getFirestore();
const auth = getAuth();
const authState = onAuthStateChanged();
const googleAuthProvider = GoogleAuthProvider();
// collection references
const usersCollection = db.collection('users');
const postsCollection = db.collection('posts');
const commentsCollection = db.collection('comments');
const likesCollection = db.collection('likes');
// export utils/refs
export {
db,
auth,
authState,
googleAuthProvider,
firebaseApp,
usersCollection,
postsCollection,
commentsCollection,
likesCollection
};
** Another question **
Is it good practice to code like above
Thanks
I'm going to answer this even tho OP already solved it.
You have to pass the firebaseApp instance to the getAuth function in Firebase 9.0. This is because you could be using different firebase instances in the same app.
Example code:
import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";
var firebaseConfig = {
apiKey: "",
authDomain: "",
...
};
const firebaseApp = initializeApp(firebaseConfig);
const authInstance = getAuth(firebaseApp);
onAuthStateChanged(authInstance, user => console.log(user));

Categories

Resources