Is there an example of a custom avatar component? I'm trying to use the oauth2 user image.

default discord avatar
supaku
3 weeks ago

I'm using the oauth2 plugin to authenticate a Google account for my users. I would like to take their existing profile picture and use it as their avatar by default.



From what I've read here and grok'd from the source, I will need to create a custom avatar component. Is there an example of such a component?



Also, should I take the URL image, download it, and re-upload it into a media collection for purpose of the user avatar?



Thank you 🙏



took inspiration from the gravatar implementation and arrived at this:



import React from 'react';
import { useAuth } from 'payload/components/utilities';

const GoogleAvatar: React.FC = () => {
    const { user } = useAuth();
    return (
    <img
    className="google-avatar"
    style={{ borderRadius: '50%' }}
    src={String(user.picture)}
    alt="yas"
    width={25}
    height={25}
    />
);
};

export default GoogleAvatar;
    Open the post
    Continue the discussion in Discord
    Like what we're doing?
    Star us on GitHub!

    Star

    Connect with the Payload Community on Discord

    Discord

    online

    Can't find what you're looking for?

    Get help straight from the Payload team with an Enterprise License.