CODEWITHSUNDEEP
reactjsnext.jssupabase
Noah Wardlow
Noah Wardlow

Reputation: 55

Next.js server side props not loading in time

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;

Upvotes: 2

Views: 724

Answers (1)

thorwebdev
thorwebdev

Reputation: 1162

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

Upvotes: 1

Related Questions