在.env文件中存储firebase配置

Question

我有一个Sveltekit项目，我使用firebase进行身份验证。我将firebase.js文件存储在srclib文件夹中，其中包含apiKey和authDomain等配置参数。我将apiKey值存储在项目根目录下的.env文件中，并使用process.env。API_KEY加载相同的值。然而，当我执行npm run build时，我在浏览器控制台中得到一个错误-"进程未定义"。我尝试了以下方法，但似乎没有一个工作-

方法1 -

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { config } from 'dotenv'
config()
const firebaseConfig = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
}
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)
export default auth

方法2 -

这里我使用了env-cmd库，这是我通过另一个Stackoverflow帖子找到的。下面是更新的代码

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
const firebaseConfig = {
apiKey: process.env['API_KEY'],
authDomain: process.env['AUTH_DOMAIN'],
}
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)
export default auth

我还更新了包中的脚本。Json如下-

"scripts": {
"dev": "env-cmd vite dev",
"build": "env-cmd vite build",
"package": "svelte-kit package",
"preview": "vite preview",
"prepare": "svelte-kit sync"
}

这两种方法似乎都不起作用，我仍然得到相同的错误，即"进程未定义"。甚至我在Github上检查的其他一些repos在配置文件中硬编码了apiKey，这显然是一个不好的做法，即使是业余爱好的项目。

关于如何通过.env文件合并firebase apiKey的任何想法?

Answer 1

From firebase docs

与API密钥的典型使用方式不同，Firebase服务的API密钥不用于控制对后端资源的访问;这只能通过Firebase安全规则(控制哪些用户可以访问资源)和应用程序检查(控制哪些应用程序可以访问资源)来完成。

通常，您需要严格保护API密钥(例如，通过使用保险库服务或将密钥设置为环境变量);然而，Firebase服务的API密钥可以包含在代码或签入配置文件中。

Answer 2

您的.env文件应该有这样的变量VITE_SECURE_API_KEY=API-KEY你可以在你的客户端应用程序中使用import.meta.env.VITE_SECURE_API_KEY。

dotenv工作在服务器端使用node-adapter sveltekit,还firebase-admin包只能在节点环境。