CODEWITHSUNDEEP
javascriptnext.jsvercelsupabasesupabase-database
David McGuckin
David McGuckin

Reputation: 17

I am trying to check if a user is logged in using Next.js and Supabase but it isn't working

I have cloned this repo https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db and i want a navbar which adapts depending on whether the user is logged in or not.

The code I have made doesn't work and I have followed this tutorial - https://supabase.com/docs/guides/auth/auth-helpers/nextjs#:~:text=%27%27%20%7D)%0A%7D-,Client%2Dside%20data%20fetching%20with%20RLS,-%23

Here 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(); // damn issues recognising whay tje f this is doing
  if (!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>
    );
  }
  //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;

Here is the code 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>
    </>
  );
}

Upvotes: 0

Views: 2853

Answers (2)

byr
byr

Reputation: 74

To check for user you need to use supabase.auth.getUser() which will return a user object. https://supabase.com/docs/reference/javascript/auth-getuser

That after you instantiate supabaseClient.

Upvotes: 0

Ben Freemantle
Ben Freemantle

Reputation: 11

I think you meant to import the useUser hook from import { useUser } from "@supabase/auth-helpers-react"; instead of @supabase/ui;

Upvotes: 1

Related Questions