name
, picture
field and more. The picture field is populated by either the social provider profile picture or the Gravatar image associated with the user’s email address.
By default, all database users will have a placeholder image with their initials. When you authenticate the user, this picture field is referred to as user.picture
.
Use the Management API
Theuser.picture
attribute is not directly editable when provided by other than Auth0 such as Google, Facebook, or X. To edit this attribute, you must configure your connection sync with Auth0 so that user attributes will be updated from the identity provider only on user profile creation. To learn more, read Configure Identity Provider Connection for User Profile Updates. Root attributes will then be available to be edited individually or by bulk import using the . To learn more, read Bulk User Imports.
Alternatively, you can use metadata to store the picture attribute for users. For example, if your app provides a way to upload profile pictures, once the picture is uploaded, you can set the URL to the picture in the user.user_metadata.picture
:
Use Actions
To ensure that the picture from theuser_metadata
is returned in the , we’ll need to create a new Action to check whether the event.user.user_metadata.picture
attribute is present, and if so, replace the user.picture
attribute with that value. This ensures that the picture from the user_metadata
is returned in the picture
claim of the ID Token.
- Navigate to Auth0 Dashboard > Actions > Library, and select Build Custom.
-
Enter a descriptive Name for your Action (for example,
Change user pictures
), select theLogin / Post Login
trigger because you’ll be adding the Action to the Login flow, then select Create. -
Locate the Actions Code Editor, copy the following JavaScript code into it, and select Save Draft to save your changes:
- From the Actions Code Editor sidebar, select Test (play icon), then select Run to test your code.
- When you’re ready for the Action to go live, select Deploy.
Change default picture for all users
To change the default picture for all users who have not set a profile picture, you can use an Action. For example:picture
property that may come from an external identity provider login, such as Google.