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 (
    style={{ borderRadius: '50%' }}

export default GoogleAvatar;
    Star on GitHub


    Chat on Discord



    Can't find what you're looking for?

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