fix: check authorities in app adapter [LIBS-370]

adapter/src/components/AppWrapper.js

@@ -3,14 +3,15 @@ import React from 'react'
 import { useCurrentUserLocale } from '../utils/useLocale.js'
 import { useVerifyLatestUser } from '../utils/useVerifyLatestUser.js'
 import { Alerts } from './Alerts.js'
+import { AuthBoundary } from './AuthBoundary.js'
 import { ConnectedHeaderBar } from './ConnectedHeaderBar.js'
 import { ErrorBoundary } from './ErrorBoundary.js'
 import { LoadingMask } from './LoadingMask.js'
 import { styles } from './styles/AppWrapper.style.js'
 
 export const AppWrapper = ({ children }) => {
  const { loading: localeLoading } = useCurrentUserLocale()
- const { loading: latestUserLoading } = useVerifyLatestUser()
+ const { loading: latestUserLoading, user } = useVerifyLatestUser()
 
  if (localeLoading || latestUserLoading) {
  return <LoadingMask />
@@ -22,7 +23,7 @@ export const AppWrapper = ({ children }) => {
  <ConnectedHeaderBar />
  <div className="app-shell-app">
  <ErrorBoundary onRetry={() => window.location.reload()}>
- {children}
+ <AuthBoundary user={user}>{children}</AuthBoundary>
  </ErrorBoundary>
  </div>
  <Alerts />

adapter/src/components/AuthBoundary.js

@@ -0,0 +1,50 @@
+import { useConfig } from '@dhis2/app-runtime'
+import { CenteredContent, NoticeBox } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../locales'
+
+const IS_PRODUCTION_ENV = process.env.NODE_ENV === 'production'
+const APP_MANAGER_AUTHORITY = 'M_dhis-web-maintenance-appmanager'
+const REQUIRED_APP_AUTHORITY = process.env.REACT_APP_DHIS2_APP_AUTH_NAME
+
+const isAppAvailable = (authorities) => {
+ // Skip check on dev
+ // TODO: should we check on dev environments too?
+ if (!IS_PRODUCTION_ENV) {
+ return true
+ }
+ // Check for three possible authorities
+ return authorities.some((authority) =>
+ ['ALL', APP_MANAGER_AUTHORITY, REQUIRED_APP_AUTHORITY].includes(
+ authority
+ )
+ )
+}
+
+/**
+ * Block the app if the user doesn't have the correct permissions to view this
+ * app.
+ */
+export function AuthBoundary({ user, children }) {
+ const { appName } = useConfig()
+
+ return isAppAvailable(user.authorities) ? (
+ children
+ ) : (
+ <CenteredContent>
+ <NoticeBox error title={i18n.t('Forbidden')}>
+ {i18n.t(
+ "You don't have access to the {{appName}} app. Contact your system administrator if this seems to be an error.",
+ { appName }
+ )}
+ </NoticeBox>
+ </CenteredContent>
+ )
+}
+AuthBoundary.propTypes = {
+ children: PropTypes.node,
+ user: PropTypes.shape({
+ authorities: PropTypes.arrayOf(PropTypes.string),
+ }),
+}

adapter/src/utils/useVerifyLatestUser.js

@@ -8,7 +8,7 @@ import { useState } from 'react'
 const USER_QUERY = {
  user: {
  resource: 'me',
- params: { fields: ['id'] },
+ params: { fields: ['id', 'username', 'authorities'] },
  },
 }
 
@@ -22,7 +22,7 @@ const LATEST_USER_KEY = 'dhis2.latestUser'
 export function useVerifyLatestUser() {
  const { pwaEnabled } = useConfig()
  const [finished, setFinished] = useState(false)
- const { loading, error } = useDataQuery(USER_QUERY, {
+ const { loading, error, data } = useDataQuery(USER_QUERY, {
  onComplete: async (data) => {
  const latestUserId = localStorage.getItem(LATEST_USER_KEY)
  const currentUserId = data.user.id
@@ -38,10 +38,9 @@ export function useVerifyLatestUser() {
  setFinished(true)
  },
  })
-
  if (error) {
  throw new Error('Failed to fetch user ID: ' + error)
  }
 
- return { loading: loading || !finished }
+ return { loading: loading || !finished, user: data?.user }
 }

cli/src/lib/formatAppAuthName.js

@@ -0,0 +1,30 @@
+const APP_AUTH_PREFIX = 'M_'
+const DHIS_WEB = 'dhis-web-'
+
+/**
+ * Returns the string that identifies the 'App view permission'
+ * required to view the app
+ *
+ * Ex: coreApp && name = 'data-visualizer': authName = 'M_dhis-web-data-visualizer'
+ * Ex: name = 'pwa-example': authName = 'M_pwaexample'
+ * Ex: name = 'BNA Action Tracker': authName = 'M_BNA_Action_Tracker'
+ */
+const formatAppAuthName = (config) => {
+ if (config.coreApp) {
+ // TODO: Verify this formatting - are there any transformations,
+ // or do we trust that it's lower-case and hyphenated?
+ return APP_AUTH_PREFIX + DHIS_WEB + config.name
+ }
+
+ // This formatting is drawn from https://github.com/dhis2/dhis2-core/blob/master/dhis-2/dhis-api/src/main/java/org/hisp/dhis/appmanager/App.java#L494-L499
+ // (replaceAll is only introduced in Node 15)
+ return (
+ APP_AUTH_PREFIX +
+ config.name
+ .trim()
+ .replace(/[^a-zA-Z0-9\s]/g, '')
+ .replace(/\s/g, '_')
+ )
+}
+
+module.exports = formatAppAuthName

cli/src/lib/formatAppAuthName.test.js

@@ -0,0 +1,26 @@
+const formatAppAuthName = require('./formatAppAuthName.js')
+
+describe('core app handling', () => {
+ it('should handle core apps', () => {
+ const config = { coreApp: true, name: 'data-visualizer' }
+ const formattedAuthName = formatAppAuthName(config)
+
+ expect(formattedAuthName).toBe('M_dhis-web-data-visualizer')
+ })
+})
+
+describe('non-core app handling', () => {
+ it('should handle app names with hyphens', () => {
+ const config = { name: 'hyphenated-string-example' }
+ const formattedAuthName = formatAppAuthName(config)
+
+ expect(formattedAuthName).toBe('M_hyphenatedstringexample')
+ })
+
+ it('should handle app names with capitals and spaces', () => {
+ const config = { name: 'Multi Word App Name' }
+ const formattedAuthName = formatAppAuthName(config)
+
+ expect(formattedAuthName).toBe('M_Multi_Word_App_Name')
+ })
+})

cli/src/lib/shell/index.js

@@ -1,4 +1,5 @@
 const { exec } = require('@dhis2/cli-helpers-engine')
+const formatAppAuthName = require('../formatAppAuthName')
 const { getPWAEnvVars } = require('../pwa')
 const bootstrap = require('./bootstrap')
 const getEnv = require('./env')
@@ -7,6 +8,7 @@ module.exports = ({ config, paths }) => {
  const baseEnvVars = {
  name: config.title,
  version: config.version,
+ auth_name: formatAppAuthName(config),
  }
 
  return {

pwa/src/service-worker/service-worker.js

@@ -99,17 +99,18 @@ export function setUpServiceWorker() {
  const navigationRouteHandler = ({ request }) => {
  return fetch(request)
  .then((response) => {
- if (response.type === 'opaqueredirect') {
- // It's sending a redirect to the login page. Return
- // that to the client
+ if (response.type === 'opaqueredirect' || !response.ok) {
+ // It's sending a redirect to the login page,
+ // or an 'unauthorized'/'forbidden' response.
+ // Return that to the client
  return response
  }
 
  // Otherwise return precached index.html
  return matchPrecache(indexUrl)
  })
  .catch(() => {
- // Request failed (maybe offline). Return cached response
+ // Request failed (probably offline). Return cached response
  return matchPrecache(indexUrl)
  })
  }
@@ -143,7 +144,8 @@ export function setUpServiceWorker() {
  ({ url }) =>
  PRODUCTION_ENV &&
  urlMeetsAppShellCachingCriteria(url) &&
- fileExtensionRegexp.test(url.pathname),
+ fileExtensionRegexp.test(url.pathname) &&
+ !/\.(json|action)/.test(url.pathname), // don't SWR these
  new StaleWhileRevalidate({ cacheName: 'other-assets' })
  )