Next.js Discord

Discord Forum

429 while Retrieving Google Image (user-content)

Unanswered
Rex posted this in #help-forum
Open in Discord
RexOP
I'm using next-auth-v5 and Google to authenticate.

This is the component I use to display the Image, sometime it display, sometimes not:
export const UserButton = () => {
  const user = useCurrentUser();
  console.log(user);

  const [image, setImage] = useState<string>('');

  useEffect(() => {
    if (user) {
      setImage(user?.image || '');
      console.log('Image Requested');
    }
  }, []);

   return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger>
          <Avatar>
            <AvatarImage src={image} />
            <AvatarFallback className="bg-sky-500">
              <FaUser className="text-white" />
            </AvatarFallback>
          </Avatar>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-30" align="end">
          <LogoutButton>
            <DropdownMenuItem>
              <ExitIcon className="h-4 w-4 mr-2" />
              Esci
            </DropdownMenuItem>
          </LogoutButton>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  );
};


This is the function to retrieve User in client components:
import { useSession } from "next-auth/react";

export const useCurrentUser = () => {
  const session = useSession();

  return session.data?.user;
};

repo: https://github.com/simone-capelli/next-auth-v5-starter-kit

I found that everytime I access this page, the user is retrieved 10 times (I'm in development).
Anyone know how to solve this issue?

8 Replies

@European pilchard I'm experiencing the same issue, did you figure out how to fix it?
RexOP
absolutely not.
It's strange that sometimes It works, sometimes not
Komondor
the session returned from useSession() takes some time to load. You can check if it's loaded by checking the status

const { data: session, status } = useSession()

You're probaably returning the user too early, before it has been loaded
Here's an example from their docs:

if (status === "authenticated") {
    return (
      <>
        <p>Signed in as {session.user.name}</p>

        {/* Update the value by sending it to the backend. */}
        <button onClick={() => update({ name: "John Doe" })}>Edit name</button>
        {/*
         * Only trigger a session update, assuming you already updated the value server-side.
         * All `useSession().data` references will be updated.
         */}
        <button onClick={() => update()}>Edit name</button>
      </>
    )
  }
one option is to move const { data: session, status } = useSession() to your UserButton component

Then modify the useEffect to be 

useEffect(() => {
    if (status === "authenticated") {
  if (data.user) {
    setImage(user.image || '');
    console.log('Image Requested');
  }
}
    }
  }, [status]);
European pilchard
Thanks for the tip, I'll give it a shot!
@European pilchard Thanks for the tip, I'll give it a shot!
RexOP
Hi!
Have you tried it, does it works? 🙂
European pilchard
I haven't tried, no. Thing is I'm using MUI Toolpad so the avatar is displayed by the Toolpad framework, so I'd have to customize how the avatar is handled by Toolpad. Did not spend time on this yet.