@uppy/provider-views: improve logging (#3638)

* add testing dynamic oauth example

* improve logging levels

Log origin errors with error level

* Update Dashboard.js

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

.env.example

@@ -49,6 +49,8 @@ VITE_UPLOADER=tus
 # VITE_UPLOADER=transloadit-xhr
 
 VITE_COMPANION_URL=http://localhost:3020
+# See also Transloadit.COMPANION_PATTERN
+VITE_COMPANION_ALLOWED_HOSTS=/\.transloadit\.com$/
 VITE_TUS_ENDPOINT=https://tusd.tusdemo.net/files/
 VITE_XHR_ENDPOINT=https://xhr-server.herokuapp.com/upload
 

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

@@ -243,9 +243,12 @@ export default class ProviderView extends View {
 
     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}`)
-        return
       }
 
       // Check if it's a string before doing the JSON.parse to maintain support
@@ -253,7 +256,7 @@ export default class ProviderView extends View {
       const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data
 
       if (data.error) {
-        this.plugin.uppy.log('auth aborted')
+        this.plugin.uppy.log('auth aborted', 'warning')
         const { uppy } = this.plugin
         const message = uppy.i18n('authAborted')
         uppy.info({ message }, 'warning', 5000)
@@ -261,7 +264,7 @@ export default class ProviderView extends View {
       }
 
       if (!data.token) {
-        this.plugin.uppy.log('did not receive token from auth window')
+        this.plugin.uppy.log('did not receive token from auth window', 'error')
         return
       }
 

private/dev/Dashboard.js

@@ -24,6 +24,7 @@ import generateSignatureIfSecret from './generateSignatureIfSecret.js'
 const {
   VITE_UPLOADER : UPLOADER,
   VITE_COMPANION_URL : COMPANION_URL,
+  VITE_COMPANION_ALLOWED_HOSTS : companionAllowedHosts,
   VITE_TUS_ENDPOINT : TUS_ENDPOINT,
   VITE_XHR_ENDPOINT : XHR_ENDPOINT,
   VITE_TRANSLOADIT_KEY : TRANSLOADIT_KEY,
@@ -75,18 +76,19 @@ export default () => {
       proudlyDisplayPoweredByUppy: true,
       note: '2 files, images and video only',
     })
-    // .use(GoogleDrive, { target: Dashboard, companionUrl: COMPANION_URL })
-    // .use(Instagram, { target: Dashboard, companionUrl: COMPANION_URL })
-    // .use(Dropbox, { target: Dashboard, companionUrl: COMPANION_URL })
-    // .use(Box, { target: Dashboard, companionUrl: COMPANION_URL })
-    // .use(Facebook, { target: Dashboard, companionUrl: COMPANION_URL })
-    // .use(OneDrive, { target: Dashboard, companionUrl: COMPANION_URL })
-    // .use(Zoom, { target: Dashboard, companionUrl: COMPANION_URL })
-    // .use(Url, { target: Dashboard, companionUrl: COMPANION_URL })
-    // .use(Unsplash, { target: Dashboard, companionUrl: COMPANION_URL })
+    // .use(GoogleDrive, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Instagram, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Dropbox, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Box, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Facebook, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(OneDrive, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Zoom, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Url, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
+    // .use(Unsplash, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
     .use(RemoteSources, {
       companionUrl: COMPANION_URL,
       sources: ['Box', 'Dropbox', 'Facebook', 'GoogleDrive', 'Instagram', 'OneDrive', 'Unsplash', 'Url'],
+      companionAllowedHosts,
     })
     .use(Webcam, {
       target: Dashboard,