如何重复使用next-auth的initFirestore对象以从Firestore中获取一些数据。

huangapple go评论54阅读模式
英文:

How to reuse the next-auth initFirestore object to also fetch some data from Firestore

问题

我已设置一个 NextJS v13.4.2 项目,使用 next-auth v4.22.1,以便用户可以通过“使用Google登录”按钮进行身份验证。我目前还在使用 next-auth Firebase 适配器。当前文件配置如下:

/app/(lib)/firestore.js:

import { initFirestore } from "@next-auth/firebase-adapter";
import { cert } from "firebase-admin/app";

export const firestore = initFirestore({
    credential: cert({
        projectId: process.env.FIREBASE_PROJECT_ID,
        clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
        privateKey: process.env.FIREBASE_PRIVATE_KEY,
    }),
});

/app/(lib)/auth.js:

import GoogleProvider from "next-auth/providers/google";
import { FirestoreAdapter } from "@next-auth/firebase-adapter";
import { firestore } from "@lib/firestore";

export const authOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_ID,
            clientSecret: process.env.GOOGLE_SECRET,
        }),
    ],
    adapter: FirestoreAdapter(firestore),
};

/app/api/auth/[...nextauth]/route.js:

import NextAuth from "next-auth";
import { authOptions } from "@lib/auth";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

现在,所有这些都运行正常,但我想要做的是从我的 Firestore 数据库中查询一些数据并将其显示在页面上。所以,我认为可以通过以下方式实现:

import { firestore } from "@lib/firestore";
import { collection, getDocs } from "firebase/firestore";

const citiesCol = collection(firestore, "cities");
const citiesSnapshot = await getDocs(citiesCol);
const citiesList = citiesSnapshot.docs.map((doc) => doc.data());

但不幸的是,我收到了错误消息:“Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore”

所以,我的问题是,我可以重用(从 /app/(lib)/firestore.js 导出的)firestore 对象来处理 next-auth 逻辑并获取一些数据吗?还是我需要创建一个不同的 firebase 配置 并重新初始化 Firestore

英文:

I've set up a NextJS v13.4.2 project with next-auth v4.22.1 to let users authenticate by using the 'Login with Google' button. I'm also currently using the next-auth Firebase adapter. The current files configs are:

/app/(lib)/firestore.js:

import { initFirestore } from "@next-auth/firebase-adapter";
import { cert } from "firebase-admin/app";

export const firestore = initFirestore({
    credential: cert({
        projectId: process.env.FIREBASE_PROJECT_ID,
        clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
        privateKey: process.env.FIREBASE_PRIVATE_KEY,
    }),
});

/app/(lib)/auth.js:

import GoogleProvider from "next-auth/providers/google";
import { FirestoreAdapter } from "@next-auth/firebase-adapter";
import { firestore } from "@lib/firestore";

export const authOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_ID,
            clientSecret: process.env.GOOGLE_SECRET,
        }),
    ],
    adapter: FirestoreAdapter(firestore),
};

/app/api/auth/[...nextauth]/route.js:

import NextAuth from "next-auth";
import { authOptions } from "@lib/auth";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Now, all of this works fine, but what I would like to do is to also query some data from my Firestore db and displaying it into a page. So, I thought I could do that by doing:

import { firestore } from "@lib/firestore";
import { collection, getDocs } from "firebase/firestore";

const citiesCol = collection(firestore, "cities");
const citiesSnapshot = await getDocs(citiesCol);
const citiesList = citiesSnapshot.docs.map((doc) => doc.data());

But sadly I get the error: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

So, my question is, can I reuse the firestore object (from /app/(lib)/firestore.js) that I'm exporting for handling the next-auth logics to also fetch some data? Or do I need to create a different firebase config and initialize Firestore again?

答案1

得分: 0

Posting this as a community wiki for visibility.


According to @samthecodingman:

> @next-auth/firebase-adapter 是一个服务器端包,用于与 firebase-admin 一起使用。

您可以通过此链接查看示例。

您还可以查看此链接,了解如何将 Firebase 添加到您的 JavaScript 项目中2

英文:

Posting this as a community wiki for visibility.


According to @samthecodingman:

> @next-auth/firebase-adapter is a server-side package and this is meant to use with firebase-admin.

You may check an example through this link.

You may also want to follow this link on how to add Firebase to your JavaScript project.

huangapple
  • 本文由 发表于 2023年6月5日 18:59:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/76405771.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定