#User auth state not changing after login when using router

1 messages · Page 1 of 1 (latest)

umbral briar
#

Hi I am using api to authencticate and then storing user info in session .
My layout is
├── app
│   │   │   ├── (auth)
│   │   │   │   ├── login
│   │   │   │   └── register
│   │   │   │   ├── details
│   │   │   │   └── otp
│   │   │   ├── (nav-layout)
│   │   │   │   ├── bookings
│   │   │   │   │   ├── cancelled
│   │   │   │   │   └── completed
│   │   │   │   ├── info
│   │   │   │   │   └── [id]
│   │   │   │   │   └── payment
│   │   │   │   │   └── success
│   │   │   │   └── support
│   │   │   │   ├── solved
│   │   │   │   └── upcomming
│   │   │   └── api
│   │   │   └── auth
│   │   │   ├── login
│   │   │   └── register

My login functionality looks like this :

  const onSubmit = (payload: TRegistrationSchema) => {
    const promise = registrationMutation
      .mutateAsync(payload)
      .then(() => loginMutation.mutateAsync(payload))
      .then(() => router.push("/"));
    toast.promise(promise, {
      loading: "Please wait ...",
      success: "Registration successful !!",
      error: (err) => err.message || "Something went wrong !!",
    });
  };

My navigation is server compoennt which checks login status using a server action

export const Navigation = async () => {
  const session = await getSession();
  console.log("SESSION FROM NAV", session)
// Checks session and render element based on session is null or object
};

export async function getSession() {
  const session = cookies().get("session")?.value;
  if (!session) return null;
  try {
    return await decrypt(session);
  } catch (err) {
    return null;
  }
}

Here is the get session function

WHen I do signin then I am redirected to root but my nav stays same

lean jayBOT
#

Hi @umbral briar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

It looks like you're encountering an issue where the navigation component does not update after a successful login, even though the user is redirected to the root page. This is likely due to the fact that the session state is not being updated or re-fetched properly after the login mutation.

Here are a few steps you can take to troubleshoot and potentially resolve this issue:

  1. Ensure Session Cookie is Set Correctly:
    Make sure that the session cookie is being set correctly after the login mutation. You can verify this by checking the cookies in your browser's developer tools.

  2. Force Re-fetch of Session Data:
    After the login mutation and redirection, you need to ensure that the session data is re-fetched. One way to do this is to force a re-render of the navigation component or to re-fetch the session data explicitly.

  3. Check for Client-Side Caching:
    Ensure that there is no client-side caching that might be preventing the navigation component from updating. You can use no-cache headers or similar mechanisms to prevent caching.

  4. Debugging the Navigation Component:
    Add some debugging statements to your navigation component to ensure that it is being re-rendered and that the session data is being fetched correctly.

Here is an example of how you might modify your onSubmit function to ensure that the session data is re-fetched after login:

const onSubmit = (payload: TRegistrationSchema) => {
  const promise = registrationMutation
    .mutateAsync(payload)
    .then(() => loginMutation.mutateAsync(payload))
    .then(() => {
      // Force re-fetch of session data
      router.push("/", undefined, { shallow: false });
    });
  toast.promise(promise, {
    loading: "Please wait ...",
    success: "Registration successful !!",
    error: (err) => err.message || "Something went wrong !!",
  });
};
#

Additionally, ensure that your getSession function is correctly decrypting and returning the session data:

export async function getSession() {
  const session = cookies().get("session")?.value;
  if (!session) return null;
  try {
    return await decrypt(session);
  } catch (err) {
    return null;
  }
}

Finally, make sure that your navigation component is correctly checking and rendering based on the session data:

export const Navigation = async () => {
  const session = await getSession();
  console.log("SESSION FROM NAV", session);
  // Checks session and render element based on session is null or object
};

By ensuring that the session data is correctly set, re-fetched, and used in your navigation component, you should be able to resolve the issue where the navigation does not update after login.

For more detailed debugging, you can refer to the following related issues:

If the problem persists, you might want to look into potential issues with how the session cookie is being handled or consider using a state management solution to manage the session state more effectively.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@umbral briar kapa.ai is still learning and improving, please let us know how it did by reacting below

umbral briar
#

I logged the sesison
when I login I am redirected to home page. My nav renders and the session is also logged but the component is not rendering

export const Navigation = async () => {
const session = await getSession();
console.log("SESSION FROM NAV", session);

return (
<nav className="absolute top-0 z-20 w-full print:hidden">
<div className="mx-auto flex max-w-6xl items-center justify-between border-border/50 bg-transparent px-3 py-4 md:rounded-b-3xl md:border md:bg-white">
<div className="hidden items-center gap-2 md:flex">
<Image
width={30}
height={30}
className="h-[36px] w-[30px]"
src="/shared/logo.webp"
alt=""
/>
<p
className={${exo.className} text-nowrap text-xl font-bold text-primary}
>
E - Yaatri
</p>
</div>

    <MenuIcon size={32} className="text-white md:hidden" />

    <ul className="hidden gap-4 text-sm font-semibold text-muted-foreground md:flex lg:gap-8">
      {menus.map((m, idx) => (
        <li key={idx}>
          <Link href={m.to}>{m.title}</Link>
        </li>
      ))}
    </ul>

    {session ?
        <User />

]
) : (
<div className="hidden space-x-2 md:block">
Login
</div>
</nav>
);
};

#

@lean jay

lean jayBOT
#

Let me check the knowledge base for you. One moment! :books: