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;

Answer 1

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

Answer 2

You should be using roles and manage everything from inventory.

But however, simplest way; Create a file, and store your user names in a variable that way

users:
    - user1
    - user2
    - user3
    - user4
    - user5

At the beginning of your playbook, include that file

- hosts: whatever
  become: yes
  vars_file: 
     - <<path_to_your_var_file>>

Then in the task you can use that users variable you included from the variable file

  tasks:
    - name: create 10 users
      user:
        name: "{{ item }}"
        state: present
      with_items:
        - "{{ users }}"

Ansible will import the users variable from your var file, and loop n times with number of users you have.