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

default discord avatar
supaku9 months 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;
    Star on GitHub

    Star

    Chat on Discord

    Discord

    online

    Can't find what you're looking for?

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