安全性 - 如何在 Next.js TypeScript 文件中處理 .env.local？

import GithubProvider from "next-auth/providers/github"
import GoogleProvider from "next-auth/providers/google"

const GITHUB_ID: string = process.env.GITHUB_ID as string;
const GITHUB_SECRET: string = process.env.GITHUB_SECRET as string;
const GOOLE_ID: string = process.env.GOOGLE_ID as string;
const GOOGLE_SECRET: string = process.env.GOOGLE_SECRET as string;

if (typeof GITHUB_ID !== "string") {
    throw new Error("GITHUB_ID is not a String! check your env file")
}
if (typeof GITHUB_SECRET !== "string") {
    throw new Error("GITHUB_SECRET is not a String, check your env file")
}
if (typeof GOOLE_ID !== "string") {
    throw new Error("GOOLE_ID is not a String, check your env file")
}
if (typeof GOOGLE_SECRET !== "string") {
    throw new Error("GITHUB_ID is not a String, check your env file")
}



export const options = {
    providers: [
        GithubProvider({
            profile(profile) {
                console.log("Profile Github", profile)
                return {
                    ...profile,
                    id: profile.sub, 
                }
            },
            clientId: GITHUB_ID,
            clientSecret: GITHUB_SECRET
        }),
        GoogleProvider({
            profile(profile) {
                console.log("Profile Google", profile)
                return {
                    ...profile,
                    id: profile.sub,
                }
            },
            clientId: GOOLE_ID,
            clientSecret: GOOGLE_SECRET,
        })
    ]
}

我正試圖把環境變數放到 cliendID 和 clientSecret 中，但在這段程式碼之前，它顯示類型錯誤，說 process.env.GITHUB_ID 是 'string | undefined'，不能賦值給 clientID，它是一個 'string' 類型。我不知道這是不是處理這個問題的正確方式。但有沒有更好的替代方法？

我嘗試了其他方法，比如將 process.env.GITHUB_ID 轉換為字串，但似乎並不管用。

答案＃1

由於環境變數是你自己宣告的，因此檢查它們是否存在有點沒有意義。所以，你可以完全移除這部分：

if (typeof GITHUB_ID !== "string") {
    throw new Error("GITHUB_ID is not a String! check your env file")
}
if (typeof GITHUB_SECRET !== "string") {
    throw new Error("GITHUB_SECRET is not a String, check your env file")
}
if (typeof GOOLE_ID !== "string") {
    throw new Error("GOOLE_ID is not a String, check your env file")
}
if (typeof GOOGLE_SECRET !== "string") {
    throw new Error("GITHUB_ID is not a String, check your env file")
}

然後為了避免 TypeScript 錯誤，你可以用以下方式宣告變數，問題就會被解決：

const GITHUB_ID = process.env.GITHUB_ID!;
const GITHUB_SECRET= process.env.GITHUB_SECRET!;
const GOOLE_ID= process.env.GOOGLE_ID!;
const GOOGLE_SECRET= process.env.GOOGLE_SECRET!; 

只需複製並貼上這段代碼，然後告訴我你是否仍然遇到任何問題。

答案＃2

從技術上來說，無論如何你的應用程式都會有這些環境變數，除非你在環境檔案中沒有提到它們，沒有它們你的應用程式應該無法運作。另外，next-auth 會自行處理錯誤的環境變數輸入。

所以在你的情況下，你可以直接在 clientId 和 clientSecret 中提到環境，就像這樣：

clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,

next-auth v4 文件也遵循這一點

如果你正在使用 auth.js，也就是 next-auth 的 v5，那麼如果你的環境變量名稱與 auth.js 文檔中提到的預定義名稱完全相符，你就不需要明確提到 clientId 和 clientSecret。

在你使用 GitHub 和 Google 提供者的情況下，像這樣

AUTH_GITHUB_ID={CLIENT_ID}
AUTH_GITHUB_SECRET={CLIENT_SECRET}

AUTH_GOOGLE_ID={CLIENT_ID}
AUTH_GOOGLE_SECRET={CLIENT_SECRET}

另外，一般在其他情況下，我喜歡這樣處理環境變數和 TypeScript

const GITHUB_ID: string = process.env.GITHUB_ID || “”

僅僅因為如果 .env 文件中有此變數或部署已正確完成，環境變數就會存在這個事實。