Supabase client

Some pages require the user to be logged in to access the functionality.

The authentication for the user is handled by Supabase

Connecting to Supabase

Credentials including the supabaseUrl and supabaseAnonKey should be added here using environmental variables

Create a file at utils/supabaseClient.js:

utils/supabaseClient.js

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

In the pages the user's session is obtained and then passed to the components that require it for access to content or services.

/pages/en/favourites.js

const [session, setSession] = useState(null);

useEffect(() => {
  supabase.auth.getSession().then(({ data: { session } }) => {
    setSession(session);
  });

  supabase.auth.onAuthStateChange((_event, session) => {
    setSession(session);
  });
}, []);


...

  return (
    <>
      <Layout>
        <div className={classes.grow}>
          <AppBar className={classes.header} position="sticky">
            <NavBar locale="en"></NavBar>
          </AppBar>

          {!session ? (
            <Favourites locale={"en"} />
          ) : (
            <Favourites key={session.user.id} session={session} locale={"en"} />
          )}
        </div>
      </Layout>
    </>
  );