Default Image for User in Hosted Login Page

Help
1

The gravatar feature seems very neat and makes the login experience very personal for all users in implementing their login image. Is there a way where a default image could be used for users that do not have gravatar accounts so they know that they can have an avatar image?

2

:wave: @willburholt

You are able to edit the default image for those who do not have one by using a custom rule.

Here’s an example:

function (user, context, callback) {
  if (user.picture.indexOf('cdn.auth0.com') > -1) {
    var url = require('url');
    var u = url.parse(user.picture, true);
    u.query.d = 'http://URL-TO-YOUR-DEFAULT-PICTURE';
    delete u.search;
    user.picture = url.format(u);
  }
  callback(null, user, context);
}

You can see more information about the user profile, in particular the user.picture in Auth0 here
In addition, if you’re new to rules you can explore more here

3

I was referring to a default image being displayed on the hosted login page if they do not use gravatar. So, if a default image is set, will it show in the place for their image (like this: https://cdn2.auth0.com/docs/media/articles/libraries/lock/customization/gravatar.png)?

4

Hi willburholt,

You’re right, my previous message was for the application and not the hosted login page.

For the hosted login page, one of the options available if you’re using Lock is the avatar field. It is possible to configure this option to show in place either a fallback image if the user doesn’t have a Gravatar profile or from a non gravatar source. Please note if you are generating a default image we’d recommend doing so in a way that does not require user information to generate as this could expose data when doing so.