getAuth() invalid in firebase in nextjs - reactjs

Question

I know there is a NextJS Auth ways to do it but its not comfortable to me and I'm used to do it in firebase, but I don't understand why it is receiving an error in authentication?
Basically I have this bunch of codes.
And the getAuth() is giving me an error..
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth ,GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider,GithubAuthProvider } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
console.log(process.env.API_KEY);
console.log(process.env.AUTH_DOMAIN);
console.log(process.env.PROJECT_ID);
console.log(process.env.STORAGE_BUCKET);
console.log(process.env.MESSAGING_SENDER_ID);
console.log(process.env.APP_ID);
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const storage = getStorage(app);
export const authentication = getAuth();
export const google = new GoogleAuthProvider();
export const facebook = new FacebookAuthProvider();
export const twitter = new TwitterAuthProvider();
export const github = new GithubAuthProvider();
This is the error I received in nextjs.
But all my firebase config in .env file is right and its working in console.log() can anyone tell me why it is not working? I've been annoyed lately at any bugs I receive in NextJS that I don't understand where it come from.

Answer 1

According to Exposing Environment Variables to the Browser, all of your process.env variables should be prefixed with NEXT_PUBLIC_.
Also as a local test, you can copy the project config directly from your project settings in the Firebase cloud UI and replace your config that's dependent on env variables. Use that to verify you're able to connect - then go back to your environment variables.