CODEWITHSUNDEEP
javascriptfirebasenext.jstypeerror
Shakthi
Shakthi

Reputation: 41

Next.js TypeError: (0 , firebase_auth__WEBPACK_IMPORTED_MODULE_1__.onAuthStateChanged) is not a function

Im new to Next.js development. Im following a Youtube tutorial to build a Whatsapp clone. Im using firebase8.9 as the database

I want to check if the user is logged in, then go to the home page else redirect to the login page.

import '../styles/globals.css'
import { useAuthState } from "react-firebase-hooks/auth"
import { auth, db } from "../firebase"
import Login from "./login"

function MyApp({ Component, pageProps }) {

  const [user] = useAuthState(auth);

  

  return <Component {...pageProps} />;
}

export default MyApp

my firebase.js file

import firebase from 'firebase';


const firebaseConfig = {
    apiKey: "apikey",
    authDomain: "authdomain",
    projectId: "projectid",
    storageBucket: "storagebucket",
    messagingSenderId: "messagingsenderid",
    appId: "appid"
  };


const app = !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : firebase.app();

const db = app.firestore();

const auth = app.auth();

const provider = new firebase.auth.GoogleAuthProvider();

export { db, auth, provider };

Please help me to solve this problem. Thanks in advance!

Upvotes: 0

Views: 2077

Answers (4)

Jobajuba
Jobajuba

Reputation: 1284

You can checks if the user has been authenticated. The user has been authenticated if "user" is not "null". The user has not been authenticated if "user" is "null".

Method 1

import '../styles/globals.css'
import { useAuthState } from "react-firebase-hooks/auth"
import { auth, db } from "../firebase"
import Login from "./login"

function MyApp({ Component, pageProps }) {

  const [user] = useAuthState(auth);

  if (user) {
    return <Component {...pageProps} />;
  } else {
    return <Login />;
  }
}

export default MyApp

Method 2

The error will tell you where the issue.

import '../styles/globals.css'
import { useAuthState } from "react-firebase-hooks/auth"
import { auth, db } from "../firebase"
import Login from "./login"

function MyApp({ Component, pageProps }) {

  const [user, loading, error] = useAuthState(auth);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!user) {
    return <Login />;
  }

  return <Component {...pageProps} />;
}

export default MyApp

Method 3

If the methods above failed. Wrap your "auth check" code in an "onAuthStateChange" function like this:

import '../styles/globals.css'
import { useEffect } from 'react';
import { useAuthState } from "react-firebase-hooks/auth"
import { auth, db } from "../firebase"
import Login from "./login"

function MyApp({ Component, pageProps }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    auth.onAuthStateChanged(function(currentUser) {
      if (currentUser) {
        setUser(currentUser);
      }
      setLoading(false);
    });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (user) {
    return <Component {...pageProps} />;
  } else {
    return <Login />;
  }
}

export default MyApp

The "currentUser" represents the authenticated user.

Upvotes: 0

Kevin Hu
Kevin Hu

Reputation: 21

"firebase": "8.2.1",
"react-firebase-hooks": "^2.2.0",

this config worked for me. my react-firebase-hooks was ^5.0.0

Upvotes: 0

Parv
Parv

Reputation: 339

As the time, firebase version is upgraded as of now to version 9+ as well as the firebase hooks changing the entire structure. So, what you simply need to do is go to your package.json file and change your "firebase" version to "firebase": "8.0.0".

Now look for "react-firebase-hooks" in the same package.json file and change its version to "react-firebase-hooks": "^3.0.4" from the current version.

Now, open up your terminal and run yarn install, this will solve the version issue.

Upvotes: 5

Hussain Rampurawala
Hussain Rampurawala

Reputation: 1

Was stuck on the same error

Just go to the node modules and change the version of react-firebase-hook from 4.0.0 to 3.0.4.

And then a simple yarn install will solve the issue...

Upvotes: -1

Related Questions