I recently cloned this repository from https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db and I'm trying to implement a navigation bar that changes based on the user's login status.
Unfortunately, the code I've written so far is not working as expected. I've been following this guide - https://supabase.com/docs/guides/auth/auth-helpers/nextjs#:~:text=%27%27%20%7D)%0A%7D-,Client%2Dside%20data%20fetching%20with%20RLS,-%23
Below is the code for navigation.jsx:
import React from "react";
import Link from "next/link";
import { Auth } from "@supabase/ui";
const Navigation = () => {
const user = Auth.useUser(); // having issues with understanding what this line does exactly
if (!user) {
//user signed out
return (
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<Link class="navbar-item" href="/">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
></img>
</Link>
<a
role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true">Hello world</span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<Link class="navbar-start navbar-item" href="/">
Home
</Link>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<Link href="/authentication" class="button is-primary">
<strong>Sign up</strong>
</Link>
<Link href="/authentication" class="button is-light">
Log In
</Link>
</div>
</div>
</div>
</div>
</nav>
);
}
//user signed in
return (
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<Link class="navbar-item" href="/">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
></img>
</Link>
<a
role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<Link class="navbar-start navbar-item" href="/">
Home
</Link>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<Link href="/authentication" class="button is-primary">
<strong>Sign out</strong>
</Link>
</div>
</div>
</div>
</div>
</nav>
);
};
export default Navigation;
And here is the code snippet for _app.js:
import { Auth } from "@supabase/ui";
import { supabase } from "../lib/initSupabase";
import "./../style.css";
import Navigation from "./components/navigation.jsx";
export default function MyApp({ Component, pageProps }) {
return (
<>
<Navigation />
<main>
<Auth.UserContextProvider supabaseClient={supabase}>
<Component {...pageProps} />
</Auth.UserContextProvider>
</main>
</>
);
}