Initial commit

Author: adamjmcgrath

.env.sample

@@ -0,0 +1,7 @@
+SECRET=some_long_secret_to encrypt_the_session_cookie
+ISSUER_BASE_URL=https://issuer.example.com
+BASE_URL=http://localhost:3000
+CLIENT_ID=your_client_id
+CLIENT_SECRET=your_client_secret
+ALLOWED_AUDIENCES=your_audience
+SCOPE=read:something

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.env

README.md

@@ -0,0 +1,15 @@
+# POC for OAuth TMI BFF
+
+This repository contains a POC for the `Token Mediating and session Information Backend For Frontend` draft [https://github.com/b---c/oauth-token-bff](https://github.com/b---c/oauth-token-bff)
+
+- A web app that does OIDC login using `express-openid-connect`
+- An API protected with `express-oauth2-bearer`
+
+The Web app also exposes the `/.well-known/bff-*` endpoints that are used by an authenticated frontend to access an API directly.
+
+```shell
+$ npm install
+$ npm start
+App listening on http://localhost:3000
+API listening on http://localhost:3001
+```

api.js

@@ -0,0 +1,21 @@
+require('dotenv').config();
+const express = require('express');
+const cors = require('cors');
+const { auth, requiredScopes } = require('express-oauth2-bearer');
+
+const api = express();
+
+api.use(
+  cors({
+    origin: process.env.BASE_URL,
+    allowedHeaders: ['Authorization'],
+  })
+);
+
+api.use(auth());
+
+api.get('/api', requiredScopes(process.env.SCOPE), (req, res) => {
+  res.json({ msg: 'Hello World!' });
+});
+
+module.exports = api;

app.js

@@ -0,0 +1,107 @@
+require('dotenv').config();
+const express = require('express');
+const { auth } = require('express-openid-connect');
+
+const app = express();
+const audience = process.env.ALLOWED_AUDIENCES;
+const scopes = `openid profile email ${process.env.SCOPE} offline_access`;
+
+app.set('views', __dirname);
+app.set('view engine', 'ejs');
+
+const requiresAuth = (req, res, next) => {
+  if (req.oidc?.isAuthenticated()) {
+    next();
+  } else {
+    next(new ATError('invalid_session', 'The user is not logged in'));
+  }
+};
+
+app.use(
+  auth({
+    authRequired: false,
+    authorizationParams: {
+      response_type: 'code',
+      audience,
+      scope: scopes,
+    },
+  })
+);
+
+app.get('/', (req, res, next) => {
+  res.render('frontend.ejs', {
+    loggedIn: req.oidc.isAuthenticated(),
+  });
+  next();
+});
+
+/**
+ * OAuth TMI BFF bit...
+ */
+
+class ATError extends Error {
+  status = 400;
+  statusCode = 400;
+
+  constructor(error, description) {
+    super(description || error);
+    this.error = error;
+    this.error_description = description;
+  }
+}
+
+app.get('/.well-known/bff-sessioninfo', requiresAuth, (req, res, next) => {
+  const user = req.oidc.user;
+  res.json(user);
+  next();
+});
+
+app.get('/.well-known/bff-token', requiresAuth, async (req, res, next) => {
+  try {
+    const { resource, scope: expected } = req.query;
+    let {
+      access_token,
+      expires_in,
+      isExpired,
+      refresh,
+      // FIXME: express-openid-connect does not expose the 'scope'
+      scope = scopes,
+    } = req.oidc.accessToken;
+
+    if (!access_token) {
+      throw new ATError('backend_not_ready', 'Missing Access Token');
+    }
+    if (resource !== undefined && resource !== audience) {
+      throw new ATError('backend_not_ready', 'Resource mismatch');
+    }
+    if (scope !== undefined && expected !== undefined) {
+      const actual = new Set(scope.split());
+      if (!expected.every(Set.prototype.has.bind(actual))) {
+        throw new ATError('backend_not_ready', 'Scope mismatch');
+      }
+    }
+    if (isExpired()) {
+      if (!req.oidc.refreshToken) {
+        throw new ATError('backend_not_ready', 'Access Token expired');
+      }
+      ({ access_token, expires_in } = await refresh());
+    }
+
+    res.json({ access_token, expires_in, scope });
+    next();
+  } catch (e) {
+    next(e);
+  }
+});
+
+/**
+ * End OAuth TMI BFF bit
+ */
+
+app.use((err, req, res, next) => {
+  res
+    .status(err.status || 500)
+    .json({ error: err.error, error_description: err.error_description });
+});
+
+module.exports = app;

frontend.ejs

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <style>
+      * { box-sizing: border-box; }
+      body { width: 50%; margin: 1rem auto; font-family: sans-serif; }
+      #result { border: 1px solid #ccc; padding: 10px; font-family: monospace; }
+      @keyframes yellowfade { from { background: #ffa; } to { background: transparent; } }
+      #result pre { animation: yellowfade 1s; padding: 5px; margin: 0; overflow: hidden; }
+  </style>
+</head>
+<body>
+<div class="wrapper">
+    <% if (!loggedIn) { %>
+      <button onclick="location.href = '/login'">login</button>
+    <% } else { %>
+        <button onclick="location.href = '/logout'">logout</button>
+        <button onclick="request(3000, '/.well-known/bff-sessioninfo')">Get User</button>
+        <button onclick="request(3001, '/api', true)">Request API</button>
+        <button onclick="request(3001, '/api', true, 'foobar')">Request API (wrong audience)</button>
+    <% } %>
+    <h3>Log:</h3>
+    <div id="result"></div>
+</div>
+<script></script>
+<script>
+  const result = document.querySelector('#result');
+
+  const log = (msg) => {
+    const item = document.createElement('pre');
+    item.innerText = `${new Date().toLocaleTimeString()} ${msg}`;
+    result.prepend(item);
+  };
+
+  let accessToken;
+  let expiresAt;
+
+  const getAccessToken = async (resource) => {
+    if (!resource && accessToken && (expiresAt > Date.now())) {
+      return accessToken;
+    }
+    const { access_token, expires_in } = await request(3000, `/.well-known/bff-token${resource && '?resource=' + resource || ''}`);
+    accessToken = access_token;
+    expiresAt = Date.now() + (expires_in * 1000);
+    return accessToken;
+  }
+
+  const request = async (port, path, requiresAt, resource) => {
+    const response = await fetch(`http://localhost:${port}${path}`, requiresAt && {
+      headers: {
+        authorization: `Bearer ${await getAccessToken(resource)}`,
+      },
+    });
+    const json = await response.json();
+    log(`${response.status} ${path} ${JSON.stringify(json, null, 2)}`);
+    return json;
+  };
+</script>
+</body>
+</html>

index.js

@@ -0,0 +1,5 @@
+const app = require('./app');
+const api = require('./api');
+
+app.listen(3000, () => console.log('App listening on http://localhost:3000'));
+api.listen(3001, () => console.log('API listening on http://localhost:3001'));