Utilizing A User Picture from OAuth Provider

When you successfully log in via OAuth, you will retrieve a URL link to the user's picture as part of the API response, if it exists. You can utilize this to display a profile picture for users in your web application or any other use case where you would like to associate a user with their picture, such as on an admin dashboard. This guide will explain how to use the picture attribute.

Getting the Picture from the API Response

It is very simple to use, you just need to embed the URL that comes from a successful OAuth API response, into your website somewhere. This picture is always accessible via the URL that is returned from the API.

This response is from a successful Google social login:

{
  "sessionJwt": "eyJhbGciOiJSUzI...",
  "refreshJwt": "eyJhbGciOiJ...",
  "cookieDomain": "",
  "cookiePath": "/",
  "cookieMaxAge": 2419199,
  "cookieExpiration": 1685116422,
  "user": {
    "loginIds": [
        "google-12345678",
        "example@descope.com"
    ],
    "userId": "ABCD1234",
    "name": "John Smith",
    "email": "example@descope.com",
    "phone": "",
    "verifiedEmail": true,
    "verifiedPhone": false,
    "roleNames": [],
    "userTenants": [],
    "status": "enabled",
    "externalIds": [
        "google-12345678",
        "example@descope.com"
    ],
    "picture": "https://lh3.googleusercontent.com/a/AGNmyxbo5GOSgMt6yloUhLPrlqHwN-bdMxQR89M1ESze=s96-c",
    "test": false,
    "customAttributes": {},
    "createdTime": 1682612331
  },
  "firstSeen": false
}

You can see that picture contains a URL to the profile picture.

An example using HTML would be something like this in the front end of a web application to show the profile picture:

<!DOCTYPE html>
<html>
  <body>
    <p> Check out my cool image!</p>
    <img src="https://lh3.googleusercontent.com/a/AGNmyxbo5GOSgMt6yloUhLPrlqHwN-bdMxQR89M1ESze=s96-c" alt="JS">
  </body>
</html>

If the user is coming from OAuth, you cannot set this picture attribute either in the Console or through any of the user management APIs, as this comes from Google and not Descope.

If you have any other questions about Descope or OAuth user attributes, feel free to reach out to us!

Was this helpful?

Utilizing A User Picture from OAuth Provider

Getting the Picture from the API Response

On this page