Next.js Discord

Discord Forum

Refresh shows login page

Unanswered
Blood cockle posted this in #help-forum
Open in Discord
Avatar
Blood cockleOP
I am using next 13 with next-auth and I am following this tutorial for old next.js. I created an Layout component that consists of a way to login and if logged in show navbar. 
"use client";
import Image from "next/image";
import { useSession, signIn, signOut } from "next-auth/react";
import Nav from "./Nav";
export default function Layout({ children }) {
  const { data: session } = useSession();

  if (!session) {
    return (
      <div className={"bg-blue-900 w-screen h-screen flex items-center"}>
        <div className="text-center w-full">
          <button
            onClick={() => signIn("google")}
            className="bg-white p-2 px-4 rounded-lg"
          >
            Login With
          </button>
        </div>
      </div>
    );
  }
  return (
    <div className={"bg-blue-900 min-h-screen flex"}>
      <Nav />
      <div className="bg-white flex-grow mt-2 mr-2 rounded-lg p-4">
        {children}
      </div>
    </div>
  );
}

Then i have imported to the root layout file. layout.js Like this: 
import { NextAuthProvider } from "./NextAuthProvider";
import Layout from "./components/Layout";
import "./globals.css";
import { SessionProvider } from "next-auth/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <head />
      <body>
        <NextAuthProvider>
          <Layout>{children}</Layout>
        </NextAuthProvider>
        ;
      </body>
    </html>
  );
}
My problem is that everytime I refresh my page it shows the login page. I have one solution but it does not feel right. It will wait for session data to be loaded in the hook before showing me the page on refresh... Can show the code if asked on the bad solution.

0 Replies