Apologies for the way the question is phrased. I have a server component named auth.ts that retrieves user details after they log in. This server side component is located at //auth.ts
export const validateRequest = cache(
async (): Promise<
{ user: LuciaUser; session: Session } | { user: null; session: null }> => {
await dbConnect();
const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? null;
if (!sessionId) {
return {
user: null,
session: null,
};
}
const result = await lucia.validateSession(sessionId);
if (!result) {
return {
user: null,
session: null,
};
}
const profileAttributes = await getProfileAttributes(result.user);
if (!profileAttributes) {
return {
user: null,
session: null,
};
}
result.user.profile = {
...profileAttributes,
_id: undefined,
id: profileAttributes._id,
};
try {
if (result.session && result.session.fresh) {
const sessionCookie = lucia.createSessionCookie(result.session.id);
cookies().set(
sessionCookie.name,
sessionCookie.value,
sessionCookie.attributes
);
}
if (!result.session) {
const sessionCookie = lucia.createBlankSessionCookie();
cookies().set(
sessionCookie.name,
sessionCookie.value,
sessionCookie.attributes
);
}
} catch (error) {
console.log('error message', error);
}
return JSON.parse(JSON.stringify(result));
}
);
Trying to fetch data in a server component may seem simple, as shown below:
export default async function Home() {
const { user } = await validateRequest();
return(
<>
{user? (
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white">
Welcome, {user?.profile?.firstName}!
</h2> ):(
<>
<Link href="/auth/login">
Go to Login
<LogIn />
</Link>
</>
)
</>
When applying the same logic in a client component, I encountered numerous issues and have been struggling to find a solution for a while now.
If anyone could provide guidance on what steps to take, it would be greatly appreciated for my learning and future reference. Thank you in advance.