I'm trying to store users on a firebase backend when using next auth I can't get around this error
Using next-auth FIREBASE adapter.
https://next-auth.js.org/adapters/firebase :DOCS IM FOLLOWING
FIREBASE CLIENT
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
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,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASURMENT_ID,
};
// Initialize Firebase
const analytics = getAnalytics(app);
const app = initializeApp(firebaseConfig);
export default firebase;
[...nextauth].js
import NextAuth from "next-auth";
import { FirebaseAdapter } from "#next-auth/firebase-adapter";
import firebaseClient from "../../../firebase/FirebaseClient";
import GoogleProvider from "next-auth/providers/google";
import firebase from "firebase/app";
import "firebase/firestore";
const firestore = (firebase.apps[0] ?? firebaseClient).firestore();
export default NextAuth({
// Configure one or more authentication providers
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
adapter: FirebaseAdapter(firestore),
});
err
ReferenceError: Cannot access 'app' before initialization
I bet you need to switch lines as following, because you don't have app variable when you create analytics:
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
Alternative Problem: Internally-referenced Functions
Our issue was a bit different. If you've developed a cloud function that has an internally-referenced function, like this:
export.foo = functions.https.onCall(async () => {
// Some functionality here that references internalFunc
const internalFunc = () => { ... }
}
That internalFunc won't be able to be referenced.
The solution for us is to create a utilities.js file in our functions directory, then export the internalFunc from that file. Then, import that function to the script where you're deploying the cloud function.
Hope this helps someone!
Related
I am using a react js to build a gallery program, using firebase as the backend.
But I got some error and error in the config.js. I already follow some questions here, but nothing works for me.
So this is my config.js:
// import firebase from 'firebase/app';
import firebase from 'firebase/compat/app';
// import { initializeApp } from 'firebase/app';
// import 'firebase/compat/auth';
// import 'firebase/compat/firestore';
import 'firebase/storage';
import 'firebase/firestore';
import 'firebase/compat/storage'
// 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: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// firebase.initializeApp();
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
export { projectStorage, projectFirestore}
The error I got is: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
See that I commented on the code, to see some errors, and it still giving me the same result.
Note:
I am using firebase ^9.16.0"
React JS
I found the solution for my own problem.
So that If you're using version 9 (in my case firebase 9.16.0) so you also have to add import 'firebase/compat/firestore'; not import 'firebase/firestore';
This returns me TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.firestore is not a function
And then changed the way to initialize the app from const app = initializeApp(firebaseConfig); to firebase.initializeApp(firebaseConfig);
Now it works fine in my project.
My final code is below, and you can see the different between the above one in the question:
import firebase from 'firebase/compat/app';
import "firebase/database"
import 'firebase/storage';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';
// 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: "your api",
authDomain: "your domain",
projectId: "your project id",
storageBucket: "your storage",
messagingSenderId: "your id",
appId: "your app id"
};
// Initialize Firebase
// const app = initializeApp(firebaseConfig);
firebase.initializeApp(firebaseConfig);
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
export { projectStorage, projectFirestore}
I am trying to retrieve data from a firebase real-time database and I am following this tutorial from the firebase documentation: https://firebase.google.com/docs/database/admin/retrieve-data#section-start.
For my front-end framework I am using Svelte.
I set up the database in firebase.js.
firebase.js
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
const firebaseConfig = {
apiKey: "AIzaSyCHL9UcT3TtvgQwt7N3DbLjRon9gKPFjA0",
authDomain: "lyrics-and-quotes.firebaseapp.com",
databaseURL: "https://lyrics-and-quotes-default-rtdb.firebaseio.com",
projectId: "lyrics-and-quotes",
storageBucket: "lyrics-and-quotes.appspot.com",
messagingSenderId: "492758193692",
appId: "1:492758193692:web:60ab73db53010e7fa7b1d9",
measurementId: "G-T33YSTR82R",
};
// Initialize Firebase
initializeApp(firebaseConfig);
// Initialize Realtime Database and get a reference to the service
export const db = getDatabase(app);
// Initialize auth
export const auth = getAuth();
// Initialize Google auth provider
export const googleProvider = new GoogleAuthProvider();
On one of my front-end components, I have:
import { db } from '../database/firebase';
const postsRef = db.ref('posts');
However, I get the error: Posts.svelte:5 Uncaught TypeError: db.ref is not a function.
app is not defined in your firebase.js file.
You need to do
const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);
as shown in the doc.
This is the code I'm using. The link seems fine and it worked perfectly. Is there any modification I need to do for the environment file?
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } 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 = {
apiKey: process.env.REACT_APP_apiKey || 'mock_key',
authDomain: process.env.REACT_APP_authDomain,
projectId: process.env.REACT_APP_projectId,
storageBucket: process.env.REACT_APP_storageBucket,
messagingSenderId: process.env.REACT_APP_messagingSenderId,
appId: process.env.REACT_APP_appId
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;
Check your authdomain in env file if it the same from the firebase console
Can't use Firebase in react app, I installed Firebase using npm install firebase and created Firebase project. And I added the code provide by 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: "xxxxxx",
authDomain: "xxxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx",
appId: "xxxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// export
export const auth = firebase.auth();
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
then I used it in react component like below
import {auth} from '../../firebase';
and it says can't compile like
this
You are using the new Firebase Modular SDK which does not use firebase. namespace (same for importing AuthProviders). To initialize Firebase auth you must import getAuth() function from firebase/auth as shown below:
import { initializeApp } from "firebase/app"
import { getAuth, GoogleAuthProvider } from "firebase/auth"
const firebaseConfig = {...};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// export
export const auth = getAuth(app);
// initialize this way ^^^
export const googleAuthProvider = new GoogleAuthProvider();
I want to use Firebase Authentication to login with Facebook with React JS. I leave the firebaseSample.ts and config.ts files below.
I get the error "TypeError: Cannot read property 'FacebookAuthProvider' of undefined" on the React JS side. The line is exactly that.
facebook: new firebase.auth.FacebookAuthProvider()
In some posts "import * as firebase from "firebase/app";" I've seen related articles for changing the import structure.
import * as firebase from "firebase"; was said to be. However, when I do it this way, I get an error on the initializeApp side.
firebaseSample.ts
import * as firebase from "firebase/app";
import 'firebase/auth';
import 'firebase/firestore';
import config from 'config/config';
const FirebaseSample = firebase.initializeApp(config.firebase);
export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export const auth = firebase.auth();
export default FirebaseSample;
config.ts
const config = {
firebase: {
apiKey: "unique_id",
authDomain: "unique_id",
databaseURL: unique_id",
projectId: "unique_id-1663e",
storageBucket: "unique_id.appspot.com",
messagingSenderId: "unique_id",
appId: "1:unique_id",
measurementId: "G-unique_id"
}
}
export default config;
Updated firebaseSample.ts
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import config from 'config/config';
const FirebaseSample = firebase.initializeApp(config.firebase);
export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export const auth = firebase.auth();
export default FirebaseSample;
After updating the import files in the firebaseSample.ts file, I started getting the error "ReferenceError: Can't find variable: Providers". I am attaching it as a screenshot.
Updated 2.0 firebaseSample.ts
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import config from 'config/config';
const FirebaseSample = firebase.initializeApp(config.firebase);
const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export Providers;
export const auth = firebase.auth();
export default FirebaseSample;
Last Update and Information
I resolved the error by updating the firebase import structure in the whole project.
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
Thank you very much in advance.
If you are using the new version if Firebase SDK. The version 9 you would need to change your imports to:
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
Or use the new syntax according to the new Firebase SDK 9. The compat imports allow you to still use the old syntax.
Can you also try to write this:
export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
like this:
const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}
export { Providers }