supabase.auth.getSession returning undefined

[Ashley-small]

I am building a website for a local health service. A form of tracker.

The issue is I am trying to get session data so that I can display emails, names and things like that on a specific page in the form of props. Supabase says my dummy user is logged in and I have the local storage cookies, however, supabase.auth.getSession is returning undefined.

This is the layout component

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";

import Navbar from "./Navbar";

export default async function ProfileLayout({ children }) {
const supabase = createServerComponentClient({ cookies });
const { data } = await supabase.auth.getSession();
console.log(data);
return (
<>

{children}
</>
);
}

This is the Login Page.

"use client";
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import AuthForm from "../AuthForm";
import { useState } from "react";
import { useRouter } from "next/navigation";
export default function Login() {
const router = useRouter();
const [error, setError] = useState("");
const handleSubmit = async (e, email, password) => {
e.preventDefault();
setError("");
const supabase = createClientComponentClient();
const { error } = await supabase.auth.signInWithPassword({
email,
password,
});
if (error) {
setError(!error.message);
}
if (!error) {
router.push("/Profile");
}
};
return (

Login

  <AuthForm handleSubmit={handleSubmit} />
  {error && <div className="text-3xl text-black">{error}</div>}
</main>

);
}

[Ashley-small]

solved it

[arbisyarifudin]

how you solved it?