useSession only getting the session after manually reloading the page

[getr62]

Environment

System:
OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
CPU: (6) x64 Common KVM processor
Memory: 48.93 GB / 62.79 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
npmPackages:
@auth/core: 0.18.1 => 0.18.1
next: 14.0.2 => 14.0.2
next-auth: ^5.0.0-beta.4 => 5.0.0-beta.4
react: ^18 => 18.2.0
Browser:
Chrome
Fireox

Reproduction URL

https://github.com/getr62/discuss

Describe the issue

I am using the credential provider, because I have to develop an app which is only available in a local network, maybe later also running on computers even without connection to the internet, so OAuth etc is no option for me.

src/lib/auth.ts

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import { z } from 'zod';
import { db } from '@/db';
import type { User } from '@prisma/client';

async function getUser(name: string): Promise<User | null> {
  try {
    const user = await db.user.findFirst({
      where: {
        name,
      },
    });
    return user;
  } catch (error) {
    throw new Error('Failed to fetch user.');
  }
}

export const {
  handlers: { GET, POST },
  auth,
  signOut,
  signIn,
} = NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      async authorize(credentials) {
        const parsedCredentials = z
          .object({
            username: z.string(),
            password: z.string(),
          })
          .safeParse(credentials);

        // console.log('credentials: ', credentials);
        if (parsedCredentials.success) {
          const { username, password } = parsedCredentials.data;
          const user = await getUser(username);
          console.log('USER in auth.ts AUTHORIZE: ', user);
          if (!user) return null;
          return user;
        }

        return null;
      },
    }),
  ],
  session: {
    strategy: 'jwt',
  },
  secret: process.env.AUTH_SECRET,
  callbacks: {
    async jwt({ token, user }: any) {
      console.log('USER in JWT callback: ', user);
      console.log('TOKEN BEFORE modification in JWT callback: ', token);
      if (token && user) {
        token.role = user.role;
        token.id = user.id;
      }
      console.log('TOKEN AFTER modification in JWT callback: ', token);
      return token;
    },
    async session({ session, token, user }: any) {
      console.log('USER in SESSION callback: ', user);
      console.log('TOKEN BEFORE modification in SESSION callback: ', token);
      console.log('SESSION BEFORE modification in SESSION callback: ', session);
      if (session && token) {
        session.user.id = token.id;
        session.user.role = token.role;

        console.log('SESSION AFTER modification in SESSION callback: ', session);
      }

      return session;
    },
  },
  pages: {
    signIn: '/src/components/auth/sign-in-form',
  },
});

In Next.js I am using the app router with server actions, also for the sign-in functionality.

src/actions/sign-in.tx

'use server';

import type { Profile } from '@prisma/client';
import { z } from 'zod';
import { db } from '@/db';
import { redirect } from 'next/navigation';
import paths from '@/lib/paths';
import * as auth from '@/lib/auth';
import { compare } from 'bcrypt';

const signInSchema = z.object({
  username: z.string().min(3),
  password: z.string().min(7),
});

interface SignInFormState {
  errors: {
    username?: string[];
    password?: string[];
    _form?: string[];
  };
}

export async function signIn(
  formState: SignInFormState,
  formData: FormData
): Promise<SignInFormState> {
  const result = signInSchema.safeParse({
    username: formData.get('username'),
    password: formData.get('password'),
  });

  console.log('result signInSchema safeParse: ', result);

  if (!result.success) {
    return {
      errors: result.error.flatten().fieldErrors,
    };
  }

  const user = await db.user.findUnique({
    where: {
      name: result.data.username,
    },
  });

  if (!user) {
    return {
      errors: {
        _form: ['Wrong credentials'],
      },
    };
  }

  const passwordsMatch = await compare(result.data.password, user.password);

  if (!passwordsMatch) {
    return {
      errors: {
        _form: ['Wrong credentials'],
      },
    };
  }

  console.log('user found in sign-in action: ', user);

  let profile: Profile;
  try {
    await auth.signIn('credentials', {
      redirect: false,
      username: result.data.username,
      password: result.data.password,
    });

    profile = await db.profile.upsert({
      where: {
        userId: user.id,
      },
      update: {
        lastLogin: new Date().toLocaleString(),
      },
      create: {
        userId: user.id,
        lastLogin: new Date().toLocaleString(),
      },
    });
  } catch (err: unknown) {
    if (err instanceof Error) {
      console.log('error in auth.signIn action: ', err);
      return {
        errors: {
          _form: [err.message],
        },
      };
    } else {
      return {
        errors: {
          _form: ['Something went wrong'],
        },
      };
    }
  }

  redirect(paths.home());
  return {
    errors: {},
  };
}

The logged in user should be displayed in the header component. The header is part of the root-layout file. To avoid that in the build process every page is treated as a dynamic route, this on the authentication state depending part is put in a client component.

src/components/header

import Link from 'next/link';
import { Suspense } from 'react';
import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
} from '@nextui-org/react';
import HeaderAuth from '@/components/header-auth';
import SearchInput from '@/components/search-input';
import dynamic from 'next/dynamic';

const DynamicHeaderAuth = dynamic(() => import('./header-auth'), {
  ssr: false,
});

export default function Header() {
  return (
    <Navbar className='shadow mb-6'>
      <NavbarBrand>
        <Link href='/' className='font-bold'>
          Discuss
        </Link>
      </NavbarBrand>
      <NavbarContent justify='center'>
        <NavbarItem>
          <Suspense>
            <SearchInput />
          </Suspense>
        </NavbarItem>
      </NavbarContent>

      <NavbarContent justify='end'>
        {/* <HeaderAuth /> */}
        <DynamicHeaderAuth />
      </NavbarContent>
    </Navbar>
  );
}

src/components/header-auth

'use client';

import Link from 'next/link';
import {
  Chip,
  NavbarItem,
  Button,
  Popover,
  PopoverTrigger,
  PopoverContent,
} from '@nextui-org/react';
import { Icon } from 'react-icons-kit';
import { pacman } from 'react-icons-kit/icomoon/pacman';
import { useSession } from 'next-auth/react';
import * as actions from '@/actions';

export default function HeaderAuth() {
  const session = useSession();
  console.log('session 1 from useSession in header-auth: ', session);

  let authContent: React.ReactNode;
  if (session.status === 'loading') {
    authContent = null;
  } else if (session.data?.user) {
    console.log('session 2 from useSession in header-auth: ', session);
    authContent = (
      <Popover placement='left'>
        <PopoverTrigger>
          <Chip
            className='cursor-pointer'
            startContent={<Icon icon={pacman} />}
            variant='faded'
            color='default'
          >
            {session.data.user.name}
          </Chip>
        </PopoverTrigger>
        <PopoverContent>
          <div className='p-4'>
            <form action={actions.signOut}>
              <Button type='submit'>Sign Out</Button>
            </form>
          </div>
        </PopoverContent>
      </Popover>
    );
  } else {
    authContent = (
      <>
        <NavbarItem>
          <Link href={'/sign-in'}>Sign In</Link>
        </NavbarItem>

        <NavbarItem>
          <Link href={'/sign-up'}>Sign Up</Link>
        </NavbarItem>
      </>
    );
  }

  return authContent;
}

As you can see in the auth.ts file I am heavily logging different stages in the jwt and session. Basically I am able to prep the token with the user id and role as well as all these values into the session with just one big problem. The session is only created, after I manually reload the page. To showcase I uploaded a video where you can see in the browser console that the session state only changes from unauthenticated to authenticated when the page is manually reloaded.

sign-in-short.mp4

Sure, I am by far no experienced developer, but I read in the discussions that some other people have issues too using the useSession hook and not getting the session back from the server.

How to reproduce

I linked a small example project, where I was experimenting with these features like server actions. In there should be everything to run the app with the exception of the .env file which contains these values:

DATABASE_URL="postgresql://user:password@localhost:5434/discuss_ext?schema=public"
AUTH_SECRET=************
NEXTAUTH_URL=http://localhost:3004

As you can see, nextjs runs on port 3004 which is hard coded in project.json and the database port is set to port 5434, which is also used in the docker-compose.yml

Expected behavior

After signing into the app the authentication state should change automatically from unauthenticated to authenticated.

[vinayavodah]

I'm facing the same.

[vinayavodah]

@getr62 Were you able to get around this?

[getr62]

@vinayavodah unfortunately not yet

[luckykenlin]

Any update?

[getr62]

I pushed the new branch 'common-reload' to github which solved the problem, at least for now. In the readme is a short description how I implemented this work around.
If you are interested, I will try tomorrow to write a bit more, what I exactly did.
But please be aware that I am a noob coder and I am sure the developers of authjs will probably regard my solution as awful ;)

[luckykenlin]

I pushed the new branch 'common-reload' to github which solved the problem, at least for now. In the readme is a short description how I implemented this work around. If you are interested, I will try tomorrow to write a bit more, what I exactly did. But please be aware that I am a noob coder and I am sure the developers of authjs will probably regard my solution as awful ;)

Yup, I did the same way, but it still needs to hard reload to refresh the session which is stored in the Session Context.

The update function from useSession won't work as expected.

[bocarw121]

Hey,

Yea that's strange that the useSession hook is not getting the session after you sign in, but what you can do to avoid that custom loader is the following:

Since your Header component is a server component you can turn it into an async function and you can get the session directly in the component by awaiting the auth function from ./src/lib/auth.ts like this const session = await auth(); and passing the session as props to your <DynamicHeaderAuth session={session} /> component

./src/components/header.tsx

import Link from "next/link";
import { Suspense } from "react";
import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
} from "@nextui-org/react";
import HeaderAuth from "@/components/header-auth";
import SearchInput from "@/components/search-input";
import dynamic from "next/dynamic";
import { auth } from "@/lib/auth";

const DynamicHeaderAuth = dynamic(() => import("./header-auth"), {
  ssr: false,
});

export default async function Header() {
  const session = await auth();
  return (
    <Navbar className="shadow mb-6">
      <NavbarBrand>
        <Link href="/" className="font-bold">
          Discuss
        </Link>
      </NavbarBrand>
      <NavbarContent justify="center">
        <NavbarItem>
          <Suspense>
            <SearchInput />
          </Suspense>
        </NavbarItem>
      </NavbarContent>

      <NavbarContent justify="end">
        {/* <HeaderAuth /> */}
        <DynamicHeaderAuth session={session} />
      </NavbarContent>
    </Navbar>
  );
}

and in the HeaderAuth you can do this

./src/components/header-auth.tsx

"use client";

import Link from "next/link";
import {
  Chip,
  NavbarItem,
  Button,
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@nextui-org/react";
import { Icon } from "react-icons-kit";
import { pacman } from "react-icons-kit/icomoon/pacman";
import { useSession } from "next-auth/react";
import * as actions from "@/actions";
import { Session } from "next-auth";
import { useEffect } from "react";

export default function HeaderAuth({ session }: { session: Session | null }) {
  if (session?.user) {
    console.log("session 2 from useSession in header-auth: ", session);
    return (
      <Popover placement="left">
        <PopoverTrigger>
          <Chip
            className="cursor-pointer"
            startContent={<Icon icon={pacman} />}
            variant="faded"
            color="default"
          >
            {session.user.name}
          </Chip>
        </PopoverTrigger>
        <PopoverContent>
          <div className="p-4">
            <form action={actions.signOut}>
              <Button type="submit">Sign Out</Button>
            </form>
          </div>
        </PopoverContent>
      </Popover>
    );
  }

  return (
    <>
      <NavbarItem>
        <Link href={"/sign-in"}>Sign In</Link>
      </NavbarItem>

      <NavbarItem>
        <Link href={"/sign-up"}>Sign Up</Link>
      </NavbarItem>
    </>
  );
}

and you should be good to go as far as your header goes.

as a side note make sure to always pass the session to SessionProvider in your layout like this:

./page/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Providers from "@/app/providers";
import Header from "@/components/header";
import { auth } from "@/lib/auth";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Discuss",
  description: "",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await auth();
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="container mx-auto px-4 max-w-6xl">
          <Providers session={session}>
            <Header />
            {children}
          </Providers>
        </div>
      </body>
    </html>
  );
}

and in your Providers you can do this

./app/providers.tsx

"use client";

import { NextUIProvider } from "@nextui-org/react";
import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

interface ProvidersProps {
  children: React.ReactNode;
  session?: Session | null;
}

export default function Providers({ children, session }: ProvidersProps) {
  return (
    <SessionProvider session={session}>
      <NextUIProvider>{children}</NextUIProvider>
    </SessionProvider>
  );
}

I haven't had this issue, but if I find something out I will keep you posted. Hope this helps for now.

You can also refer to the v5 upgrade guide. Keep in mind that it is still in beta and the API will be changing. Take care!

[luckykenlin]

hi, @bocarw121

Thanks for your help. for my application, I heavily use the useSession hook everywhere, It is not easy to pass the session from sever everywhere.

The update function https://next-auth.js.org/getting-started/client#updating-the-session only works when the session is authenticated.

any possible to refresh the session by triggering useSession.refresh or something

[bocarw121]

hi, @luckykenlin

Yea, there is no refresh or anything like that but i found something else.

There is the getSession helper that calls /api/auth/session to retrieve the current active session. You can call the getSession helper inside of a hook and return the session and status and use the hook in your client components.

./hooks/useCurrentSession

import { Session } from "next-auth";
import { getSession } from "next-auth/react";
import { usePathname } from "next/navigation";
import { useState, useEffect, useCallback } from "react";

// This hook doesn't rely on the session provider
export const useCurrentSession = () => {
  const [session, setSession] = useState<Session | null>(null);
  const [status, setStatus] = useState<string>("unauthenticated");
  const pathName = usePathname();

  const retrieveSession = useCallback(async () => {
    try {
      setStatus("loading");
      const sessionData = await getSession();

      if (sessionData) {
        setSession(sessionData);
        setStatus("authenticated");
        return;
      }

      setStatus("unauthenticated");
    } catch (error) {
      setStatus("unauthenticated");
      setSession(null);
    }
  }, []);

  useEffect(() => {
    retrieveSession();

    // use the pathname to force a re-render when the user navigates to a new page
  }, [retrieveSession, pathName]);

  return { session, status };
};

./components/MyComponent

"use client";
import { useCurrentSession } from "@/hooks/useCurrentSession";

type MyComponentProps = {};

export const MyComponent = (props: MyComponentProps) => {
  const { session, status } = useCurrentSession();

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

  if (status === "unauthenticated") {
    return (
      <>
        <h1>Unauthenticated</h1>
        <p>Please sign in to continue.</p>
      </>
    );
  }

  return <h1>Welcome {session?.user?.name}</h1>;
};

You can also tweak the hook to fit your needs, hope this helps.

[milindgoel15]

The problem lies in your code itself. To use the useSession hook, it must know if the session is available or not. So when declaring the session provider context in the layout, the session has to be fetched in the layout and passed on to the sessionprovider to be able to make use of useSession client hook.

Without passing the session, the hook doesn't know if the session is available or not.

The fix is to provide the session through props right in your provider as also provided by @bocarw121 :

./app/providers.tsx

"use client";

import { NextUIProvider } from "@nextui-org/react";
import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

interface ProvidersProps {
  children: React.ReactNode;
  session?: Session | null;
}

export default function Providers({ children, session }: ProvidersProps) {
  return (
    <SessionProvider session={session}>
      <NextUIProvider>{children}</NextUIProvider>
    </SessionProvider>
  );
}

And in your layout.tsx:

export default async function RootLayout({
        children,
}: {
        children: React.ReactNode;
}) {
        const session = await getServerSession(
                authOptions
        );

return <Providers session={session}>{children}</Providers>

[getr62]

Yea that's strange that the useSession hook is not getting the session after you sign in, but what you can do to avoid that custom loader is the following:

Since your Header component is a server component you can turn it into an async function and you can get the session directly in the component by awaiting the auth function from ./src/lib/auth.ts like this const session = await auth(); and passing the session as props to your <DynamicHeaderAuth session={session} /> component

Hi @bocarw121,

thank you for your in depth considerations.

The downside of this approach is that then the RootLayout which contains the header becomes a dynamic component, that means all pages become also dynamic pages. When running the build process of this solution we get the following output:

In the end that means we loose all the advantages of the more efficient static rendering of Next.js.

On my github project I pushed the new branch 'dynamic-header', which uses this approach. Actually it was a previous stage in the development of this project. When you look at the code of the mentioned branch there isn't yet the header-auth.tsx file but the whole code is just in the header.tsx. The code looks like this:

//  other imports . . .
import { auth } from '@/lib/auth';

export default async function Header() {
  const session = await auth();

  let authContent: React.ReactNode;
  if (session?.user) {
    authContent = (
      <Popover placement='left'>
        <PopoverTrigger>
          <Chip
            className='cursor-pointer'
            startContent={<Icon icon={pacman} />}
            variant='faded'
            color='default'
          >
            {session.user.name}
          </Chip>
        </PopoverTrigger>
        <PopoverContent>
          <div className='p-4'>
            <form action={actions.signOut}>
              <Button type='submit'>Sign Out</Button>
            </form>
          </div>
        </PopoverContent>
      </Popover>
    );
  } else {
    authContent = (
      <>
        <NavbarItem>
          <Link href={'/sign-in'}>Sign In</Link>
        </NavbarItem>

        <NavbarItem>
          <Link href={'/sign-up'}>Sign Up</Link>
        </NavbarItem>
      </>
    );
  }

  return (
    <Navbar className='shadow mb-6'>
      <NavbarBrand>
        <Link href='/' className='font-bold'>
          Discuss
        </Link>
      </NavbarBrand>
      <NavbarContent justify='center'>
        <NavbarItem>
          <Suspense>
            <SearchInput />
          </Suspense>
        </NavbarItem>
      </NavbarContent>

      <NavbarContent justify='end'>{authContent}</NavbarContent>
    </Navbar>
  );
}

In my initial post I forgot to mention, that the original project is taken from a course at Udemy.com which I took there. I only wrote this in the readme on github. I also forgot to mention that there only an OAuth-Provider was implemented and because of that the session strategy 'database' including the PrismaAdapter was used.

The interesting fact is that in the original project taken from Udemy everything is working fine with the useSession hook.

With regard to the authentication process I just took away the original auth provider as well as the in this case not applicable PrismaAdapter and put in the CredentialProvider.

[bocarw121]

@getr62

My pleasure, happy to see you found a solution!

[getr62]

@bocarw121

No sorry, that is no solution for me at all. The 'solution' in my previous post was just a step while developing this demo project.

I would rather switch to another authentication package like https://lucia-auth.com or use a simple jsonwebtoken alone and and have to write the whole boilerplate code for this than loosing the advantages of static rendered pages in Next.js.

I know my English is bad because it is a foreign language for me. But what I wanted to say in my previous post was that when using

const session = await auth(); 

in the header.tsx file the build process leads to the following result:

Whereas using

const session = useSession();

in a component marked with the 'use client' directive would lead to the folloing result:

So the logic to check the authentication state was cut out of the header.tsx file and put into the header-auth.tsx file.

The teacher in the Udemy course I mentioned used only the GithubProvider together with the PrismaAdapter and so the session strategy applied is 'database'. In such cases the call of the useSession hook just works fine and everything is ok.

As I mentioned in my initial post I will not be able to use Github, Google or all these other providers. The only option I am allowed to use in my app which I have to make is authentication with username and password because the app will not be reachable over a public website in the internet. It can only be accessed in a private network. Therefore I took away the GithubProvider and instead put in the CredentialProvider which switches the session strategy automatically to 'jwt'. But apparently auth.js has a bug (or feature?), that in this case the useSession hook can not retrieve the session.