Switch to keycloak from auth0

api/package.json

@@ -42,11 +42,11 @@
     "eslint-loader": "^1.9.0",
     "eslint-plugin-import": "^2.8.0",
     "express": "^4.16.2",
-    "express-jwt": "^5.3.0",
     "graphql": "15.3.0",
     "graphql-resolvers": "0.4.2",
     "graphql-tools": "6.2.0",
-    "jwks-rsa": "^1.2.1",
+    "keycloak-connect": "^11.0.2",
+    "keycloak-connect-graphql": "^0.6.3",
     "lodash": "^4.17.11",
     "mime": "^2.0.3",
     "mocha": "^4.0.1",

api/src/graphql/authorization/index.js

@@ -1,8 +1,8 @@
 import { skip, combineResolvers } from 'graphql-resolvers';
 
 // eslint-disable-next-line arrow-body-style
-export const isAuthenticated = (obj, args, { user }) => {
-  return (user && user.role) ? skip : new Error("User isn't authenticated");
+export const isAuthenticated = (obj, args, { kauth }) => {
+  return kauth.isAuthenticated() ? skip : new Error("User isn't authenticated");
 };
 
 export const isAdmin = combineResolvers(

api/src/index.js

@@ -2,8 +2,8 @@ import express from 'express';
 import cors from 'cors';
 import { createServer } from 'http';
 import { ApolloServer } from 'apollo-server-express';
-import expressJwt from 'express-jwt';
-import jwksRsa from 'jwks-rsa';
+import Keycloak from 'keycloak-connect';
+import { KeycloakContext } from 'keycloak-connect-graphql';
 import neo4jDriver from './db/neo4jDriver';
 import schema from './graphql/schema';
 import startSchedulers from './services/scheduler';
@@ -19,36 +19,32 @@ if (!NODE_ENV || NODE_ENV.includes('dev')) {
   app.use(cors());
 }
 
-app.use(expressJwt({
-  credentialsRequired: false,
-  // Dynamically provide a signing key based on the kid in the header
-  // and the singing keys provided by the JWKS endpoint
-  secret: jwksRsa.expressJwtSecret({
-    cache: true,
-    rateLimit: true,
-    jwksRequestsPerMinute: 5,
-    jwksUri: 'https://platoproject.eu.auth0.com/.well-known/jwks.json',
-  }),
-}));
+const keycloak = new Keycloak({}, {
+  realm: process.env.KEYCLOAK_REALM,
+  'auth-server-url': process.env.KEYCLOAK_SERVER_URL,
+  'ssl-required': 'external',
+  resource: process.env.KEYCLOAK_CLIENT,
+  'public-client': true,
+  'confidential-port': 0,
+});
 
-function getUser(user) {
-  if (!user) return null;
-  return Object.assign(
-    {},
-    user,
-    {
-      email: user['https://realities.platoproject.org/email'],
-      role: user['https://realities.platoproject.org/role'],
-    },
-  );
-}
+app.use('/graphql', keycloak.middleware());
 
 const server = new ApolloServer({
   schema,
-  context: async ({ req }) => ({
-    user: getUser(req && req.user),
-    driver: neo4jDriver,
-  }),
+  context: async ({ req }) => {
+    const kauth = new KeycloakContext({ req });
+
+    return {
+      kauth,
+      user: {
+        email: kauth.accessToken && kauth.accessToken.content.email,
+        role: 'user',
+        // TODO: put the user's tenantId here
+      },
+      driver: neo4jDriver,
+    };
+  },
   tracing: true,
 });
 server.applyMiddleware({ app, path: '/graphql' });

ui/.env

@@ -1,6 +1,6 @@
 REACT_APP_GRAPHQL_ENDPOINT=http://localhost:3100/graphql
 REACT_APP_GRAPHQL_SUBSCRIPTION=ws://localhost:3100/graphql
-REACT_APP_AUTH0_DOMAIN=platoproject.eu.auth0.com
-REACT_APP_AUTH0_CLIENT_ID=LEdrYzy4Gg5Eoj4WJWPjPKpR8u3tpVhm
-REACT_APP_AUTH0_AUDIENCE=https://realities-api.platoproject.org
-REACT_APP_AUTH0_CALLBACK_URL=http://localhost:3000/auth-callback
+REACT_APP_KEYCLOAK_CALLBACK_URL=http://localhost:3000/auth-callback
+REACT_APP_KEYCLOAK_SERVER_URL=https://auth.platoproject.org/auth/
+REACT_APP_KEYCLOAK_REALM=plato
+REACT_APP_KEYCLOAK_CLIENT=realities

ui/package.json

@@ -18,9 +18,11 @@
   },
   "dependencies": {
     "@apollo/client": "3.1.3",
+    "@react-keycloak/web": "3.4.0",
     "auth0-js": "^8.12.1",
     "autoprefixer": "7.1.6",
     "babel-core": "6.26.0",
+    "babel-eslint": "^8.0.3",
     "babel-jest": "20.0.3",
     "babel-loader": "7.1.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -30,6 +32,7 @@
     "bootstrap": "^4.1.3",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
+    "css-loader": "^0.28.7",
     "dotenv": "4.0.0",
     "downshift": "6.0.6",
     "eslint": "4.10.0",
@@ -40,16 +43,19 @@
     "eslint-plugin-jsx-a11y": "6.0.2",
     "eslint-plugin-react": "7.4.0",
     "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "^1.1.5",
     "formik": "2.1.5",
     "fs-extra": "3.0.1",
     "graphql": "15.3.0",
     "history": "^4.7.2",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
     "jquery": "^3.2.1",
+    "keycloak-js": "^9.0.0",
     "lodash": "^4.17.4",
     "mime": "^2.0.3",
     "node-fetch": "^2.3.0",
+    "node-sass": "4.14.1",
     "object-assign": "4.1.1",
     "popper.js": "^1.12.9",
     "postcss-flexbugs-fixes": "3.2.0",
@@ -67,22 +73,18 @@
     "react-router-dom": "5.2.0",
     "react-tag-input": "^4.7.2",
     "reactstrap": "8.5.1",
+    "sass-loader": "^6.0.6",
     "store": "^2.0.12",
+    "style-loader": "^0.19.0",
     "styled-components": "5.2.0",
     "subscriptions-transport-ws": "^0.9.15",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.6.2",
+    "webpack": "^3.8.1",
     "webpack-dev-server": "2.9.4",
     "webpack-manifest-plugin": "1.3.2",
     "whatwg-fetch": "2.0.3",
-    "yup": "^0.26.6",
-    "babel-eslint": "^8.0.3",
-    "css-loader": "^0.28.7",
-    "file-loader": "^1.1.5",
-    "node-sass": "4.14.1",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
-    "webpack": "^3.8.1"
+    "yup": "^0.26.6"
   },
   "jest": {
     "collectCoverageFrom": [

ui/src/App/App.js

@@ -1,12 +1,46 @@
 import React from 'react';
+import Keycloak from 'keycloak-js';
+import { ReactKeycloakProvider } from '@react-keycloak/web';
+import useAuth from '@/services/useAuth';
 import { ApolloProvider } from '@apollo/client';
 import apolloClient from '@/services/apolloClient';
 import AuthRoutesContainer from './components/AuthRoutesContainer';
 
+const keycloak = Keycloak({
+  realm: process.env.REACT_APP_KEYCLOAK_REALM,
+  url: process.env.REACT_APP_KEYCLOAK_SERVER_URL,
+  'ssl-required': 'external',
+  'public-client': true,
+  'confidential-port': 0,
+  clientId: process.env.REACT_APP_KEYCLOAK_CLIENT,
+});
+
+// const eventLogger = (event, error) => {
+//   console.log('onKeycloakEvent', event, error);
+// };
+
+const ApolloSetup = () => {
+  const { accessToken } = useAuth();
+
+  return (
+    <ApolloProvider client={apolloClient(accessToken)}>
+      <AuthRoutesContainer />
+    </ApolloProvider>
+  );
+};
+
 const App = () => (
-  <ApolloProvider client={apolloClient}>
-    <AuthRoutesContainer />
-  </ApolloProvider>
+  <ReactKeycloakProvider
+    authClient={keycloak}
+    // onEvent={eventLogger}
+    initOptions={{
+      // https://www.keycloak.org/docs/latest/securing_apps/index.html#_modern_browsers
+      silentCheckSsoFallback: false,
+      silentCheckSsoRedirectUri: process.env.REACT_APP_KEYCLOAK_CALLBACK_URL,
+    }}
+  >
+    <ApolloSetup />
+  </ReactKeycloakProvider>
 );
 
 export default App;

ui/src/App/components/AuthRoutesContainer/AuthRoutesContainer.js

@@ -8,7 +8,6 @@ import history from '@/services/history';
 import AuthCallback from './components/AuthCallback';
 import RoutesContainer from './components/RoutesContainer';
 
-
 const AuthRoutesContainer = () => (
   <Router history={history}>
     <Switch>