Search code examples
javascriptreactjsnext.jsnext-authnext-router

Router.push("/") not working inside pages/index.js

I am using Next JS next-auth/react lib and want to redirect users who have authenticated status to dashboard. This is my index.js -

import { useRouter } from "next/router";
import Link from "next/link";
import { useSession } from "next-auth/react";
import Head from "next/head";
import { GoogleButton } from "~/components";

export default function Home() {
  const router = useRouter();
  const { data: session, status } = useSession();
  console.log("inside index");

  if (status === "authenticated") {
    console.log("status is:", status);
    router.push("/dashboard/users");
  } else if (status === "unauthenticated") {
    console.log("status is:", status);
    return (
      <>
        <Head>
          <title>Login</title>
        </Head>
        <div className="mt-72 text-center">
          <GoogleButton />
        </div>
      </>
    );
  } else if (status === "loading") {
    console.log("status is:", status);
    return <p>loading</p>;
  }
}

My pages/_app.js is -

import { SessionProvider } from "next-auth/react";
import "antd/dist/antd.css";

import "../styles/globals.css";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

NOTE - My index page does route to /dashboard/users but it displays blank and this error in console.

Also, when I refresh the route again, it displays the page just fine (/dashboard/users page is perfectly working but routing from index isn't).

I simply want to redirect my logged in users to dashboard, but when I go to my index page, I get this error-

The above error occurred in the component:

at Home (webpack-internal:///./src/pages/index.js:26:72)  
at SessionProvider (webpack-internal:///./node_modules/next-auth/react/index.js:417:24)  
at MyApp (webpack-internal:///./src/pages/_app.js:71:28)  
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584)  
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125)  
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:332:9)  
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:766:26)  
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:883:27)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Solution

  • You can try something like this.

    import {useEffect} from 'react';
import Link from "next/link";
import { useSession } from "next-auth/react";
import Head from "next/head";
import { GoogleButton } from "~/components";

export default function Home() {
  const router = useRouter();
  const { data: session, status } = useSession();
  console.log("inside index");

  useEffect(() => {
    if(status === 'authenticated') {
      router.push('/dashboard/users')
    }
  }, [status])


  if(status === 'loading') {
    return <p>loading</p>;
  }else if(status === 'unauthenticated') {
    return (
      <>
        <Head>
          <title>Login</title>
        </Head>
        <div className="mt-72 text-center">
          <GoogleButton />
        </div>
      </>
    );
  }else {
    return <div/>
  }
}