supabase: get user name
Unanswered
Channel catfish posted this in #help-forum
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>
)
}
13 Replies
If
Also, you are calling
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 insteadChannel catfishOP
How do I use useEffect? also, I am logged in.
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
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)
can you share the new code?
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>
)
}
"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
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
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
Channel catfishOP
No errors were found! But how do I get the data? What happens to the server component?
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
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 snippetChannel catfishOP
I want to get a user's login information and I can do it in the server component?
Yes, have a read through https://supabase.com/docs/guides/auth/auth-helpers/nextjs#server-components