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

adapter/i18n/en.pot

@@ -5,8 +5,14 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2022-09-22T19:11:17.660Z\n"
-"PO-Revision-Date: 2022-09-22T19:11:17.660Z\n"
+"POT-Creation-Date: 2022-10-18T07:20:55.997Z\n"
+"PO-Revision-Date: 2022-10-18T07:20:55.997Z\n"
+
+msgid "You don't have access to the {{appName}} app"
+msgstr "You don't have access to the {{appName}} app"
+
+msgid "Contact your system administrator for assistance with app access."
+msgstr "Contact your system administrator for assistance with app access."
 
 msgid "Save your data"
 msgstr "Save your data"

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, plugin }) => {
  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, plugin }) => {
  {!plugin && <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,57 @@
+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 APP_AUTH_NAME = process.env.REACT_APP_DHIS2_APP_AUTH_NAME
+const LEGACY_APP_AUTH_NAME = process.env.REACT_APP_DHIS2_APP_LEGACY_AUTH_NAME
+
+const isAppAvailable = ({ userAuthorities, apiVersion }) => {
+ // Skip check on dev
+ if (!IS_PRODUCTION_ENV) {
+ return true
+ }
+
+ // On server versions < 35, auth name uses config.title instead of .name
+ const requiredAppAuthority =
+ apiVersion >= 35 ? APP_AUTH_NAME : LEGACY_APP_AUTH_NAME
+
+ // Check for three possible authorities
+ return userAuthorities.some((authority) =>
+ ['ALL', APP_MANAGER_AUTHORITY, requiredAppAuthority].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, apiVersion } = useConfig()
+
+ return isAppAvailable({ userAuthorities: user.authorities, apiVersion }) ? (
+ children
+ ) : (
+ <CenteredContent>
+ <NoticeBox
+ error
+ title={i18n.t("You don't have access to the {{appName}} app", {
+ appName,
+ })}
+ >
+ {i18n.t(
+ 'Contact your system administrator for assistance with app access.'
+ )}
+ </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/constructAppUrl.js

@@ -1,12 +1,16 @@
-module.exports.constructAppUrl = (baseUrl, config, serverVersion) => {
+const formatUrlSafeAppSlug = (appName) => {
+ return appName.replace(/[^A-Za-z0-9\s-]/g, '').replace(/\s+/g, '-')
+}
+
+const constructAppUrl = (baseUrl, config, serverVersion) => {
  let appUrl = baseUrl
 
  const isModernServer = serverVersion.major >= 2 && serverVersion.minor >= 35
 
  // From core version 2.35, short_name is used instead of the human-readable title to generate the url slug
- const urlSafeAppSlug = (isModernServer ? config.name : config.title)
- .replace(/[^A-Za-z0-9\s-]/g, '')
-  .replace(/\s+/g, '-')
+ const urlSafeAppSlug = formatUrlSafeAppSlug(
+ isModernServer ? config.name : config.title
+ )
 
  // From core version 2.35, core apps are hosted at the server root under the /dhis-web-* namespace
  if (config.coreApp && isModernServer) {
@@ -25,3 +29,8 @@ module.exports.constructAppUrl = (baseUrl, config, serverVersion) => {
  appUrl = scheme + appUrl.substr(scheme.length).replace(/\/+/g, '/')
  return appUrl
 }
+
+module.exports = {
+ constructAppUrl,
+ formatUrlSafeAppSlug,
+}

cli/src/lib/formatAppAuthName.js

@@ -0,0 +1,35 @@
+const { formatUrlSafeAppSlug } = require('./constructAppUrl')
+
+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'
+ *
+ * The 'legacy' parameter specifies server version < 2.35 which uses
+ * config.title instead of config.name
+ */
+const formatAppAuthName = ({ config, legacy }) => {
+ const appName = legacy ? config.title : config.name
+
+ if (config.coreApp) {
+ return APP_AUTH_PREFIX + DHIS_WEB + formatUrlSafeAppSlug(appName)
+ }
+
+ // 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 +
+ appName
+ .trim()
+ .replace(/[^a-zA-Z0-9\s]/g, '')
+ .replace(/\s/g, '_')
+ )
+}
+
+module.exports = formatAppAuthName

cli/src/lib/formatAppAuthName.test.js

@@ -0,0 +1,39 @@
+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')
+ })
+})
+
+describe('legacy app handling', () => {
+ it('should use title instead of name if the legacy flag is added', () => {
+ const config = {
+ name: 'Multi Word App Name',
+ title: 'Title of the App',
+ }
+ const formattedAuthName = formatAppAuthName({ config, legacy: true })
+
+ expect(formattedAuthName).not.toBe('M_Multi_Word_App_Name')
+ expect(formattedAuthName).toBe('M_Title_of_the_App')
+ })
+})

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,8 @@ module.exports = ({ config, paths }) => {
  const baseEnvVars = {
  name: config.title,
  version: config.version,
+ auth_name: formatAppAuthName({ config }),
+ legacy_auth_name: formatAppAuthName({ config, legacy: true }),
  }
 
  return {

examples/pwa-app/d2.config.js

@@ -1,5 +1,7 @@
 const config = {
  type: 'app',
+ name: 'pwa-example',
+ title: 'PWA Example',
 
  pwa: {
  enabled: true,