Auth0: enriching the id token and access token

With a little auth0 experience under my belt, let’s dive further into a new topic. What are the ID Token and Access Token.

Once you log in, you get back an object that looks like this in angular

accessToken: “eyJ0eX…”
, idToken: “eyJ0eXA…”
, idTokenPayload: {
sub: “auth0|5adfa…”
, nickname: “kane”
, name: “”
, picture: “…”
, email: “”
, …

At this point, you’ve got the idTokenPayload which stores all the info you would need about the user. But if you need more, you can create additional “claims”.

To do this, create a new Rule in Start with an empty rule and paste in something like this:

function (user, context, callback) {
  const namespace = '';
  context.idToken[namespace + 'favorite_color'] = user.favorite_color;
  context.idToken[namespace + 'preferred_contact'] = user.user_metadata.preferred_contact;
  callback(null, user, context);

Now your payload should contain the favorite_color and preferred_contact fields.

But what about the backend? We only send the access Token in the Authorization header and you’ll notice that you don’t have these other neat user fields in there.

You can do the same thing with a Rule. Simply use context.accessToken instead like so:

function (user, context, callback) {
  const namespace = '';
  context.accessToken[namespace + 'favorite_color'] = user.favorite_color;
  context.accessToken[namespace + 'preferred_contact'] = user.user_metadata.preferred_contact;
  callback(null, user, context);

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: