Next.js Discord

Discord Forum

Required useSession() looping

Answered
Hoopoe posted this in #help-forum
Open in Discord
HoopoeOP
Read the entire backstory here: https://nextjs-forum.com/post/1194991583678967908
I upgraded to next-auth@beta. It is still not working. The exact same issue.
Answered by Ray
You are creating multiple SessionProvider in Navbar and the test page. It should only have one for the app
View full answer

40 Replies

HoopoeOP
hello
@Hoopoe hello
Ray
could you show the code?
HoopoeOP
its in https://nextjs-forum.com/post/1194991583678967908
the code for useSession is the exact same
auth.ts: 
import NextAuth, { NextAuthConfig } from "next-auth";
import Discord from "next-auth/providers/discord";
import { PrismaAdapter } from "@auth/prisma-adapter";
import prisma from "@/db";
import { getUserRoles } from "@/db/helpers";
export const authOptions: NextAuthConfig = {
  providers: [Discord],
  // @ts-ignore
  adapter: PrismaAdapter(prisma),
  callbacks: {
    async signIn({ user, profile }) {
      user.discriminator = (profile?.discriminator as string) || "0";
      return true;
    },
    async session({ session, user }) {
      if (session && session.user) session.user.id = user.id;
      session.user.roles = await getUserRoles(session.user.id);
      if (user.image) session.user.image = user.image;
      if (user.name) session.user.name = user.name;
      session.user.discriminator = user.discriminator;
      return session;
    },
  },
  session: {
    strategy: "database",
  },
};
export const { auth, handlers, signIn, signOut } = NextAuth(authOptions);
or what issue are you facing
HoopoeOP
could you please check out https://nextjs-forum.com/post/1194991583678967908
Ray
you said you upgraded to v5?
HoopoeOP
yes\
Ray
so the code structure should be changed as well
HoopoeOP
nope, useSession is still the same
Ray
no error?
HoopoeOP
no
u can see that i've logged in correctly in top left
Ray
could you create a minimal reproduction?
https://nextjs-faq.com/minimal-reproduction-repository
@Ray could you create a minimal reproduction? https://nextjs-faq.com/minimal-reproduction-repository
HoopoeOP
huh... when i try removing everything it doesn't require, it works
HoopoeOP
basically everything the code didnt need
@Hoopoe basically everything the code didnt need
Ray
ah ok glad you made it 😆
Original message was deleted
Ray
do you mean it doesn't work with the stuff you need in the app?
Ray
oh well then should be something cause the looping with that
@Ray oh well then should be something cause the looping with that
HoopoeOP
alright, i found it: the useSWR hook was the issue
i wonder why
@Hoopoe alright, i found it: the useSWR hook was the issue
Ray
do you use it with something require authentication?
HoopoeOP
nope
but i do call the auth() function in the route
if (!data) return <>Loading...</>; this seems to be the issue
this specific line
i tried using isLoading, that still does not work
Ray
well i can't tell without seeing the code
@Ray well i can't tell without seeing the code
HoopoeOP
https://github.com/nextauthjs/next-auth/issues/9623
I've created an issue with a reproduction repo
@Ray well i can't tell without seeing the code
HoopoeOP
I've just found something new. It happens when we do a double return statement. The first statement loads fine, but I am redirected to the sign in page right after the second statement is loaded.
HoopoeOP
does anyone have any info about this?
HoopoeOP
any leads yet anyone
@Hoopoe any leads yet anyone
Ray
ok i got it fixed
Ray
You are creating multiple SessionProvider in Navbar and the test page. It should only have one for the app
Answer
Ray
// provider.tsx
"use client";

import { SessionProvider } from "next-auth/react";
import { ReactNode } from "react";

export default function Provider({ children }: { children: ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

// layout.tsx
import { ReactNode } from "react";
import Navbar from "@/components/Navbar";
import Provider from "./provider";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Provider>
          <Navbar />
          {children}
        </Provider>
      </body>
    </html>
  );
}

// test/page.tsx
"use client";

import { useSession } from "next-auth/react";
import { ReactElement, useState } from "react";
export default function HomePage() {
  const [loading, setLoading] = useState(true);
  setTimeout(() => {
    setLoading(false);
  }, 1000);
  if (loading) return <>Loading...</>;

  return (
    <Auth>
      <p>Successfully loaded</p>
    </Auth>
  );
}
function Auth({ children }: { children: ReactElement }) {
  const { status } = useSession({ required: true });

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

  return children;
}

// components/Navbar.tsx
import LoginButton from "./login-button";

export default function Navbar() {
  return <LoginButton />;
}

// components/login-button.tsx
"use client";

import { useSession, signIn, signOut } from "next-auth/react";
export default function LoginButton() {
  const { data: session } = useSession();

  if (session && session.user) {
    return (
      <div>
        {session.user.id}
        <button onClick={() => signOut()} className="m-1 mt-0">
          Sign out
        </button>
      </div>
    );
  }
  return <button onClick={() => signIn("credentials")}>Sign in</button>;
}
try make these change