Is there a way to track session state
I want to know if there's a way for me to track, at the root level (layout.tsx) , the state of the user session. Logged in, Logging out...
17 Replies
Hi @IkiTg07 ,
What SDK are you using?
Hello, I’m using the one for NextJs
Hey @IkiTg07 ,
Absolutely, you can track the state of the user session at the root level in your Next.js application. You can use the
getKindeServerSession function from the @kinde-oss/kinde-auth-nextjs/server package to get the user session data.
Here's an example of how you can use it in your layout.tsx:
import { useEffect, useState } from "react";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
export default function RootLayout({children}: {children: React.ReactNode}) {
const [user, setUser] = useState<any>();
const [authStatus, setAuthStatus] = useState(null);
useEffect(() => {
const getKindeSession = async () => {
const {getUser, isAuthenticated} = getKindeServerSession();
const user = await getUser();
const authenticated = await isAuthenticated();
setUser(user);
setAuthStatus(authenticated);
};
getKindeSession();
}, []);
return (
<div>
{/* You can now use user and authStatus in your layout */}
{children}
</div>
);
}
In this example, user and authStatus states are updated whenever the session changes. You can use these states throughout your layout to track the user session.
Please note that this is a server-side operation, so it won't cause any re-renders on the client side. If you need to react to changes in the session state on the client side, you might want to consider using a state management library like Redux or Zustand, or the built-in Context API in React.
Also, remember to handle the case where user and authStatus are null or undefined, as they will be before the first render and until the session data is fetched.
Let me know if you need more help with this!But on that note wouldn’t it create an error ? getKindeServerSession works on the server but useEffect only works in client components so I’ll have to mark the layout as “use client” and getKindeServerSession will fail
Let me ask my NextJS experts in my team and get back to you.
Okay thank you 😊
hey @IkiTg07 I think the best we've got at the moment is
useKindeServerSession() in the Layout which returns isAuthenticated
We do really need a method to get the session in the client-side because I need has Oli suggested to use useEffect but as soon as we go from server-comp to -> client-comp I can no longer get the isAuthenticated status. I am building an upload functionality using edgestore and because I have a context for authenticated users the owner told me I should call a reset utility everytime the user auth status changes because it is causing issues in my app.
And that reset util can only be used inside client-components
Hi @IkiTg07 ,
It's late here in Sydney so it will be hard for me to get the attention of my nextJS expert teammates, but I will get them to help you first thing Monday.
Okay no prob for me thank you !
Hey @IkiTg07 I happen to be up now haha
Was just working on the nextjs sdk v2 which should allow you to do this client side
GitHub
NEXT.JS SDK V2 by peterphanouvong · Pull Request #75 · kinde-oss/ki...
Explain your changes
There are a lot so its probably best to check out the draft for the docs: https://kinde.notion.site/Next-js-App-Router-v2-e7a16d8ae38e45b6ad052910075e24ef?pvs=4
Suppose there i...
Once it has been merged you can update to the latest version of
@kinde-oss/kinde-auth-nextjs and you should be able to follow these docs: https://kinde.notion.site/Next-js-App-Router-v2-e7a16d8ae38e45b6ad052910075e24ef?pvs=4Something like this:
Awesome ! I like it thanks !
Some predictions on when that v2 will be merged ?
Hey @IkiTg07 today!
Haha awesome ! Thanks and great job to the team