CODEWITHSUNDEEP
javascriptfirebasefirebase-authenticationnext.jsgoogle-oauth
Luke Grech
Luke Grech

Reputation: 185

NextJS Firebase Auth undefined GoogleAuthProvider

I am having issues implementing firebase authentication with Google Provider in NextJS. I set up the environment variables and am successfully connecting to firebase. I am receiving the following error and cant seem to figure out a solution, TypeError: Cannot read properties of undefined (reading 'GoogleAuthProvider'). Below is my code.

//firebaseApp.js
import { initializeApp, getApps } from "firebase/app"
import { getFirestore } from "firebase/firestore"
import { getAuth } from "firebase/auth"

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_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_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

if (getApps().length === 0) {
  console.log('Error Connecting to Firebase')
}

const app = initializeApp(firebaseConfig)

const db = getFirestore(app)
const auth = getAuth(app)

export { db, auth }

//firebaseAuthUI.config.js
export const uiConfig = (firebase) => {
  return {
    signInFlow: "popup",
    signInSuccessUrl: "/",
    signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
  };
};

//login.js
import Head from 'next/head';
import { useRouter } from 'next/router';

import { useAuthState } from 'react-firebase-hooks/auth';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import { auth, firebase } from '../app/firebaseApp';
import { uiConfig } from '../config/firebaseAuthUI.config';

export default function Login() {
    const [user, loading, error] = useAuthState(auth);
    const router = useRouter();

    if (loading) return 'loading'
    else if (error) return error

    else if (user) {
        router.push('/');
    }

    const authConfig = uiConfig(auth);

    return (
        <>
            <Head>
                <title>Login</title>
            </Head>
            <StyledFirebaseAuth uiConfig={authConfig} firebaseAuth={auth} />
        </>
    )
}

Upvotes: 0

Views: 974

Answers (1)

Chemi Adel
Chemi Adel

Reputation: 2165

I think the example code you copy from uses module 8

try to import GoogleAuthProvider like this, check firebase ref

import { GoogleAuthProvider} from "firebase/auth"
...

...
export const uiConfig = (firebase) => {
  return {
    signInFlow: "popup",
    signInSuccessUrl: "/",
    signInOptions: [GoogleAuthProvider.PROVIDER_ID],
  };
};

Upvotes: 3

Related Questions