Firebase – Firestore not receiving data when using setDoc

I have a problem with my app connecting to my Firestore database when trying to use setDoc.

I have the database up and running for next-auth which is functioning as intended and creating records in the database. However, when I try and allow the rest of my app to use the database I cannot get the data to update.

I believe the problem could be to do with my config file not firing correctly but its hard to know for sure as I am not getting any errors. The onClick fires (tested) and the update does not occur.

I will provide some console screenshots and code to try and make clear the problem.

/firebase/config.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  appId: process.env.FIREBASE_APP_ID,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
};

const app = initializeApp(firebaseConfig);

const storage = getStorage(app);
const db = getFirestore(app);

export { storage, db };

Then here is my form submit to add the form field values to an existing document.

/components/signup/SignupSubmit.js

import { getSession } from "next-auth/react";
import { setDoc, doc } from "firebase/firestore";
import { db } from "../../firebase/config";

export default async function SignupSubmit(value) {
  const session = await getSession();
  const userId = session.user.id;

  const values = {
    profile: value.profile,
    screenName: value.screenName,
  };

  const docRef = doc(db, "users", `${userId}`);
  console.log(docRef);

  setDoc(docRef, { values }, { merge: true })
    .then(() => {
      console.log("Document has been updated successfully");
    })
    .catch((error) => {
      console.log(error);
    });
}

I have screenshot the output of console.log(docRef).

Let me know if I can provide any further information as I am keen to put this issue to bed.

Thanks in advance for any and all help.

UPDATE: Here is my _app code

/pages/_app.js

import React from "react";
import { SessionProvider } from "next-auth/react";
import { SWRConfig } from "swr";

import Layout from "../components/Layout.js";
import AccountSettingsLayout from "../components/AccountSettingsLayout";

import "../styles/globals.css";

export default function App({ Component, router, pageProps }) {
  if (router.pathname.startsWith("/auth/")) {
    return (
      <React.StrictMode>
        <SessionProvider session={pageProps.session}>
          <SWRConfig>
            <AccountSettingsLayout>
              <Component {...pageProps} />
            </AccountSettingsLayout>
          </SWRConfig>
        </SessionProvider>
      </React.StrictMode>
    );
  }

  return (
    <React.StrictMode>
      <SessionProvider session={pageProps.session}>
        <SWRConfig>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </SWRConfig>
      </SessionProvider>
    </React.StrictMode>
  );
}

UPDATE – 01/10/22

I am using Next-auth in this project which is creating users and data in firebase without issue. Could this be preventing the rest of my app from using the firestore to add data?

Here is my next-auth code..

/pages/api/auth/[…nextauth].js

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import EmailProvider from "next-auth/providers/email";
import { FirestoreAdapter } from "@next-auth/firebase-adapter";

const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ],
  session: {
    jwt: false,
  },
  adapter: FirestoreAdapter({
    apiKey: process.env.FIREBASE_API_KEY,
    appId: process.env.FIREBASE_APP_ID,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  }),
  theme: {
    colorScheme: "dark",
  },
  pages: {
    signIn: "/auth/signin",
    newUser: "/auth/signup",
  },
  debug: false,
  callbacks: {
    async signIn({ user, account, profile }) {
      if (account.provider === "google") {
        return profile.email_verified;
      }
      return true;
    },
    async redirect({ url, baseUrl }) {
      return baseUrl;
    },
    async session({ session, user }) {
      session.user.id = user.id;
      return Promise.resolve(session);
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      return token;
    },
  },
};
export default NextAuth(authOptions);

Thanks