Next.js Discord

Discord Forum

supabase: get user name

Unanswered
Channel catfish posted this in #help-forum
Open in Discord
Avatar
Channel catfishOP
I tried to create a chat using supabase. I wanted to get the username of the user who is logged in, but it is null. How do I change this?

"use client"
import ThreadLink from '@/components/threadLink'
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";




export default async function Index() {
  const supabase = createClientComponentClient();
  const { data, error } = await supabase.from('profiles').select('name');
  console.log(data);
  const { data: { user } } = await supabase.auth.getUser()
  console.log(user);






  return (
    <div className="flex-1 w-full flex flex-col items-center">
      <h1 className="text-3xl font-bold pt-6 pb-10">チャット</h1>
      <ul>
        {data ? (
          data.map((profile, index) => (
            <ThreadLink
              key={index}
              channelName={profile.name}
              linkName={profile.name}
            ></ThreadLink>
          ))
        ) : (
          <p>Loading...</p>
        )}
      </ul>
    </div>
  )
}
Image

13 Replies

Avatar
josh
If user is null that means there is no logged in user.
Also, you are calling getUser() on every render of the Index component as it's a Client Component. If it needs to be a Client Component, use useEffect to get the user data instead
Avatar
Channel catfishOP
How do I use useEffect? also, I am logged in.
Avatar
josh
Something like:

const [user, setUser] = useState(null);

useEffect(() => {
  async function getUser() {
    const { data } = await superbase.auth.getUser();
    setUser(data.user);
  }
  
  getUser();
}, [])
there is also a useUser hook from @supabase/auth-helpers-react but I'm not sure if this works with auth-helpers-nextjs
Avatar
Channel catfishOP
I got this error.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
 ⨯ TypeError: Cannot read properties of null (reading 'useState')
    at Index (./app/page.tsx:20:76)
Avatar
josh
can you share the new code?
Avatar
Channel catfishOP
"use client"
import ThreadLink from '@/components/threadLink'

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import { useState, useEffect } from "react";




export default async function Index() {
  const supabase = createClientComponentClient();
  const { data, error } = await supabase.from('profiles').select('name');
  console.log(data);
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function getUser() {
      const { data } = await supabase.auth.getUser();
      setUser(data.user);
    }
    
    getUser();
  }, [])






  return (
    <div className="flex-1 w-full flex flex-col items-center">
      <h1 className="text-3xl font-bold pt-6 pb-10">チャット</h1>
      <ul>
        {data ? (
          data.map((profile, index) => (
            <ThreadLink
              key={index}
              channelName={profile.name}
              linkName={profile.name}
            ></ThreadLink>
          ))
        ) : (
          <p>Loading...</p>
        )}
      </ul>
    </div>
  )
}
Avatar
josh
"use client"
import ThreadLink from '@/components/threadLink'

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import { useState, useEffect } from "react";

export default function Index() {
  const supabase = createClientComponentClient();
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function getUser() {
      const { data } = await supabase.auth.getUser();
      setUser(data.user);
    }
    
    getUser();
  }, [])

  return (
    <div className="flex-1 w-full flex flex-col items-center">
      <h1 className="text-3xl font-bold pt-6 pb-10">チャット</h1>
      <ul>
        {data ? (
          data.map((profile, index) => (
            <ThreadLink
              key={index}
              channelName={profile.name}
              linkName={profile.name}
            ></ThreadLink>
          ))
        ) : (
          <p>Loading...</p>
        )}
      </ul>
    </div>
  )
}


try this?
You can't have async client components afaik, so I also removed the top-level calls to get the data from profiles - you'll need to do that in useEffect too.

it does ask the question - does this need to be a client component? Everything there looks like it can be done in a server component
Avatar
Channel catfishOP
No errors were found! But how do I get the data? What happens to the server component?
Avatar
josh
If you're not sure on the difference between server and client components and when to use each, it might be worth reading up on it.
If you want to stick to a client component for this, then you would also fetch the data from profiles in useEffect like I showed you in that snippet
Avatar
Channel catfishOP
I want to get a user's login information and I can do it in the server component?
Avatar
josh
Yes, have a read through https://supabase.com/docs/guides/auth/auth-helpers/nextjs#server-components