supabase/examples/nextjs-live-tracker-map/pages/_app.js

import "../styles/globals.css";
import React, { useState, useEffect } from "react";
import { supabase } from "lib/api";
import { AppContext } from "lib/constants";

function MyApp({ Component, pageProps }) {
  const [session, setSession] = useState(null);

  useEffect(() => {
    setSession(supabase.auth.session());

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
      console.log("session state change", session);
    });
  }, []);

  return (
    <AppContext.Provider value={{ session: session }}>
      <Component {...pageProps} />
    </AppContext.Provider>
  );
}

export default MyApp;