User Picture

Auth0 normalizes common profile properties in the User Profile, this includes the name and 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 by as user.picture.

User Picture

Change a User's Picture

The user.picture attribute is not directly editable. As an alternative, you can use the User Metadata to store a picture attribute which you can then use in your application as desired. The user_metadata field can be updated by calling the Management API v2 endpoint with the id of the specified user.

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 user.user_metadata.picture:


curl --request PATCH \
  --url 'https://YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID' \
  --header 'authorization: Bearer ABCD' \
  --header 'content-type: application/json' \
  --data '{"user_metadata": {"picture": "https://example.com/some-image.png"}}'
var client = new RestClient("https://YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID");
var request = new RestRequest(Method.PATCH);
request.AddHeader("content-type", "application/json");
request.AddHeader("authorization", "Bearer ABCD");
request.AddParameter("application/json", "{\"user_metadata\": {\"picture\": \"https://example.com/some-image.png\"}}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io/ioutil"
)

func main() {

	url := "https://YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID"

	payload := strings.NewReader("{\"user_metadata\": {\"picture\": \"https://example.com/some-image.png\"}}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("authorization", "Bearer ABCD")
	req.Header.Add("content-type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := ioutil.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
HttpResponse<String> response = Unirest.patch("https://YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID")
  .header("authorization", "Bearer ABCD")
  .header("content-type", "application/json")
  .body("{\"user_metadata\": {\"picture\": \"https://example.com/some-image.png\"}}")
  .asString();
var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID",
  "method": "PATCH",
  "headers": {
    "authorization": "Bearer ABCD",
    "content-type": "application/json"
  },
  "processData": false,
  "data": "{\"user_metadata\": {\"picture\": \"https://example.com/some-image.png\"}}"
}

$.ajax(settings).done(function (response) {
  console.log(response);
});
var request = require("request");

var options = { method: 'PATCH',
  url: 'https://YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID',
  headers: 
   { 'content-type': 'application/json',
     authorization: 'Bearer ABCD' },
  body: { user_metadata: { picture: 'https://example.com/some-image.png' } },
  json: true };

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
});
#import <Foundation/Foundation.h>

NSDictionary *headers = @{ @"authorization": @"Bearer ABCD",
                           @"content-type": @"application/json" };
NSDictionary *parameters = @{ @"user_metadata": @{ @"picture": @"https://example.com/some-image.png" } };

NSData *postData = [NSJSONSerialization dataWithJSONObject:parameters options:0 error:nil];

NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID"]
                                                       cachePolicy:NSURLRequestUseProtocolCachePolicy
                                                   timeoutInterval:10.0];
[request setHTTPMethod:@"PATCH"];
[request setAllHTTPHeaderFields:headers];
[request setHTTPBody:postData];

NSURLSession *session = [NSURLSession sharedSession];
NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
                                            completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
                                                if (error) {
                                                    NSLog(@"%@", error);
                                                } else {
                                                    NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
                                                    NSLog(@"%@", httpResponse);
                                                }
                                            }];
[dataTask resume];
$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "PATCH",
  CURLOPT_POSTFIELDS => "{\"user_metadata\": {\"picture\": \"https://example.com/some-image.png\"}}",
  CURLOPT_HTTPHEADER => array(
    "authorization: Bearer ABCD",
    "content-type: application/json"
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}
import http.client

conn = http.client.HTTPSConnection("")

payload = "{\"user_metadata\": {\"picture\": \"https://example.com/some-image.png\"}}"

headers = {
    'authorization': "Bearer ABCD",
    'content-type': "application/json"
    }

conn.request("PATCH", "/YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID", payload, headers)

res = conn.getresponse()
data = res.read()

print(data.decode("utf-8"))
require 'uri'
require 'net/http'

url = URI("https://YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE

request = Net::HTTP::Patch.new(url)
request["authorization"] = 'Bearer ABCD'
request["content-type"] = 'application/json'
request.body = "{\"user_metadata\": {\"picture\": \"https://example.com/some-image.png\"}}"

response = http.request(request)
puts response.read_body
import Foundation

let headers = [
  "authorization": "Bearer ABCD",
  "content-type": "application/json"
]
let parameters = ["user_metadata": ["picture": "https://example.com/some-image.png"]]

let postData = NSJSONSerialization.dataWithJSONObject(parameters, options: nil, error: nil)

var request = NSMutableURLRequest(URL: NSURL(string: "https://YOUR_AUTH0_DOMAIN/api/v2/users/USER_ID")!,
                                        cachePolicy: .UseProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.HTTPMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.HTTPBody = postData

let session = NSURLSession.sharedSession()
let dataTask = session.dataTaskWithRequest(request, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    println(error)
  } else {
    let httpResponse = response as? NSHTTPURLResponse
    println(httpResponse)
  }
})

dataTask.resume()

If you want to ensure that the picture from the user_metadata is returned in the id_token, you will need to create a Rule which will check whether the user.user_metadata.picture attribute is present, and if so replace the user.picture attribute with that value. This will ensure that the picture from the user_metadata is returned in the picture claim of the id_token.

Here is an example of the code you can use in your Rule:

function (user, context, callback) {
  if (user.user_metadata.picture)
    user.picture = user.user_metadata.picture;
  
  callback(null, user, context);
}

Change the default picture for all users

If you want to change the default picture of all users who do not have a profile picture set, you can use a rule to do this.

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 = '<URL TO YOUR DEFAULT PICTURE HERE>';
    delete u.search;
    user.picture = url.format(u);
  }

  callback(null, user, context);
}

Keep reading