@uppy/companion-client,@uppy/provider-views: make authentication optional (#4556)

* @uppy/companion-client,@uppy/provider-views: make authentication optional in ProviderView

* try different approach

* Move authAborted translation to companion-client

* @uppy/companion-client: do not reject login promise on events from incorrect source, but always return after rejections

While these events should be ignored they might be unrelated and should not reject the whole login

* Revert "Move authAborted translation to companion-client"

This reverts commit ce7f90e455847c4d16a50dd0b07d2b70d47a3e7c.

* Check unused core locale strings in companion-client

---------

Co-authored-by: Murderlon <merlijn@soverin.net>

packages/@uppy/companion-client/src/Provider.js

@@ -7,6 +7,26 @@ const getName = (id) => {
   return id.split('-').map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(' ')
 }
 
+function getOrigin () {
+  // eslint-disable-next-line no-restricted-globals
+  return location.origin
+}
+
+function getRegex (value) {
+  if (typeof value === 'string') {
+    return new RegExp(`^${value}$`)
+  } if (value instanceof RegExp) {
+    return value
+  }
+  return undefined
+}
+
+function isOriginAllowed (origin, allowedOrigin) {
+  const patterns = Array.isArray(allowedOrigin) ? allowedOrigin.map(getRegex) : [getRegex(allowedOrigin)]
+  return patterns
+    .some((pattern) => pattern?.test(origin) || pattern?.test(`${origin}/`)) // allowing for trailing '/'
+}
+
 export default class Provider extends RequestClient {
   #refreshingTokenPromise
 
@@ -72,7 +92,10 @@ export default class Provider extends RequestClient {
   }
 
   authUrl (queries = {}) {
-    const params = new URLSearchParams(queries)
+    const params = new URLSearchParams({
+      state: btoa(JSON.stringify({ origin: getOrigin() })),
+      ...queries,
+    })
     if (this.preAuthToken) {
       params.set('uppyPreAuthToken', this.preAuthToken)
     }
@@ -80,6 +103,50 @@ export default class Provider extends RequestClient {
     return `${this.hostname}/${this.id}/connect?${params}`
   }
 
+  async login (queries) {
+    await this.ensurePreAuth()
+
+    return new Promise((resolve, reject) => {
+      const link = this.authUrl(queries)
+      const authWindow = window.open(link, '_blank')
+      const handleToken = (e) => {
+        if (e.source !== authWindow) {
+          this.uppy.log.warn('ignoring event from unknown source', e)
+          return
+        }
+
+        const { companionAllowedHosts } = this.uppy.getPlugin(this.pluginId).opts
+        if (!isOriginAllowed(e.origin, companionAllowedHosts)) {
+          reject(new Error(`rejecting event from ${e.origin} vs allowed pattern ${companionAllowedHosts}`))
+          return
+        }
+
+        // Check if it's a string before doing the JSON.parse to maintain support
+        // for older Companion versions that used object references
+        const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data
+
+        if (data.error) {
+          const { uppy } = this
+          const message = uppy.i18n('authAborted')
+          uppy.info({ message }, 'warning', 5000)
+          reject(new Error('auth aborted'))
+          return
+        }
+
+        if (!data.token) {
+          reject(new Error('did not receive token from auth window'))
+          return
+        }
+
+        authWindow.close()
+        window.removeEventListener('message', handleToken)
+        this.setAuthToken(data.token)
+        resolve()
+      }
+      window.addEventListener('message', handleToken)
+    })
+  }
+
   refreshTokenUrl () {
     return `${this.hostname}/${this.id}/refresh-token`
   }

packages/@uppy/locales/src/en_US.js

@@ -89,6 +89,7 @@ en_US.strings = {
   importFiles: 'Import files from:',
   importFrom: 'Import from %{name}',
   inferiorSize: 'This file is smaller than the allowed size of %{size}',
+  loadedXFiles: 'Loaded %{numFiles} files',
   loading: 'Loading...',
   logOut: 'Log out',
   micDisabled: 'Microphone access denied by user',

packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx

@@ -13,25 +13,6 @@ import View from '../View.js'
 
 import packageJson from '../../package.json'
 
-function getOrigin () {
-  // eslint-disable-next-line no-restricted-globals
-  return location.origin
-}
-
-function getRegex (value) {
-  if (typeof value === 'string') {
-    return new RegExp(`^${value}$`)
-  } if (value instanceof RegExp) {
-    return value
-  }
-  return undefined
-}
-function isOriginAllowed (origin, allowedOrigin) {
-  const patterns = Array.isArray(allowedOrigin) ? allowedOrigin.map(getRegex) : [getRegex(allowedOrigin)]
-  return patterns
-    .some((pattern) => pattern?.test(origin) || pattern?.test(`${origin}/`)) // allowing for trailing '/'
-}
-
 function formatBreadcrumbs (breadcrumbs) {
   return breadcrumbs.slice(1).map((directory) => directory.name).join('/')
 }
@@ -262,45 +243,14 @@ export default class ProviderView extends View {
   }
 
   async handleAuth () {
-    await this.provider.ensurePreAuth()
-
-    const authState = btoa(JSON.stringify({ origin: getOrigin() }))
     const clientVersion = `@uppy/provider-views=${ProviderView.VERSION}`
-    const link = this.provider.authUrl({ state: authState, uppyVersions: clientVersion })
-
-    const authWindow = window.open(link, '_blank')
-    const handleToken = (e) => {
-      if (e.source !== authWindow) {
-        this.plugin.uppy.log('rejecting event from unknown source')
-        return
-      }
-      if (!isOriginAllowed(e.origin, this.plugin.opts.companionAllowedHosts) || e.source !== authWindow) {
-        this.plugin.uppy.log(`rejecting event from ${e.origin} vs allowed pattern ${this.plugin.opts.companionAllowedHosts}`)
-      }
-
-      // Check if it's a string before doing the JSON.parse to maintain support
-      // for older Companion versions that used object references
-      const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data
-
-      if (data.error) {
-        this.plugin.uppy.log('auth aborted', 'warning')
-        const { uppy } = this.plugin
-        const message = uppy.i18n('authAborted')
-        uppy.info({ message }, 'warning', 5000)
-        return
-      }
-
-      if (!data.token) {
-        this.plugin.uppy.log('did not receive token from auth window', 'error')
-        return
-      }
-
-      authWindow.close()
-      window.removeEventListener('message', handleToken)
-      this.provider.setAuthToken(data.token)
+    try {
+      await this.provider.login({ uppyVersions: clientVersion })
+      this.plugin.setPluginState({ authenticated: true })
       this.preFirstRender()
+    } catch (e) {
+      this.plugin.uppy.log(`login failed: ${e.message}`)
     }
-    window.addEventListener('message', handleToken)
   }
 
   async handleScroll (event) {

private/locale-pack/test.mjs

@@ -13,7 +13,7 @@ const root = fileURLToPath(new URL('../../', import.meta.url))
 const leadingLocaleName = 'en_US'
 const mode = process.argv[2]
 const pluginLocaleDependencies = {
-  core: 'provider-views',
+  core: ['provider-views', 'companion-client'],
 }
 
 function getAllFilesPerPlugin (pluginNames) {
@@ -30,9 +30,9 @@ function getAllFilesPerPlugin (pluginNames) {
     filesPerPlugin[name] = getFiles(name)
 
     if (name in pluginLocaleDependencies) {
-      filesPerPlugin[name].push(
-        getFiles(pluginLocaleDependencies[name]),
-      )
+      for (const subDeb of pluginLocaleDependencies[name]) {
+        filesPerPlugin[name].push(...getFiles(subDeb))
+      }
     }
   }