Next.js Discord

Discord Forum

next auth having trouble updating session on login and logout

Unanswered
West African Crocodile posted this in #help-forum
Open in Discord
West African CrocodileOP
I am having trouble with next auth that when a user logs in it redirects to home page, but the session on header and other areas is not updating , it still shows sign in button

I am not an expert on server or client components etc so maybe I am working wrong but let me explain show my code.

this is my server action for login
export const login = async (values: any) => {
  if (!values) return { error: "values empty" };
  const { email, password } = values;
  console.log("debug path=", ROUTES_PATH)

  try {
    await signIn("credentials", {
      email,
      password,
      redirectTo: ROUTES_PATH.HOME,
    });
    revalidatePath("/", "layout");
  } catch (error) {
    if (error instanceof AuthError) {
      return { error: error.message };
    }

    throw error;
  }
  return { success: "Logging in...!" };
};


this is my login form that is a client component called in server component
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validateOnBlur: true,
    validateOnChange: true,
    validationSchema: SignupSchema,
    onSubmit: (values) => {
      setError('');
      setSuccess('');
      startTransition(() => {
        login(values).then(async(data: any) => {
          router.refresh();
          router.push("/home"); // Or wherever you want to redirect
        })
        revalidatePath("/", "layout");
      });
    },
  });

3 Replies

West African CrocodileOP
In header file I am getting session like this
const {data: session}= useSession();`
        {!session ?
                <Button className='sign-up-button' bg={'#000000'} color={'#fff'} fontSize={'14px'} padding={'10px 32px'} fontWeight={'600'} borderRadius={'12px'}
                  onClick={() => router.push("/auth/signup")}
                >
                  Sign up for free
                </Button> :
                <Menu isLazy>
                  <MenuButton h={8} w={8} borderRadius={32} bg={'#DD2590'} color={'#fff'} fontWeight={700} fontSize={16}>{nameInitial}</MenuButton>
                  <MenuList className='logout-profile' bg={'#fff'} border={'1px solid #D8DCE5'} borderRadius={15} p={2}>
                    <MenuItem className='logout-hover-gray' p={'6px 20px'} fontWeight={500} fontSize={14} borderRadius={5}>Go to profile</MenuItem>
                    <MenuItem className='logout-hover-red' p={'6px 20px'} color={'#F82B60'} fontWeight={500} borderRadius={5} fontSize={14} mt={2} onClick={() => logout2()}>Logout</MenuItem>
                  </MenuList>
                </Menu>
              }


this is my layou.tsx
export async function Providers({ children }: { children: React.ReactNode }) {
  const session = await auth();
  return (
    <SessionProvider basePath="/api/auth" session={session}>
      <AppWrapper>
        <ChakraProvider>{children}</ChakraProvider>
      </AppWrapper>
    </SessionProvider>
  );
}
notice that the layout is server component not client
West African CrocodileOP
BUMP