Would like to use #next-auth for authentication with Google provider and use firebase as the storage for user and session data. Getting the following error , while implementing the setup.
Error
Server Error
SyntaxError: Cannot use import statement outside a module
The firebase.config.js looks like the following.
import { initializeApp, getApp, getApps } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
// Initialize Firebase
const app = getApps.length > 0 ? getApp() : initializeApp(firebaseConfig);
const db = getFirestore(app);
const storage = getStorage(app);
export { app, db, storage };
The solution, I tried but not having success.
- Changing the .js extension to .mjs and .cjs
- Changing version of firebase from 9 to 11 and vice versa
System configuration
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
