After logging in and being redirected the session is null from useSession hook

[Dave-Patsy]

I'm using a Next.js app with an authentication provider from Auth.js V5 in the root layout for and passing auth() session to it. After a successful login, the user is redirected to the settings page. However, the session appears as null in the client component on the settings page. Shouldn't the login update the session and make it accessible to all components? Why isn't the session refreshing properly on login?

Repo: https://github.com/Dave-Patsy/t3-portfolio-A

here are the callbacks

  callbacks: {
    async signIn({user,account}){
      if(account?.provider !== 'credentials') return true
      
      const existingUser = await getUserById(user.id!)
      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
      if (!existingUser || !existingUser?.emailVerified) return false;

      
      if(existingUser.isTwoFactorEnabled){
        const twoFactorConfirmation = await getTwoFactorConfirmationByUser(existingUser.id)
        if(!twoFactorConfirmation) return false

        await db.twoFactorConfirmation.delete({
          where:{id:twoFactorConfirmation.id}
        })
      }
      return true
    },
    async session({ session, token }) {
      
      if (token.sub && session.user) {
        session.user.id = token.sub;
      }

      if (token.role && session.user) {
        session.user.role = token.role;
      }
      
      if (session.user) {
        session.user.isTwoFactorEnabled = token.isTwoFactorEnabled;
      }

      if(session.user) {
        session.user.name = token.name
        session.user.name = token.email
        session.user.isOAuth = token.isOAuth
      }

      return session;
    },
    async jwt({ token }) {
      if (!token.sub) return token;

      const existingUser = await getUserById(token.sub);
      if (!existingUser) return token;

      const existingAccount = await getAccountByUserId(existingUser.id)

      token.isOAuth = !!existingAccount;
      token.role = existingUser.role;
      token.isTwoFactorEnabled = existingUser.isTwoFactorEnabled
      token.name = existingUser.name
      token.email = existingUser.email
      return token;
    },
  },

settings page

'use client'

import { settings } from "@/actions/settings";
import FormError from "@/components/form-error";
import FormSuccess from "@/components/form-success";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { useCurrentUser } from "@/hooks/use-current-user";
import { SettingsSchema } from "@/schemas";
import { zodResolver } from "@hookform/resolvers/zod";
import { UserRole } from "@prisma/client";
import { type Session } from "next-auth";
import { getSession, useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect, useState, useTransition } from "react";
import { useForm } from "react-hook-form";
import {type z } from "zod";

let didIinit = false

export default  function Page() {
  const router = useRouter()
  const [error, setError] = useState<string | undefined>("");
  const [success, setSuccess] = useState<string | undefined>("");
  const [asd, setAsd] = useState<Session | null>(null);
  const { update: updateSession, data: session } = useSession();
  console.log('session in settings client component',session)
  const asdasdasd = useCurrentUser()
  console.log("useCurrentUser in settings client component", asdasdasd);
  const user = useCurrentUser();
  useEffect(()=>{
    if (!didIinit) {
      getSession().then((data)=>{return setAsd(data)}).catch((e)=> {throw e})
      didIinit = true;
      void updateSession();
      router.refresh();
    }
  },[])
  const form = useForm<z.infer<typeof SettingsSchema>>({
    resolver: zodResolver(SettingsSchema),
    defaultValues: {
      name: user?.name ?? undefined,
      email: user?.email ?? undefined,
      role: user?.role ?? undefined,
      isTwoFactorEnabled: user?.isTwoFactorEnabled ?? undefined,
      newPassword: undefined,
      confirmPassword: undefined,
    },
  });

  const [isPending, startTransition] = useTransition();

  const onSubmit = (values: z.infer<typeof SettingsSchema>) => {
    setError("");
    setSuccess("");
    startTransition(() => {
      void settings(values).then((data) => {
        if(data.error){
          setError(data.error)
        }
        if(data.success){
          void updateSession();
          setSuccess(data.success)
        } 
      })
      .catch(()=>setError("Something went wrong!"))
    });
  };

  return (
    <div className="">
      <Card className="w-[600px]">
        <CardHeader>
          <p className=" text-center text-2xl font-semibold">⚙ Settings</p>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
              <div className="space-y-4">
                <FormField
                  control={form.control}
                  name="name"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Name</FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          placeholder="Tony Tony Tony"
                          type="text"
                          autoComplete="name"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                {session?.user.isOAuth === false && (
                  <>
                    <FormField
                      control={form.control}
                      name="email"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Email</FormLabel>
                          <FormControl>
                            <Input
                              {...field}
                              placeholder="auth@developer.com"
                              type="email"
                              autoComplete="email"
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="newPassword"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>New Password</FormLabel>
                          <FormControl>
                            <Input
                              {...field}
                              placeholder="******"
                              type="string"
                              autoComplete="off"
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="confirmPassword"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Confirm Password</FormLabel>
                          <FormControl>
                            <Input
                              {...field}
                              placeholder="*******"
                              type="string"
                              autoComplete="off"
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </>
                )}
                <FormField
                  control={form.control}
                  name="role"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Role</FormLabel>
                      <Select
                        disabled={isPending}
                        onValueChange={field.onChange}
                        defaultValue={field.value}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Select a role" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value={UserRole.ADMIN}>Admin</SelectItem>
                          <SelectItem value={UserRole.USER}>User</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="isTwoFactorEnabled"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                      <div className="space-y-0.5">
                        <FormLabel>2FA</FormLabel>
                        <FormDescription>
                          Enable two Factor authentication for your account
                        </FormDescription>
                      </div>
                      <FormControl>
                        <Switch
                          disabled={isPending}
                          checked={field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />
              </div>
              <FormError message={error} />
              <FormSuccess message={success} />
              <Button type="submit" disabled={isPending}>
                Save
              </Button>
            </form>
          </Form>
        </CardContent>
      </Card>
    </div>
  );
}

here are the settings console logs as it renders

session in settings client component null
page-e29e28e7180f1a28.js:1 useCurrentUser in settings client component undefined
page-e29e28e7180f1a28.js:1 session in settings client component null
page-e29e28e7180f1a28.js:1 useCurrentUser in settings client component undefined
page-e29e28e7180f1a28.js:1 session in settings client component null
page-e29e28e7180f1a28.js:1 useCurrentUser in settings client component undefined
page-e29e28e7180f1a28.js:1 session in settings client component {user: {…}, expires: '2024-05-31T22:10:25.730Z'}