Display button for a specific role

[k-auth0]

Hello Auth0 Team

Can you update the below example to demonstrate - usage of roles

The Complete Guide to Angular User Authentication with Auth0

Scenario: Show External Link only if role is admin or something like that

[stephanie.chamblee]

Hi @k-auth0,

I’m happy to pass on that feedback!

You should be able to conditionally render a button based on role by:

1. Add the role to the ID Token:

function (user, context, callback) {
  const namespace = 'http://demozero.net';
  const assignedRoles = (context.authorization || {}).roles;

  let idTokenClaims = context.idToken || {};
  let accessTokenClaims = context.accessToken || {};

  idTokenClaims[`${namespace}/roles`] = assignedRoles;
  accessTokenClaims[`${namespace}/roles`] = assignedRoles;

  context.idToken = idTokenClaims;
  context.accessToken = accessTokenClaims;

  callback(null, user, context);
}

2. check for the role when rendering the button (here’s an example from altering the Angular Quickstart src/app/components/nav-bar/nav-bar.component.html):

          <!-- Fullsize dropdown: show if authenticated -->
          <li
            class="nav-item dropdown"
            *ngIf="auth.user$ | async as user"
            ngbDropdown
          >
            <a
              ngbDropdownToggle
              class="nav-link dropdown-toggle"
              id="profileDropDown"
              data-toggle="dropdown"
            >
              <!-- Profile image should be set to the profile picture from the id token -->
              <img
                [src]="user.picture"
                alt="Profile picture"
                class="nav-user-profile rounded-circle"
                style="width: 75px;"
              />
            </a>
            <div class="dropdown-menu dropdown-menu-left" ngbDropdownMenu>
              <!-- Show the user's full name from the id token here -->
              <div class="dropdown-header">
                {{ user.name }}
              </div>
              <a routerLink="/profile" class="dropdown-item dropdown-profile">
                <fa-icon [icon]="faUser" class="mr-3"></fa-icon> Profile
              </a>
              <button
                (click)="logout()"
                class="btn btn-link dropdown-item"
                id="qsLogoutBtn"
              >
                <fa-icon [icon]="faPowerOff" class="mr-3"></fa-icon> Log out
              </button>
              <!-- Conditional button in nav if the user has the role "admin" -->
              <button
                class="btn btn-primary btn-block"
                id="qsLoginBtn"
                *ngIf="user['http://demozero.net/roles'].includes('admin')"
                (click)="loginWithRedirect()"
              >
                Conditional button
              </button>

            </div>
          </li>

[k-auth0]

@stephanie.chamblee

Add the role to the ID Token:

I presume this goes in Rules inside Auth0?

[stephanie.chamblee]

Yes, that is correct! This is the code for a rule in your Auth0 tenant:

function (user, context, callback) {
  const namespace = 'http://demozero.net';
  const assignedRoles = (context.authorization || {}).roles;

  let idTokenClaims = context.idToken || {};
  let accessTokenClaims = context.accessToken || {};

  idTokenClaims[`${namespace}/roles`] = assignedRoles;
  accessTokenClaims[`${namespace}/roles`] = assignedRoles;

  context.idToken = idTokenClaims;
  context.accessToken = accessTokenClaims;

  callback(null, user, context);
}