英文:
getAuth() invalid in firebase in nextjs
问题
我知道有一种NextJS身份验证方式，但对我来说不太方便，我习惯在Firebase中进行身份验证，但我不明白为什么出现身份验证错误？
基本上，我有一堆代码。
而getAuth()给我一个错误。
// 从你需要的 SDK 中导入所需的函数
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth, GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider, GithubAuthProvider } from "firebase/auth";
// TODO: 添加你想使用的 Firebase 产品的 SDK
// https://firebase.google.com/docs/web/setup#available-libraries
console.log(process.env.API_KEY);
console.log(process.env.AUTH_DOMAIN);
console.log(process.env.PROJECT_ID);
console.log(process.env.STORAGE_BUCKET);
console.log(process.env.MESSAGING_SENDER_ID);
console.log(process.env.APP_ID);
// 你的Web应用的Firebase配置
const firebaseConfig = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
};
// 初始化Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const storage = getStorage(app);
export const authentication = getAuth();
export const google = new GoogleAuthProvider();
export const facebook = new FacebookAuthProvider();
export const twitter = new TwitterAuthProvider();
export const github = new GithubAuthProvider();
这是我在NextJS中收到的错误。
但我的.env文件中的所有Firebase配置都是正确的，而且在console.log()中可以正常工作，有人能告诉我为什么它不起作用吗？最近我对在NextJS中收到的任何我不明白出处的错误感到烦恼。
英文:
I know there is a NextJS Auth ways to do it but its not comfortable to me and I'm used to do it in firebase, but I don't understand why it is receiving an error in authentication?
Basically I have this bunch of codes.
And the getAuth() is giving me an error..
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth ,GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider,GithubAuthProvider } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
console.log(process.env.API_KEY);
console.log(process.env.AUTH_DOMAIN);
console.log(process.env.PROJECT_ID);
console.log(process.env.STORAGE_BUCKET);
console.log(process.env.MESSAGING_SENDER_ID);
console.log(process.env.APP_ID);
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const storage = getStorage(app);
export const authentication = getAuth();
export const google = new GoogleAuthProvider();
export const facebook = new FacebookAuthProvider();
export const twitter = new TwitterAuthProvider();
export const github = new GithubAuthProvider();
This is the error I received in nextjs.
But all my firebase config in .env file is right and its working in console.log() can anyone tell me why it is not working? I've been annoyed lately at any bugs I receive in NextJS that I don't understand where it come from.
答案1
得分: 0
根据将环境变量暴露给浏览器，你所有的process.env变量都应该以NEXT_PUBLIC_为前缀。
此外，作为本地测试，你可以直接从Firebase云UI中的项目设置中复制项目配置，然后替换依赖于环境变量的配置。使用这个来验证你是否能够连接，然后再回到你的环境变量。
英文:
According to Exposing Environment Variables to the Browser, all of your process.env variables should be prefixed with NEXT_PUBLIC_.
Also as a local test, you can copy the project config directly from your project settings in the Firebase cloud UI and replace your config that's dependent on env variables. Use that to verify you're able to connect - then go back to your environment variables.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论