title: NEXTJS: Invalid hook call
body: <p>I'm using the new middleware in nextjs 12 and am trying to add authentication using firebase.</p>
  <p>But when i try to use the hook <code>useAuthState</code> it's giving me an error saying: &quot;Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app
  See <a href="https://reactjs.org/link/invalid-hook-call" rel="nofollow noreferrer">https://reactjs.org/link/invalid-hook-call</a> for tips about how to debug and fix this problem.
  null&quot;</li>
  </ol>
  <p>I have not made any changes in the app other than creating 2 components both in pages directory</p>
  <p>login.js and _middleware.js</p>
  <p>here is my _middleware.js</p>
  <pre><code>import { NextResponse } from &quot;next/server&quot;;
  // import firebase from &quot;firebase&quot;
  import { initializeApp } from &quot;firebase/app&quot;;
  import &quot;firebase/auth&quot;;
  import { getAuth } from &quot;firebase/auth&quot;;
  import { useAuthState } from &quot;react-firebase-hooks/auth&quot;;
  
  initializeApp({ ... });
  
  const auth = getAuth();
  
  export async function middleware(req) {
    const [user] = useAuthState(auth);
    const { pathname } = req.nextUrl;
  
    if (!user) {
      return NextResponse.redirect(&quot;/login&quot;);
    }
  
    return NextResponse.next();
  }
  </code></pre>
  <p>Here is my login.js</p>
  <pre><code>function login() {
    const signInWithGoogle = () =&gt; {
      console.log(&quot;Clicked!&quot;);
    };
  
    return (
      &lt;div&gt;
        &lt;button onClick={signInWithGoogle}&gt;Sign in with google&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export default login;
  </code></pre>
  <p>And here's my package.json</p>
  <pre><code>{
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next dev&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;
    },
    &quot;dependencies&quot;: {
      &quot;firebase&quot;: &quot;^9.5.0&quot;,
      &quot;next&quot;: &quot;^12.0.4&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-firebase-hooks&quot;: &quot;^4.0.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;autoprefixer&quot;: &quot;^10.2.6&quot;,
      &quot;postcss&quot;: &quot;^8.3.5&quot;,
      &quot;tailwindcss&quot;: &quot;^2.2.4&quot;
    }
  }
  
  </code></pre>