导航栏中的用户名 Next.js -Typescript-Supabase

Question

I am trying to get the username of a user in my navbar. The username = the column "username" of the table "profiles" in my Supabase db. As you can see bellow, it is filled with the users emails at the moment. I can't change it simply to user.username because "user" is the wrong table..

My navbar.tsx component looks like this:

    import { useUser, useSupabaseClient } from "@supabase/auth-helpers-react";
    import { useRouter } from "next/router";
    import Link from "next/link";

    const NavbarComponent = () => {
    const supabaseClient = useSupabaseClient();
    const user = useUser();
    const router = useRouter();

    function signOutUser() {
        supabaseClient.auth.signOut();
        router.push("/"); // localhost:3000
    }
    return (
        <Navbar isBordered isCompact>
            <Navbar.Brand as={Link} href="/">
                ShareArticles
            </Navbar.Brand>
            <Navbar.Content hideIn="xs" variant="highlight-rounded">
                <Navbar.Link href="/mainFeed">Main Feed</Navbar.Link>
                <Navbar.Link href="/createArticle">Create Article</Navbar.Link>
            </Navbar.Content>

            <Navbar.Content>
                {!user ?  /*User doesnt exist*/
                    <>
                        <Navbar.Link href="/login">
                            <Button auto flat>
                                Login
                            </Button>
                        </Navbar.Link>
                    </>
                :         /* User does exist */
                    <>
                        <Navbar.Item>
                            <Navbar.Link href="/updateAccount">{user?.email}</Navbar.Link> 
                            // Here is now the email, but I want the username! of the table profiles

                        </Navbar.Item>
                        <Navbar.Item>
                            <Button auto flat onPress={() => signOutUser()}>
                                Sign Out
                            </Button>
                        </Navbar.Item>
                    </>
                }  
            </Navbar.Content>
        </Navbar>
    ) 
    }
    export default NavbarComponent;  

my _app.tsx looks like this:

     import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
     import { SessionContextProvider } from "@supabase/auth-helpers-react";
     import { useState } from "react";
     import { NextUIProvider } from "@nextui-org/react";
     import { Box } from "../components/Box";
     import Navbar from '../components/NavbarComponent';
     import { userAgent } from 'next/server';

      // Providers (providing Supabase to our application, nextui providers)
      // Navbar

     // Navbar
     // Box (container for the content)

    function MyApp({ Component, pageProps }: AppProps) {
       const [supabaseClient] = useState(() => createBrowserSupabaseClient());
    // Supabase URL? Supabase Anon key? CREATE A SUPABASE ACCOUNT

    return  (
    <SessionContextProvider
      supabaseClient={supabaseClient}
    >
      <NextUIProvider>
        <Navbar/>
        <Box css={{ px: "$12", py: "$15", mt: "$12", "@xsMax": {px: "$10"}, maxWidth: "800px", margin: "0 auto" }}>
          <Component {...pageProps} />
        </Box>
      </NextUIProvider>
    </SessionContextProvider>
     )
    }
    export default MyApp

Thanks in advance!

I already tried changing the useUser to useProfiles and adding

type Profiles = Database["public"]["Tables"]["profiles"]["Row"];

But nothing worked.. I am a new to the Nextjs framework and I can't find anything useful about fetching of data from supabase tables execpt the docs of supabase itself. Sorry for my bad english..Thanks in advance

Answer 1

Are you using any starter template or are following any tutorial?

useUser is a hook that's implemented by the auth-helper to provide the user object.

To get that data from your profiles table, you can use supabase-js:

const getUserDetails = () => supabase.from('profiles').select('username').single();

You can implement your own hook that you can use throughout your application to reference back to the user details.

You can find an example of such a hook implementation here: https://github.com/vercel/nextjs-subscription-payments/blob/main/utils/useUser.tsx

Answer 2

I did it, the solution:

import { Navbar, Button, Text } from "@nextui-org/react";
import {  useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { useRouter } from "next/router";
import Link from "next/link";
// import { useUser } from '@utils/useUser';
import { User } from '@supabase/supabase-js';
import { useEffect, useState } from "react";
const NavbarComponent = () => {
    const supabaseClient = useSupabaseClient();
    const user = useUser();
    const router = useRouter();
    const [profile, setProfile] = useState<any>({});

    useEffect( () => {
        async function getProfile() {
            const {data, error} = await supabaseClient
                .from("profiles")
                .select("*")
                .filter("id", "eq", user?.id)
                .single();
            if (error) {
                console.log(error);
            } else {
                setProfile(data);
            }
        }
        if(typeof user?.id !== "undefined") {
            getProfile();
        }
    }, [user?.id])


    function signOutUser() {
        supabaseClient.auth.signOut();
        router.push("/"); // localhost:3000
    }
    return (
        <Navbar isBordered isCompact>
            <Navbar.Brand as={Link} href="/">
                ShareArticles
            </Navbar.Brand>
            <Navbar.Content hideIn="xs" variant="highlight-rounded">
                <Navbar.Link href="/mainFeed">Main Feed</Navbar.Link>
                <Navbar.Link href="/createArticle">Create Article</Navbar.Link>
            </Navbar.Content>

            <Navbar.Content>
                {!user ?  /*User doesnt exist*/
                    <>
                        <Navbar.Link href="/login">
                            <Button auto flat>
                                Login
                            </Button>
                        </Navbar.Link>
                    </>
                :         /* User does exist */
                    <>
                        <Navbar.Item>
                            <Navbar.Link href="/updateAccount">{profile.username}</Navbar.Link>
                        </Navbar.Item>
                        <Navbar.Item>
                            <Navbar.Link href="/testNav">testNav</Navbar.Link>
                        </Navbar.Item>
                        <Navbar.Item>
                            <Button auto flat onPress={() => signOutUser()}>
                                Sign Out
                            </Button>
                        </Navbar.Item>
                    </>
                }  
            </Navbar.Content>
        </Navbar>
    )
}

export default NavbarComponent;