FirebaseAdapter and Firebase giving "import" error #5551

bcthakre · 2022-10-11T05:33:32Z

Adapter type

@next-auth/firebase-adapter

Environment

System Information.


System:
    OS: macOS 12.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 135.65 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 16.0
  npmPackages:
    next: 12.3.1 => 12.3.1 
    next-auth: ^4.13.0 => 4.13.0 
    react: 18.2.0 => 18.2.0 


  npmPackages:
    @next-auth/firebase-adapter: ^1.0.2 => 1.0.2

Reproduction URL

https://github.com/bcthakre/nextjs-nextauth-2.git

Describe the issue

I am trying to use the FirebaseAdapter and Firestore to store user information for my NextJS app. However, getting the following error.


import { initializeApp } from "firebase/app";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@next-auth/firebase-adapter (/Users/bt/Documents/nextjs/nextjs-nextauth-2/.next/server/pages/api/auth/[...nextauth].js:22:18)
    at __webpack_require__ (/Users/ct/Documents/nextjs/nextjs-nextauth-2/.next/server/webpack-api-runtime.js:33:42)

The issue was raised earlier but has not been fully resolved. Things I tried.

Adding .mjs and .cjs to package-lock and next.config file.
Removing and adding different firebase versions. From 9 to 11.

How to reproduce

Copy the github link as well.

[https://github.com/bcthakre/nextjs-nextauth-2.git]

Expected behavior

Should allow to store user and session information in Firestore. Also, need to provide a way to signIn and signOut

The text was updated successfully, but these errors were encountered:

mucahitdev · 2022-10-11T19:04:36Z

i am getting the same error. did you solve it? @bcthakre

bcthakre · 2022-10-11T19:06:44Z

Not yet @mucahitkok . Have asked on stackoverflow as well.

balazsorban44 · 2022-10-12T02:56:35Z

Looks like the latest release did not include the compiled version of the package

https://github.com/nextauthjs/next-auth/releases/tag/%40next-auth%2Ffirebase-adapter%40v1.0.2 🤔

https://github.com/nextauthjs/next-auth/actions/runs/3214540412/jobs/5255017831#step:6:101

The build was initiated but the output was still wrong.

reverting to 1.0.1 would be a temporary solution.

bcthakre · 2022-10-12T04:31:03Z

Thanks @balazsorban44 . Novice here. Shall I just revert back the next-auth to version 1.0.1

nhuethmayr · 2022-10-12T16:08:37Z

I highly advise not to use the current firebase adapter - for details please check out this link.
#5049

bcthakre · 2022-10-12T17:47:09Z

Thanks @NorbertHuethmayr and @balazsorban44 . Solved the issue (seems like) by downgrading version.

@mucahitkok happy to share the solution

Maximilian94 · 2022-10-19T22:29:34Z

Thanks @balazsorban44, downgrading to version 1.0.1 solved for me.

bcthakre · 2022-10-20T05:50:55Z

@balazsorban44 Is there a specific guidance on how to change firestore security rules to add / view users with the adapter.

RonAlmog · 2022-10-25T02:33:33Z

having the same issue. patiently waiting for a fix, thank you ;)

nhuethmayr · 2022-10-25T15:10:21Z

You better look at this PR - maybe you can even upvote so that we get a bit more love from the maintainers.
#5628

alpharaoh · 2022-10-29T11:54:36Z

downgrading doesn't work for me 🥲

RonAlmog · 2022-10-29T18:18:39Z

@alpharaoh , what works for me right now is this: insall @next-auth/firebase-adapter@experinental,
and then go to your node_modules, next-auth/firebase-adapter, dist, and edit index.js
find: if(value.toDate)
add ? after the word value.
change to if(value?.toDate)
save and run, hope it will work for you.

MalteBoehm · 2022-10-30T13:53:01Z

Downgrading did not work on my end. Looking forward to a fix 🙃

yumartins · 2022-11-05T12:52:20Z

Temporarily for this new version of firebase-adapter

In the project, use the next-transpile-modules lib

In version 13 of next we can use it inside next.config.js

experimental: {
    transpilePackages: [
      '@next-auth/firebase-adapter'
    ]
  }

hsdonkin · 2022-11-08T17:21:58Z

In the meantime I've had some luck by doing the following:

Implementing a custom credentials provider:
https://next-auth.js.org/configuration/providers/credentials
Following the firebase guides to implement auth in a web app
https://firebase.google.com/docs/auth/web/start

Here's what that code looks like:

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
// aliased import
import app from '@lib/firebase';

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export default NextAuth({
  // https://next-auth.js.org/providers
  providers: [
    CredentialsProvider({
      // The name to display on the sign in form (e.g. 'Sign in with...')
      name: 'Credentials',
      // The credentials is used to generate a suitable form on the sign in page.
      // You can specify whatever fields you are expecting to be submitted.
      // e.g. domain, username, password, 2FA token, etc.
      // You can pass any HTML attribute to the <input> tag through the object.
      credentials: {
        email: { label: 'Email', type: 'text', placeholder: 'jsmith' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        const { email, password } = credentials;
        try {
          const auth = getAuth(app);
          const userCredential = await signInWithEmailAndPassword(auth, email, password);
          // If no error and we have user data, return it
          if (userCredential?.user) {
            return userCredential?.user;
          }
        } catch (error) {
          console.log(error);
        }
        // Return null if user data could not be retrieved
        return null;
      },
    }),
  ],
});

Then in my app I can call signIn('credentials', { email, password, callbackUrl: '/' })

bcthakre · 2022-11-08T22:41:37Z

Thanks @hsdonkin . Can you please share the nextauth piece where you have used firestore adapter to connect to firebase for storing users. And what version of adapter you have used.

hsdonkin · 2022-11-18T23:19:03Z

This is my replacement for the adapter entirely, the authorize() function uses the firebase signin functions

bcthakre · 2022-11-19T15:45:45Z

Let me give it a try this weekend.

JorritWillaert · 2022-11-21T07:23:00Z

I would like to use NextAuth with Firebase Authentication in my application, but I can't get around this issue.
@bcthakre have you found a solution or workaround?

Thanks!

MalteBoehm · 2022-11-21T09:27:21Z

I would like to use NextAuth with Firebase Authentication in my application, but I can't get around this issue.
@bcthakre have you found a solution or workaround?

Thanks!

Hey there, if you put this into your package.json it should work.

  "overrides": {
    "next-auth": {
      "next": "13.0.2"
    },
    "@next-auth/firebase-adapter": {
      "next": "13.0.2"
    }
  },

EGT88 · 2022-11-22T02:03:23Z

Temporarily for this new version of firebase-adapter

In the project, use the next-transpile-modules lib

In version 13 of next we can use it inside next.config.js
experimental: {
    transpilePackages: [
      '@next-auth/firebase-adapter'
    ]
  }

This sort of works but then later on shows error when declaring adapter below:

adapter: FirestoreAdapter({ db: db, ...firestoreFunctions, }),

TypeError: (0 , next_auth_firebase_adapter__WEBPACK_IMPORTED_MODULE_5_.default) is not a function

Quelaan1 · 2022-11-22T11:03:48Z

I would like to use NextAuth with Firebase Authentication in my application, but I can't get around this issue. @bcthakre have you found a solution or workaround?

Thanks!

Use npm install next-auth @next-auth/firebase-adapter@experimental

JorritWillaert · 2022-11-22T13:03:15Z

next-auth @next-auth/firebase-adapter@experimental

Thank you for your answer!
I've tried this, with this in my [...nextauth].js file:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { db } from "../../../firebase";
import { FirebaseAdapter } from "@next-auth/firebase-adapter";
import {
  collection,
  query,
  getDocs,
  where,
  limit,
  doc,
  getDoc,
  addDoc,
  updateDoc,
  deleteDoc,
  runTransaction,
} from "firebase/firestore";

export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
  secret: process.env.NEXTAUTH_SECRET,
  adapter: FirebaseAdapter({
    db,
    collection,
    query,
    getDocs,
    where,
    limit,
    doc,
    getDoc,
    addDoc,
    updateDoc,
    deleteDoc,
    runTransaction,
  }),

  // The standard next auth page is this:
  // theme: {
  //   logo: "https://links.papareact.com/sq0",
  //   brandColor: "#f13287",
  //   colorScheme: "auto",
  // },
  pages: {
    signIn: "/auth/signin",
  },
  callbacks: {
    async session({ session, token, user }) {
      session.user.username = session.user.name
        .split(" ")
        .join("")
        .toLowerCase();
      session.user.uid = token.sub; // Google's user ID
      return session;
    },
  },
};
export default NextAuth(authOptions);

But then I get the following error:

https://next-auth.js.org/errors#adapter_error_getsessionanduser Missing or insufficient permissions. {
  message: 'Missing or insufficient permissions.',
  stack: 'FirebaseError: Missing or insufficient permissions.',
  name: 'FirebaseError'
}
[next-auth][error][SESSION_ERROR] 
https://next-auth.js.org/errors#session_error Missing or insufficient permissions. [FirebaseError: Missing or insufficient permissions.] {
  name: 'GetSessionAndUserError',
  code: 'permission-denied'
}

bcthakre · 2022-11-22T14:16:55Z

This has more to do with firestore security rules than NextJS. However, I feel that devs should go with Venkat’s approach and provide a fix through patch. Best Regards, Bhupendrasinh ThakreOn Nov 22, 2022, at 7:03 AM, Jorrit Willaert ***@***.***> wrote: next-auth @***@***.*** Thank you for your answer! I've tried this, with this in my [...nextauth].js file: import NextAuth from "next-auth"; import GoogleProvider from "next-auth/providers/google"; import { db } from "../../../firebase"; import { FirebaseAdapter } from ***@***.***/firebase-adapter"; import { collection, query, getDocs, where, limit, doc, getDoc, addDoc, updateDoc, deleteDoc, runTransaction, } from "firebase/firestore"; export const authOptions = { // Configure one or more authentication providers providers: [ GoogleProvider({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, }), // ...add more providers here ], secret: process.env.NEXTAUTH_SECRET, adapter: FirebaseAdapter({ db, collection, query, getDocs, where, limit, doc, getDoc, addDoc, updateDoc, deleteDoc, runTransaction, }), // The standard next auth page is this: // theme: { // logo: "https://links.papareact.com/sq0", // brandColor: "#f13287", // colorScheme: "auto", // }, pages: { signIn: "/auth/signin", }, callbacks: { async session({ session, token, user }) { session.user.username = session.user.name .split(" ") .join("") .toLowerCase(); session.user.uid = token.sub; // Google's user ID return session; }, }, }; export default NextAuth(authOptions); But then I get the following error: https://next-auth.js.org/errors#adapter_error_getsessionanduser Missing or insufficient permissions. { message: 'Missing or insufficient permissions.', stack: 'FirebaseError: Missing or insufficient permissions.', name: 'FirebaseError' } [next-auth][error][SESSION_ERROR] https://next-auth.js.org/errors#session_error Missing or insufficient permissions. [FirebaseError: Missing or insufficient permissions.] { name: 'GetSessionAndUserError', code: 'permission-denied' } —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

so-uvik · 2022-11-23T16:04:13Z

When i try to do this, import { FirebaseAdapter } from "@next-auth/firebase-adapter"; it gives me an error that says @next-Auth has no exported member FirebaseAdapter did you mean FirestoreAdapter? How do i fix this issue? I am using typescript for my project.

Quelaan1 · 2022-11-23T16:58:28Z

When i try to do this, import { FirebaseAdapter } from "@next-auth/firebase-adapter"; it gives me an error that says @next-Auth has no exported member FirebaseAdapter did you mean FirestoreAdapter? How do i fix this issue? I am using typescript for my project.

FirebaseAdapter is not working currently, no matter what we try. Will have to wait for next update.

Quelaan1 · 2022-11-23T16:58:43Z

I even tried previous versions.

balazsorban44 · 2022-12-03T09:11:59Z

Please refrain from calling out/mass tagging maintainers, it is not helpful for the discussion and only create hostility.

Do note that most of us work on this project in their free time and should be no expectations from anyone working more on it than what their life situation can support.

As several people pointed out earlier, downgrading did work #5551 (comment) so there was no imminent issue.

Furthermore, given this is a open source project with a very forgiving license, you can copy and paste the source code, create your fork, etc. if you are not satisfied with the maintenance.

I'm locking this thread to avoid being too heated, but please have another(?) look at our code of conduct https://github.com/nextauthjs/next-auth/blob/main/CODE_OF_CONDUCT.md before landing another comment like the above.

Thanks. 💚

balazsorban44 · 2022-12-03T11:37:48Z

The fix is out in @next-auth/firebase-adapter@1.0.3

bcthakre · 2022-12-06T22:42:48Z

Thanks @balazsorban44 much appreciated. Will try this tonight

bcthakre · 2022-12-06T22:47:13Z

One quick question folks. Do we need to change security rules in the firestore rules. Any one has done it yet and want to share their insights

so-uvik · 2022-12-08T17:11:09Z

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import { FirebaseAdapter } from "@next-auth/firebase-adapter";
import { db } from "../../../firebase"
import {
collection,
query,
getDocs,
where,
limit,
doc,
getDoc,
addDoc,
updateDoc,
deleteDoc,
runTransaction,
} from "firebase/firestore";

export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID!,
clientSecret: process.env.GOOGLE_SECRET_ID as string,
}),
],

adapter: FirebaseAdapter({
db,
collection,
query,
getDocs,
where,
limit,
doc,
getDoc,
addDoc,
updateDoc,
deleteDoc,
runTransaction,
})
,
callbacks: {
session({ session, token, user }) {
return session // The return type will match the one returned in useSession()
}
}
})

This is my code, but its still giving an error on line 3 that, nextauth has no exported member FirebaseAdapter did you mean FirestoreAdapter? I upgraded the package to firebase adapter@1.0.3 but the issue still persists. I am using firebase version 9.10.0 and typescript in my project. What am i doing wrong here?

vedantmgoyal9 · 2022-12-09T14:35:19Z

import { FirebaseAdapter } from "@next-auth/firebase-adapter"; to import { FirestoreAdapter } from "@next-auth/firebase-adapter";

so-uvik · 2022-12-10T12:58:34Z

@vedantmgoyal2009 i did as you said it, changed adapter:FirebaseAdapter to adapter:FirestoreAdapter but it now highlights the next line i.e. "db" and throws the following error:

Argument of type '{ db: Firestore; collection: { (firestore: Firestore, path: string, ...pathSegments: string[]): CollectionReference; (reference: CollectionReference<...>, path: string, ...pathSegments: string[]): CollectionReference<...>; (reference: DocumentReference<...>, path: string, ...pathSegments: string[]): Co...' is not assignable to parameter of type 'FirebaseOptions & FirestoreAdapterOptions'.
Object literal may only specify known properties, and 'db' does not exist in type 'FirebaseOptions & FirestoreAdapterOptions'.

What do i do now?

so-uvik · 2022-12-13T13:26:43Z

[...nextauth].zip
Here is the file

so-uvik · 2022-12-20T14:33:24Z

hey @vedantmgoyal2009 any updates?

so-uvik · 2023-01-01T13:38:25Z

@so-uvik is the issue resolved?

No bro

vedantmgoyal9 · 2023-02-10T10:06:50Z

@so-uvik I'm no longer using next-auth, and also, major changes have been introduced. I hope you'll be able to find a solution on internet.

bcthakre added adapters Changes related to the core code concerning database adapters triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime. labels Oct 11, 2022

github-actions bot added the firebase @auth/firebase-adapter label Oct 11, 2022

balazsorban44 added bug Something isn't working and removed triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime. labels Oct 12, 2022

balazsorban44 mentioned this issue Oct 18, 2022

"SyntaxError: Cannot use import statement outside a module" after updating @next-auth/firebase-adapter to 1.0.2 #5589

Closed

balazsorban44 mentioned this issue Oct 31, 2022

FirebaseAdapter is not a function? #5635

Closed

balazsorban44 added good first issue Good issue to take for first time contributors and removed good first issue Good issue to take for first time contributors labels Oct 31, 2022

vedantmgoyal9 mentioned this issue Nov 5, 2022

NextAuth default signin page not working #5729

Closed

vedantmgoyal9 mentioned this issue Dec 3, 2022

fix(adapters): tsconfig for firebase and pouchdb #5945

Merged

3 tasks

balazsorban44 closed this as completed in #5945 Dec 3, 2022

nextauthjs locked and limited conversation to collaborators Dec 3, 2022

nextauthjs unlocked this conversation Dec 3, 2022

FirebaseAdapter and Firebase giving "import" error #5551

FirebaseAdapter and Firebase giving "import" error #5551

Comments

bcthakre commented Oct 11, 2022

Adapter type

Environment

Reproduction URL

Describe the issue

How to reproduce

Expected behavior

mucahitdev commented Oct 11, 2022

bcthakre commented Oct 11, 2022

balazsorban44 commented Oct 12, 2022 • edited

bcthakre commented Oct 12, 2022 • edited

nhuethmayr commented Oct 12, 2022

bcthakre commented Oct 12, 2022

Maximilian94 commented Oct 19, 2022

bcthakre commented Oct 20, 2022

RonAlmog commented Oct 25, 2022

nhuethmayr commented Oct 25, 2022

alpharaoh commented Oct 29, 2022

RonAlmog commented Oct 29, 2022

MalteBoehm commented Oct 30, 2022

yumartins commented Nov 5, 2022

hsdonkin commented Nov 8, 2022

bcthakre commented Nov 8, 2022

hsdonkin commented Nov 18, 2022

bcthakre commented Nov 19, 2022

JorritWillaert commented Nov 21, 2022

MalteBoehm commented Nov 21, 2022

EGT88 commented Nov 22, 2022

Quelaan1 commented Nov 22, 2022

JorritWillaert commented Nov 22, 2022

bcthakre commented Nov 22, 2022 via email

so-uvik commented Nov 23, 2022

Quelaan1 commented Nov 23, 2022

Quelaan1 commented Nov 23, 2022

balazsorban44 commented Dec 3, 2022

balazsorban44 commented Dec 3, 2022

bcthakre commented Dec 6, 2022

bcthakre commented Dec 6, 2022

so-uvik commented Dec 8, 2022

vedantmgoyal9 commented Dec 9, 2022

so-uvik commented Dec 10, 2022 • edited

so-uvik commented Dec 13, 2022

so-uvik commented Dec 20, 2022

so-uvik commented Jan 1, 2023

vedantmgoyal9 commented Feb 10, 2023

balazsorban44 commented Oct 12, 2022 •

edited

bcthakre commented Oct 12, 2022 •

edited

so-uvik commented Dec 10, 2022 •

edited