Struggling with implementing auth logic in my next.js project as I try to teach myself the framework.
I have a specific page, protected/profile, that should only be accessible to logged-in users. To achieve this, I am fetching user data in getServerSideProps and then passing it to a child component called Protected. Protected is responsible for checking if the user is authenticated before rendering the profile page by returning props.children.
If a user tries to access the profile page without being logged in, they should be redirected to /
However, it seems like the profile component renders the page regardless and does not wait for the Protected logic to complete. When attempting to access the profile while logged out, an error occurs stating that user.user_metadata cannot be found instead of redirecting as expected.
The console logs show:
Profile log
protected.tsx:7 Protected log
protected.tsx:17 Protected: Has user
const Profile = ({user} : {user: User}) => {
console.log("Profile log");
return (
<Protected user={user}>
<h1>This is Profile</h1>
<h1>Hello, {user.user_metadata.full_name}!</h1>
<p> Your email : {user.email}</p>
</Protected>
)
}
export const getServerSideProps: GetServerSideProps = async ({req}) => {
const {user} = await supabaseClient.auth.api.getUserByCookie(req);
return { props: {user: user}}
}
export default Profile;
export default function Protected(props: {user: User, children}){
console.log("Protected log");
if(!props.user){
console.log("Protected: Null user");
return {
redirect: {
destination: "/",
permanent: false
}
}
}
console.log("Protected: Has user");
return props.children;
}