Next-JS-Tutorials icon indicating copy to clipboard operation
Next-JS-Tutorials copied to clipboard

Page gets reloaded once signed in

Open Flavio78 opened this issue 2 years ago • 0 comments

Dear All, I tried your code with next 13, next-auth 4 and typescript 5. Here is my code for Navbar.tsx and [...nextauth].ts .

Navbar.tsx

import Link from 'next/link';
import { signIn, signOut, useSession } from 'next-auth/react';

const Navbar = () => {
  const { data: session, status } = useSession();
  const loading = status === 'loading';
  return (
    <nav className="header">
      <h1 className="logo">
        <a href="#">{session ? `Welcome ${session.user?.name}` : 'NO LOGIN'}</a>
      </h1>
      <ul className={`main-nav ${!session && loading ? 'loading' : 'loaded'}`}>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/dashboard-auth">Dashboard</Link>
        </li>
        <li>
          <Link href="/blog-auth">Blog</Link>
        </li>
        {!loading && !session && (
          <li>
            <Link
              href="/api/auth/signin"
              onClick={(e) => {
                e.preventDefault();
                signIn('github', { redirect: false });
              }}
            >
              Sign In
            </Link>
          </li>
        )}
        {session && (
          <li>
            <Link
              href="/api/auth/signout"
              onClick={(e) => {
                e.preventDefault();
                signOut({ redirect: false });
              }}
            >
              Sign Out
            </Link>
          </li>
        )}
      </ul>
    </nav>
  );
};
export default Navbar;

[...nextauth].ts

import NextAuth from 'next-auth/next';
import GitHubProvider from 'next-auth/providers/github';

export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
});

I noticed that, once signed in, the page gets reloaed thus loosing the state. How could I avoid this reload? Thanks. Best regards.

Flavio78 avatar Jun 05 '23 19:06 Flavio78