{ message: "Not Found" } when settings COMPANION_PATH="/"

[masudhossain]

Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

And my uppy code is

userFilerpickerUrl.use(Dropbox, {
      target: Dashboard,
      companionUrl: 'https://uppyjs.queue.ngrok.io',
    })

My companion app code is below with the dropbox keys omitted

// index.js
const express = require('express')
const companion = require('@uppy/companion')
const bodyParser = require('body-parser')
const session = require('express-session')

const app = express()

app.use(bodyParser.json())
app.use(session({
  secret: 'some-secret',
  resave: true,
  saveUninitialized: true
}))

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*')
  res.setHeader(
    'Access-Control-Allow-Methods',
    'GET, POST, OPTIONS, PUT, PATCH, DELETE'
  )
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Authorization, Origin, Content-Type, Accept'
  )
  res.setHeader('Access-Control-Allow-Credentials', 'true')
  next()
})

// Routes
app.get('/', (req, res) => {
  res.setHeader('Content-Type', 'text/plain')
  res.send('Welcome to Companion')
})

// initialize uppy
const uppyOptions = {
  providerOptions: {
    dropbox: {
      key: 'KEY',
      secret: 'SECRET',
    },
  },
  server: {
    host: "uppyjs.queue.ngrok.io",
    protocol: "https"
  },
  filePath: "./output",
  secret: "some-secret",
  debug: true
};

app.use(companion.app(uppyOptions))

// handle 404
app.use((req, res, next) => {
  return res.status(404).json({ message: 'Not Found' })
})

// handle server errors
app.use((err, req, res, next) => {
  console.error('\x1b[31m', err.stack, '\x1b[0m')
  res.status(err.status || 500).json({ message: err.message, error: err })
})

companion.socket(app.listen(process.env.PORT || 3020), uppyOptions)

console.log('Welcome to Companion!')

"@uppy/core": "^1.20.1",
"@uppy/dropbox": "^1.4.19",
"@uppy/companion": "^0.15.0",

Expected behavior

Proceed with grabbing the files properly on uppy.

Actual behavior

I clicked on Connect to Dropbox and it authenticates perfectly all the way, but arrives to a page that outputs below.

{
   message: "Not Found"
}

When i click the Dropbox icon on the uppy dashboard, i see this error on the console

[Murderlon]

Hi, my gut feeling is you misconfigured your app or used the wrong credentials. 401 Unauthorized seems to indicate this and the fact that Dropbox works on our example page: https://uppy.io/examples/dashboard/

[masudhossain]

Hi, my gut feeling is you misconfigured your app or used the wrong credentials. 401 Unauthorized seems to indicate this and the fact that Dropbox works on our example page: https://uppy.io/examples/dashboard/

I doubt it since i copy and pasted. But here's some proof if that helps. Does the dropbox api need to be in production or something? Or my Nodejs or dropbox version?

Here's the redirect URLs:

[mifi]

Hi. what's the page that you arrive at that gives you the not found json? what's the URL? you might want to redact secrets from the url

[masudhossain]

Hi. what's the page that you arrive at that gives you the not found json? what's the URL? you might want to redact secrets from the url

Below. I don't know if this is a security risk, but that dropbox account has nothing.
https://uppyjs.queue.ngrok.io/dropbox/callback?access_token=sl.BW34ukA-RaxRkMcO_OeRSz1O_EkH9QEmHZZV0aIbXU4B-iwIKvE4MGxiPZ7GjK8y5nVBYPDMe1M4YfixuSfYYoUIjqDDQOgso8alkEjlzdkYWKfiE9l5A-4wqA9ofPI6hHGR9vnt&raw%5Baccess_token%5D=sl.BW34ukA-RaxRkMcO_OeRSz1O_EkH9QEmHZZV0aIbXU4B-iwIKvE4MGxiPZ7GjK8y5nVBYPDMe1M4YfixuSfYYoUIjqDDQOgso8alkEjlzdkYWKfiE9l5A-4wqA9ofPI6hHGR9vnt&raw%5Btoken_type%5D=bearer&raw%5Bexpires_in%5D=14400&raw%5Bscope%5D=account_info.read%20file_requests.read%20file_requests.write%20files.content.read%20files.content.write%20files.metadata.read%20sharing.read%20sharing.write&raw%5Buid%5D=133918262&raw%5Baccount_id%5D=dbid%3AAAAZmM-ZdF8J5igpVi5bExnxYXlS1xnUawE

[mifi]

the problem is that express is returning 404 ("not found") due to the url not being recognized (as seen from your example code).

I think you have a possible error in your code, in particular where you initialize companion app.use(companion.app(uppyOptions)). Can you try again, and base your code off of this example code: https://github.com/transloadit/uppy/blob/main/examples/uppy-with-companion/server/index.js

the 401 error is expected btw (because you're not yet authenticated) - it's not a problem and unrelated to this issue.

[mifi]

closing due to not response

[movy]

I faced exactly the same scenario, and after several days of trial and error found out that COMPANION_PATH CANNOT be set to /.

This is seriously mind blowing and nearly impossible to debug in a normal way, as there's not a single hint in docs or logs why 404 is returned when COMPANION_PATH="/".

Once again, this is not a misconfiguration in proxy or express app, as identical behaviour is observed with basic . .env; npx companion.

Sample requests to localhost for sake of clarity:

 $ # COMPANION_PATH unset
 $ curl http://localhost:3030/connect/dropbox
Found. Redirecting to https://www.dropbox.com/oauth2/authorize?client_id=lalalafafafa&response_type=code&redirect_uri=https%3A%2F%2Fu1.domain.com%2F%2Fdropbox%2Fredirect&token_access_type=offline%        
                                                                                        
 $ # COMPANION_PATH="/"                          
 $ curl http://localhost:3030/connect/dropbox
{"message":"Not Found"}%           
                                                               
 $ # COMPANION_PATH="/foobar"
 $ curl http://localhost:3030/foobar/connect/dropbox
Found. Redirecting to https://www.dropbox.com/oauth2/authorize?client_id=lalalafafafa&response_type=code&redirect_uri=https%3A%2F%2Fu1.domain.com%2F%2Ffoobar%2Fdropbox%2Fredirect&token_access_type=offline%                                                                                       
 

Hope it helps someone and gets mentioned in the docs. I really need a drink now.

[Murderlon]

Haven't confirmed myself, but we should confirm this as this would be a bug.

[Murderlon]

Just tested locally and with COMPANION_PATH="/" and Google Drive and it works as expected. Maybe you haven't configured your Dropbox settings correctly.

[Murderlon]

If you try out https://uppy.io/examples/ then it uses a live Companion server on "/" as well.

Can reopen if it turns out to be a bug.

[movy]

I used vanilla companion + .env because I could not make my own express middleware work, but now I reverted everything back to express, and still can confirm that setting path: '/' (which is equal to COMPANION_PATH="/") breaks dropbox auth. Haven't tested with Gdrive yet, it's my next step once I figure out why i'm getting 'Cannot find state in session` now. Will dig thru #3538 tomorrow, I just wish it all was described in documentation with some working code examples.

My express setup:

import { app as companion, socket } from '@uppy/companion'
import dotenv from 'dotenv'
import express from 'express'
import bodyParser from 'body-parser'
import session from 'express-session'
import { createClient } from 'redis'
import RedisStore from 'connect-redis'

dotenv.config()
const app = express()
app.use(bodyParser.json())
const redisClient = createClient({
    port: 6379,
    url: process.env.COMPANION_REDIS_URL,

})
await redisClient.connect().catch(console.error)

// NOT FOR PRODUCTION
// app.use(expressSession({
//     secret: process.env.COMPANION_SECRET,
//     cookie: { maxAge: 43200 }}))

app.use(session({
    store: new RedisStore({ client: redisClient, prefix: 'uppy' }),
    secret: process.env.COMPANION_SECRET,
    resave: false,
    saveUninitialized: false,
    cookie: {
        secure: true, // if true only transmit cookie over https
        httpOnly: false, // if true prevent client side JS from reading the cookie 
        maxAge: 1000 * 60 * 24 * 30 // session max age in miliseconds
    }
}))

const companionOptions = {
    providerOptions: {
        dropbox: {
            key: process.env.COMPANION_DROPBOX_KEY,
            secret: process.env.COMPANION_DROPBOX_SECRET,
        },
    },
    uploadUrls: ['(\\w+).domain.com(:[0-9]+)?'],

    server: {
        host: 'u1.domain.com',
      validHosts: ['(\\w+).domain.com(:[0-9]+)?'],
        protocol: 'https',
        // path: '/',  -- THIS BREAKS companion!!!! 
        oauthDomain: 'u1.domain.com',
        implicitPath: '/uppy'
    },
    corsOrigins: new RegExp('^https://(.*.)?domain.com(:\\d+)?'),

    allowLocalUrls: false,
    filePath: './output',
    secret: process.env.COMPANION_SECRET,
    redisUrl: process.env.COMPANION_REDIS_URL,
}

app.use(companion(companionOptions).app)

const port = process.env.COMPANION_PORT || 3020

const server = app.listen(port, () => {
    console.log('Companion listening on port', port)
})

socket(server)

[mifi]

When I set COMPANION_PATH=/ I'm not seeing the same error when running locally, however I'm getting an error when authenticating oauth2 with google:

Error 400: redirect_uri_mismatch
Request details: redirect_uri=http://localhost:3020//drive/redirect

I see in companion log:

GET //connect/google?state=...

So I think there is indeed a bug here (notice the double slashes). I think it makes sense to throw an error if the user tries to set path to /