Next.js server side props not loading in time

Question

I'm using supabase and trying to load the user session on the server side. If you refresh the page, it catches there is a user but not on first load (e.g. like when coming from a magic link). How can I ensure it does load before he page?

List item

Here is the page:

import router from "next/router";
import { supabase } from "../utils/supabaseClient";

function Home() {
  const user = supabase.auth.user()
  if (user){
    //router.push('/admin') failsafe, not ideal
  }
  return (
    <div className="min-h-screen bg-elkblue dark:bg-dark-pri">
      marketing
    </div>
  );
}

export async function getServerSideProps({ req }) {
  const { user } = await supabase.auth.api.getUserByCookie(req);
  if (user) {
    return {
      redirect: {
        destination: "/admin",
        permanent: false,
      },
    };
  }

  return {
    props: {  }, // will be passed to the page component as props
  };
}

export default Home;

Have you tried passing `user` in `getServerSideProps` return `props`? — juliomalves, Oct 04 '21 at 10:35
And I assume you modified the `Home` component to expect to `user` prop, i.e. `function Home({ user }) {`? So you can access it from there. — juliomalves, Oct 04 '21 at 15:23
@juliomalves Yes, it doesn't affect it whether the prop is actually passed in or not — Noah Wardlow, Oct 04 '21 at 16:00

score 1 · Answer 1 · answered May 23 '22 at 08:54

You can use the auth-helpers for help with server-side rendering https://github.com/supabase-community/supabase-auth-helpers/blob/main/src/nextjs/README.md#server-side-rendering-ssr---withpageauth

Do note that it however needs to render the client first after OAuth because the server can't access the token from the URL fragment. The client will then read the token from the fragment and forward it to the server to set a cookie which can then be used for SSR.

You can see an example of that in action here: https://github.com/vercel/nextjs-subscription-payments/blob/main/pages/signin.tsx#L58-L62

Next.js server side props not loading in time

1 Answers1