NextJs SSR Authentication using cookies

[IbrahimSam96]

I have previously done a simple authentication of users on firebase using SSR and nookies I think this implementation is quite smooth so far! Please let me know if it works well for you or if you face any problems.

Context.js

import React, { useEffect, useState, createContext, useContext } from 'react'
import { supabase } from './utils/initSupabase'

import nookies from "nookies";

const UserContext = createContext({ user: null, session: null })

export const UserContextProvider = ({children}) => {
  
  const [session, setSession] = useState(null)
  const [user, setUser] = useState(null)


  useEffect(() => {
    if (typeof window !== "undefined") {
      window.nookies = nookies;
    }
    const session = supabase.auth.session()
    setSession(session)
    setUser(session?.user ?? null)

    const { data: authListener } = supabase.auth.onAuthStateChange(async (event, session) => {
      console.log(`token changed!`);
      if (!session) {
        console.log(`no token found...`);
        setUser(null);
        nookies.destroy(null, "token");
        nookies.set(null, "token", "", {path: '/'});
        return;
      }

      console.log(`updating token...`);
      const token = await supabase.auth.currentSession.access_token;
      setUser(user);
      nookies.destroy(null, "token");
      nookies.set(null, "token", token, {path: '/'});

    });
    
    return () => {
      authListener.unsubscribe()
    }

  }, []);

  const value = {
    session,
    user,
  }

console.log(value)
  return <UserContext.Provider value={value} > {children} </UserContext.Provider> 
}

export const useUser = () => {
  const context = useContext(UserContext)
  if (context === undefined) {
    throw new Error(`useUser must be used within a UserContextProvider.`)
  }
  return context
}

_app.js

import { UserContextProvider } from '../Context'

export default function MyApp({ Component, pageProps }) {
  
  return (

     <UserContextProvider >

        <Component {...pageProps} />

      </UserContextProvider>
  )
}

profile.js

import { supabase } from '../utils/initSupabase'
import nookies from "nookies";

const Profile = ({user}) => {

  console.log(user)

  return (

    <div className="Profile">

     <h2>{user.email}</h2>

    </div>
  )
}

export default Profile


export async function getServerSideProps(context) {

  const cookies = nookies.get(context);

const { user } = await supabase.auth.api.getUser(cookies.token)

  if (!user) {
    // If no user, redirect to index.
    return { props: {}, redirect: { destination: '/', permanent: false } }
  }

  // If there is a user, return it.
  return { props: { user } }
}

EDIT 20/08/2021

As of now I can't log in to the index.js DIRECTLY after token verification in ssr. I think the issue being this! https://github.com/supabase/supabase/issues/1200#issuecomment-851034074
Please let me know if there is a alternative to the lengthy complex solution