Building a React and Node app with Aserto Authorization

Overview

  • Connections to external systems such as identity providers and source control systems
  • References to registered authorization policies
  • A user directory built from the identity providers its connected to
  • A centralized log of aggregated decisions made by the Authorizer

The Policy

What to expect

  1. Create a React application with authentication using oidc-react
  2. Set up a simple Express.js application with authentication middleware and define a protected route
  3. Create and modify a very simple authorization policy
  4. Integrate the Aserto Authorization Express.js SDK to enable fine grained access control
  5. Conditionally render UI elements based on user access

Prerequisites

  1. Node.JS installed on your machine
  2. Aserto account and credentials (if you don’t have one, sign up here!)
  3. Your favorite code editor

Add Users to the Aserto Directory

Review your Users

React Application setup

yarn create react-app aserto-react-demo
cd aserto-react-demo
yarn start

Adding OIDC dependencies

yarn add oidc-react
REACT_APP_OIDC_DOMAIN=acmecorp.demo.aserto.com
REACT_APP_OIDC_CLIENT_ID=acmecorp-app
REACT_APP_OIDC_AUDIENCE=acmecorp-app
REACT_APP_API_ORIGIN=http://localhost:8080
import { AuthProvider } from "oidc-react";
  • Email address: euang@acmecorp.com
  • Password: V@erySecre#t123!

Add a stylesheet

<link rel="stylesheet" href="https://aserto-remote-css.netlify.app/react-and-node-quickstart.css"/>

Test the application

yarn start
  • Email address: euang@acmecorp.com
  • Password: V@erySecre#t123!

Service Setup

yarn init -y
yarn add express express-jwt jwks-rsa cors express-jwt-aserto dotenv
JWKS_URI=https://acmecorp.demo.aserto.com/dex/keys
ISSUER=https://acmecorp.demo.aserto.com/dex
AUDIENCE=acmecorp-app

Update the application

import React, { useEffect } from "react";
import React, { useEffect, useCallback, useState } from "react";

Test the application

yarn add npm-run-all
"scripts": {
...
"start:server": "node service/api.js",
"start:all": "npm-run-all --parallel start start:server"
},
yarn start:all

Checkpoint

Creating a Role Based Access Control Authorization Model

Create an Aserto Policy

git clone git@github.com:<YOUR ORGANIZATION>/hello-aserto-react.git
{
"roots": ["policies"]
}
{
"roots": ["asertodemo"]
}
[policy-root].[VERB].[path]
app.get('/api/protected'...
package asertodemo.GET.api.protected

Updating the Policy Repository

git add .
git commit -m "updated policy"
git push
git tag v0.0.1
git push --tags

Checkpoint

Update the Express service to use the Aserto Express.js middleware

POLICY_ID={Your Policy ID}
AUTHORIZER_API_KEY={Your Authorizer API Key}
TENANT_ID={Your tenant ID}
POLICY_ROOT=asertodemo
AUTHORIZER_SERVICE_URL=https://authorizer.prod.aserto.com
const { jwtAuthz } = require("express-jwt-aserto")

Test the Application

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store