I'm trying to conditionally render the home page based on the user's authenticated state. I'm using Amplify with Cognito for authentication. Amplify has a method called Auth.currentAuthenticatedUser() which returns the user and if there's no user, it'll be empty.

Problem is when I go to home page, <NotAuthHome></NotAuthHome> is rendered which is good, then after logging in <NotAuthHome></NotAuthHome> is still rendered until I refresh the home page. After refreshing the home page, the correct <AuthHome></AuthHome> renders.

I tried turning the method into a dynamic one by making sure I'm using the cookies() method (which successfully gets the cookies), but it doesn't update the "user" after redirecting from the Cognito hosted UI back to localhost:3000/ the user is undefined even though getUser runs again

import NotAuthHome from "@/app/NotAuthHome";
import {Auth} from "aws-amplify";
import { withSSRContext } from 'aws-amplify';
import AuthHome from "@/app/AuthHome";
import {cookies, headers} from "next/headers";

import { Amplify } from "aws-amplify";
import awsAmplifyConfig from "../awsAmplifyConfig";

Amplify.configure({
  ...awsAmplifyConfig,
  ssr: true
});

const getUser = async () => {  

  let user = undefined;
  const cookieStore = cookies()
  
  let getAllCookies;
  if (cookieStore) {
    getAllCookies = cookieStore.getAll();
  } else {
    // Handle the case when cookieStore is undefined
    console.error("Error: cookieStore is undefined");
  }
    const req = {
    headers: {
      cookie: getAllCookies,
    },
  };

  const SSR = withSSRContext({ req })

  try {
    user = await SSR.Auth.currentAuthenticatedUser();
  } catch (err) {
  }
  return user;
}

//want to render home page on server for SEO
export default async function Home() {
  const user = await getUser();
  console.log("running Home" + user);

  return (
  <>
    {user ? <AuthHome></AuthHome> : <NotAuthHome></NotAuthHome>}
  </>
)