DEV Community: Cliff Eby

Scopes and Permissions

Cliff Eby — Thu, 13 Aug 2020 15:46:58 +0000

Update Nov 2021 - This content is not dated. Auth0 has a simple way of dealing with the JWTs roles and scopes.

TODO - update this
I have a MEAN stack project that uses an Express/Mongoose API to access a MongoDB datastore. For authorization to endpoints, I used Auth0 and its recommended approach of Scopes which are created, stored, and assigned by API in my Auth0 account. I used Postman for testing and had several collections to test the API endpoints. I documented my work at Roch with a focus on what should be tested and error reporting.

On a recent revisit to my tests, I found several failed after I modified a setting in Auth0. This led to a review of documentation on scopes, roles, and permissions contained in the two most cited standards OAuth 2.0 and OpenID Connect. Beyond the standards, I have not found a recognized authority that explains OAuth 2.0 or OpenID Connect scopes and permissions ¹ .

The intent of this note is to document my findings and show the approach that I used to get Auth0 roles and permissions testable and working with my API server ² . Since I expect that most are interested in the latter, I will start with it.

Implementing Auth0 Permissions

Auth0 API

When authenticated by Auth0 scopes and/or permissions are passed to user in the JWT access-token. The Auth0 API “settings” for your authorized applications allows you to configure the use of Scopes or Permissions. If Role Based Access Control (RBAC) is selected for the API, you can add permissions to your access token (a second selection in Auth0). It is worth checking the JWT access token varying these selections to see the changes. (Use JWT.IO to decode the token.) Note that when RBAC permissions are added to the access token, there is no nested “scopes” object in the JWT access-token.

My API Server

Per Auth0 endpoint documentation, my API server has a sample endpoint:
router.route('/myMatch').post(jwtCheck, jwtAuthz(['create:match']), matchController.postMatch)
When scopes were used, this worked fine, but jwtCheck ignored permissions. The following change corrected the issue and allowed jwtCheck to access the nested permissons in the access-token.
const options = { customScopeKey: 'permissions' }; router.route('/matches').post(jwtCheck, jwtAuthz(['create:match'], options), matchController.postMatch)

My Angular Client

My client-side Angular app relied on Scopes for route guards and sending authenticated requests to the API server. Now that Scopes were not present, the app could only access the home screen. I could not find an "options" parameter to make permissions into scopes. This led to decoding the access-token and I used jwt-decode to access the nested permissions object. The permissions were converted to an array of Scopes that my app expected. The scope array was stored in localStorage (more on this later). My code is:
const perms = jwt_decode(localStorage.getItem("access_token")); localStorage.removeItem("scopes"); var scopes: string = "openid profile"; for (var p of perms.permissions) { scopes = scopes + " " + p; } localStorage.setItem("scopes", JSON.stringify(scopes));

Scopes, Roles and Permissions

I find the Auth0 documentation confusing in describing the difference between Scopes and Permissions. My puzzlement is likely due to lack of experience and not needing all the features of federated logons and OpenID. I do not live in the world of authentication and authorization, and that is why I chose Auth0; I did not want to become an expert.

As mentioned, OAuth 2.0 and OpenID Connect are the current standards for authorization and authentication. These standards create the ability for a consumer to sign into an app with multiple identities e.g. Facebook, GitHub and a local identity. The standards also create the ability to use a single sign-on across apps.

I reviewed the OAuth 2.0 documentation and found little on permissions. It focuses on an app’s scopes and a user’s claims. I also reviewed Azure Active Directory B2C, a competitive product to Auth0 that follows the OAuth 2.0 standard. It uses a different terminology of claims, user flows, and custom policies.

m3n7alsnak3 on Stack Overflow wrote that “Scopes are per Client app, while permissions are per user. In other words - one client app can have a scope(s) to access certain API(s), but the users of this client app will have different permissions in this api (based on their roles).” It makes sense to me for the client or API to expect “Scopes” or “Permissions from a user, but why make the distinction?

For now, I am defining each role in Auth0 to have a specific list of permissions. The client app extracts the permissions and creates a scope string containing all the expected Scopes. Reader suggestions or clarification would be appreciated.

Local Storage

Local storage aka browser storage was Auth0’s suggested datastore for SPA access tokens and decoded attributes. Its rationale was that the app needed a secret key that couldn’t be used by another app or person. Further, scopes, roles, permissions, … that would be stored in local storage are not unique. A scope of "read:members" or a role of "admin" is hardly unique to my app and not intended to be a sensitive passcode/secret credential.

More recently, the general recommendation is to avoid local storage under certain scenarios due to cross site scripting (XSS) vulnerabilities. Auth0’s recommendation is to use of OAuth’s Authorization Code Flow with Proof Key for Code Exchange (PKCE).

I will put this on my TODO list.

1: This article published in 2017 does a good job of describing OpenID concepts https://developer.okta.com/blog/2017/07/25/oidc-primer-part-1

2: I will update this post with any comments or sources that help to clarify this issue.

Initial Nulls in Angular http – Recognition, Debugging and Solutions

Cliff Eby — Mon, 13 Apr 2020 17:28:02 +0000

I’ve struggled with displaying complex-object Observables in Angular. When I try to render a variable in my template, sometimes I get nothing, other times errors, combinations of the two, and on occasion, the value with no console errors. Dealing with null or undefined objects and properties is perplexing particularly with Observables. Lack of an opinionated way of displaying objects in your template in a desired format is often frustrating.

Handling asynchronous calls to back-end data-stores creates a new way of thinking for most. The evolution from callbacks to promises to observables and their variants (subjects and behavior subjects) has greatly improved the coding experience. I find that passing asynchronous data to components using a service and observable offers a reliable and easy to grasp concept. But often I know that I have data, it just doesn’t render.

Here are few approaches that can work if you have struggled like me. A working copy of the code below is on Stackblitz at https://stackblitz.com/edit/angular-7wojgn

Part I Auto subscribe

Let’s assume the you have a service injected in your component that returns an observable from an http get.

Consider a service method that gets

{ "name": "Bob", "roles": [ { "job": "carpenter" }, { "job": "woodworker" } ] }

after at least two seconds;

fetchMembers() {
  return this.http
      .get<any[]>(
        "https://nulls-d2af3.firebaseio.com/members.json"
      )
      .delay(2000)
}

and, component code that calls service and logs the result.

  mdata: Observable<any>[];

  constructor(private _elementService: ElementService) {}

  ngOnInit(){
    this.mdata = this._elementService.fetchMembers();
    console.log(“Members”, this.mdata)

When executed, and looking at the browser console, you see immediately that “mdata” is an observable, but it doesn’t yet have data because I have not yet subscribed to the observable. I can subscribe in the component, but you don’t need to. You can use the async pipe as an alternative which auto subscribes and unsubscribes for you.

Example A. Use async to auto subscribe and unsubscribe followed by the json pipe to convert the observable object to a json string. It will display the entire

<!—A. async and json pipe -->
{{mdata | async | json }}

object and is generally an easy way to show that data is available to the template. Use of {{ mdata | json }} does not work because there is no subscription. Use of {{ mdata | async }} does not work because the object has not been converted to strings for display.

Example B. Use *ngif and async to display selected data

<!—B. *ngif and async -->
 <div *ngIf="mdata | async as mdata; else loading;">
  <h2>{{mdata.name}} {{mdata.roles[0].job}} {{mdata.roles}} </h2>
 </div>
<ng-template #loading>Loading User Data...</ng-template>

Example B will check to see if “mdata” is not null and will display “Loading User Data…” until the observable is resolved. Note that the async pipe automatically subscribes and unsubscribes to the observable. Compared to method A, expression interpolation, method B offers better granularity, and if combined with an *ngfor property arrays could display your data in final form. For this case, the template will, after two seconds, render the following:

Bob carpenter [object Object],[object Object]

As shown, {{ mdata.roles }} is unable to display the json data without a property name.

If you plan to let the async pipe do the subscribing for you, this is probably a good point to write unit tests for your service and component.

Part II Self subscribe

Most tutorials on Observables subscribe in the component. Let’s see how that changes the data in the template.

Component code that calls the service, subscribes, and logs the result.

mdata: Observable<any>[];

  constructor(private _elementService: ElementService) {}

  ngOnInit(){
  this._elementService.fetchMembers().subscribe(res => {
  this.mdata = res
  console.log('Members', this.mdata);
  });

The first thing to notice when executed is Members (in the browser console) shows the asynchronous call when Members’ properties populate after two seconds.

<!—C. async and json pipe -->
{{mdata | json }}

<!—D. *ngif and async -->

 <div *ngIf="mdata; else loading;">
  <h2 {{mdata.name}} {{mdata.roles[0].job}} {{mdata.roles[0]}} </h2>
<ng-template #loading>Loading User Data...</ng-template>

For Examples C and D, we remove the async pipe and output identical values to Part I. But since we’re subscribed, we now have other options.

Part III – Dealing with nulls – Safe-Navigation and Elvis operators

<!—E. Value of an array property -->
{{mdata.name }}

Example E accesses the observable’s description property. When executed Bob renders on the page after two seconds. Everything seems fine until you look at the console. It is littered with errors saying “ERROR TypeError: Cannot read property '0' of undefined.” These errors are produced before the observable is resolved and the console can’t say “Oh, never mind.”

To stop the errors, let’s try the Elvis operator. Use of the Elvis operator is saying get someProperty on someObject if someObject exists. It’s form is objectname?.property and can deal with deeply nested properties.

<!—F. Value of an array property with Elvis 
{{mdata?.name }}

It too renders Bob, and the console errors are gone. But what about {{ mdata?roles?.job }}? Turns out that in Angular the Elvis operator works well on nested properties and stops errors when an array is present, but it doesn’t display any data or the "object, object" notation. The Elvis operator works well for non-arrayed complex objects but could be misleading. I find that most of my data starts as an array of objects.

<!—G. Value of an array property expression
{{  mdata && mdata.name }}

Interpolation in Angular {{ expression }} evaluates the expression and we can use that evaluation to check for nulls or undefined. The table below shows some possibilities

HTML	Result	Comment
`{{ mdata && mdata.roles }}`	[object Object]	No console errors
`{{ 1 && 2 }}`	2	No console errors
`{{ 1 OR 2 }}`	1	No console errors
`{{ 3 == 3 }}`	true	No console errors
`{{ “No data” && mdata.roles[1].job }}`	woodworker	Console errors – Cannot read property [roles] - types do not match
`{{ mdata && mdata.roles[1].job }}`	woodworker	No console errors – types match

Part IV – Resources

A good article by Todd Moto

https://ultimatecourses.com/blog/angular-ngif-async-pipe

Understanding Angular Material Table Inputs

Cliff Eby — Wed, 02 Oct 2019 23:50:46 +0000

Background

About a month ago, I created my first Angular Material Table. Things went well and the implementation of filtering, sorting, and paging was as described by the docs. Several tables into my project , I had to shape my table input data. Probably due to inexperience with Observables and/or the use of EventEmitters, I began to struggle. The docs have an async http example, but it didn’t address shaping and sharing table data between components.
Searches for examples showed frustration among some. Often the input data issue was obscured by Material Table features that were unrelated to the problem. Also, I didn’t find any recommended practice for managing table input data, so I created this StackBlitz to see if I could better understand options and preferences.

Introduction

The <table mat-table> directive creates a Material Design styled data-table. Directive mat-table has a dataSource input which can be an array, an Observable array, or a DataSource instance. A <table mat-table [dataSource] = simple_array> will produce a static material-styled table. Changes to the simple array will not be propagated to the table. If <table mat-table [dataSource] = Observable<any[]>, then changes to the observable array are propagated to the table. Finally, if <table mat-table [dataSource] = DataSource instance>, then changes, sorting, filtering, pagination, etc. are encapsulated in the class instance for easy access. This instance can be created by passing an array or Observable array as follows: instance = new MatTableDataSource(array).
The StackBlitz shows the creation of Material Tables using:

static data – simple array,
a service property – DataSource Instance
a service Observable,
a service Observable in a child component – DataSource Instance,
a child component emitting to a function – DataSource Instance.

Get Started – Open the StackBlitz to follow along

I used the Material Table “Basic use of” example at https://material.angular.io/components/table/examples as a starting point. Other than the change to the [dataSource] input, the sample html was not modified.

Data are provided by an array const directly in app.component. Table No. 1 shows this implementation. Other than moving the data model interface to an external class, nothing differs from the “Basic use of” sample.
In most applications, data come from a service. I created ElementService in dataService.ts with a listElements property and a getElements() method. Table No. 2 uses the property accessor to create the table. As with Table No.1, it is a synchronous implementation.
Typically, data from a service are async using http. I mimicked this behavior with an Obervable.delay. timedelay is a variable to populate each async table sequentially. Table No. 3 subscribes to the Observable created in the service with a two second delay. On refresh, you will see this table populate after two seconds.
Tables No. 4a and 4b are examples of shaping the data input in a child component. You can pass either the observable function or the response of subscribing to the observable. I chose to pass the function and subscribed to it in the child component. The function is passed in the app.component.html as [listElementChild] = ‘elsService’. In VS Code, hovering over these objects provides the component name. [listElementChild], a service function, is passed to the child.component using the @Input() decorator. In ngOnInit, the observable is subscribed to and then new objects/records are added to the observable array.

Table No 4a. uses the child.component.html and subscribes to the passed observable function. A new element (Beryllium) is pushed onto the response and that response is set and the mat-table’s dataSource.

Table No. 4b adds a fifth element (Boron) and creates a DataSource instance as the table’s input and uses the child.component.html.
Table No.5 creates the shaped observable and emits it via the Output() decorator to the parent. The event is being watched in app.component.html by (dsEvent) = 'onChildDS($event)'. When dsEvent emits, the onChildDS() method creates a new DataSource instance.

Complex-Object Change Detection in Angular

Cliff Eby — Mon, 23 Sep 2019 21:00:27 +0000

I’m working on an Angular app that has several parent-child components. Things were going well using the @Input() and @Output() decorators to pass data between components. When I started using Angular Material tables for data display, my data object increased in complexity. Suddenly, I was getting inconsistent behavior in the view. Sometimes data were updated; other times partially, or not at all.

Researching the “change detection loop” and posts on how to force or limit change detection, offered little toward solving my problem. Blogs on zones, state change triggers, and DOM trees were informational, but none explained the inconsistent behavior. After hundreds of console.logs and breakpoints, I spotted my problem. Object properties that hold an array reference only update when another value property in the object changes. I suspect that I read something like that in a post, but to a non computer-science major, it went over my head.

Let’s look at an example. My Angular data model is defined in class Match:



  export class Match {
  name: string;
  playerNames: string[];
}

My app component creates an instance of Match which has three methods:

addName - To add a name to the playerNames array.
changeMatchName - To change the match name, and
spread - To be discussed later.



export class AppComponent {
  title = "chg-detection";
  match = new Match();
  counter: number;
  constructor() {
    this.match.playerNames = [];
    this.match.name = 'Match 0';
    this.counter = 1;
  }
  addName() {
    this.match.playerNames.push("Bob" + this.match.playerNames.length);
  }
  changeMatchName(counter) {
    this.match.name = "Match " + counter.toString();
    this.counter++;
  }
  spread() {
    this.match.playerNames = [
      ...this.match.playerNames,
      "Chuck" + this.match.playerNames.length
    ];
  }
}

The html is:



  <div style="text-align:center">
    <h1>
      Welcome to {{ title }}!
    </h1>
    <img width="300" alt="Angular Logo" src="https://d6vdma9166ldh.cloudfront.net/media/images/bd9734c9-def0-47ee-b9ec-027fcfe3cae8.png">
  </div>
  <div>1: {{match.name}} Player names: {{match.playerNames}} # of players :{{match.playerNames.length}}</div>
  <br>
  <div>2: {{match.name}} Player names: {{match.playerNames}} </div>
  <br>
  <button  color="primary" (click)="addName()">
    Add Player
  </button>
  <button  color="primary" (click)="changeMatchName(counter)">
    Change Match Name
  </button>
  <button  color="primary" (click)="spread()">
    Spread
  </button>

Note that div line 1, contains a value property length that is not included in div line 2.

The problem

When the app initiates, it ouputs:

1: Match 0 Player names: # of players :0

2: Match 0 Player names:

Step1: I add a player, line 1 adds the player name but Line 2 does not.

1: Match 0 Player names: Bob0 # of players :1

2: Match 0 Player names:

Step 2: I change the match name. Both lines 1 and 2 update player names to the current state of the Match object

1: Match 1 Player names: Bob0 # of players :1

2: Match 1 Player names: Bob0

So what is happening?

Since the addName() method is pushing a value on the match.playerNames array, the reference value of the array is not changed. Only on Line 1 where the “value” of the array length is changed in the view, does Angular’s change detection loop update that div of interpolated expressions. So not only do the component and its view have different change detection loops, but the view is granular in what gets updated. That results in Line 1 with current values of player names, and Line 2 with stale values.

In Step 2, changing the match’s name, which is assigned by value, creates a change detection cycle on both div lines resulting in both lines showing the current state of players.

This StackBlitz link provides a working demo.

Why this inconsistency?

For most apps, I would expect that the current values of an object’s properties are what is anticipated in the view. I have not seen an explanation of why array or other reference objects are not part of change detection, but I suspect it is performance based since navigating the entire tree and especially big arrays can be expensive. In support of this conclusion, Angular does offer a “ChangeDetectionStrategy.OnPush” strategy to limit change detection to only part of the component tree. The rationale for .onPush is performance improvement.

The fix

Several options are possible to force change detection on a reference value. They all rely on the Angular change detection principle that new objects are always updated.

An ngrx approach with a Redux store.
Use of immutable.js
Use of the ES6 spread operator.

I chose the spread operator as it seemed it is the easiest to implement, to understand, and it is native to javascript. The spread operator has the form data = {…data, new} where new replaces or adds values to the existing data object and creates a new object value. More on spread can be found here.

In my example the:



this.match.playerNames.push(‘Bob’) 

becomes

this.match.playerNames = [...this.match.playerNames, 'Chuck'];

Another approach would be to use a service to retrieve the data object. In my case, the server data model uses a player id property in match to reference all player attributes. Including playerNames in that model would add redundant data to the backend datastore or would create a complex angular service using Local Storage.