Images not found for Dropbox login window

Question

I have been implementing the Dropbox API and Dropbox Chooser into a React application. When I call 'oauth2/authorize' for the login page, I receive the correct HTML, but when I load it I receive 404 errors for all of the image files that would help style it. I attached a screenshot to show what the error looks like. Any idea why it's happening or how to fix it?

The call : axios({ method: 'get', url: 'https://www.dropbox.com/oauth2/authorize?client_id=' + APP_KEY + '&response_type=code', headers: { 'Content-Type' : 'application/json' , 'Authorization' : AUTH } }).then(function (res) {
let pretty = stringifyObject(res.data, { singleQuotes: false });

        response.send(pretty);
    })
    .catch(function (error) {
        response.send(error.response.data);
    });     

The fetch :

fetch(URL + '/api/login', {method: "GET"})  
            .then((res)=>{ return res.text() })
            .then((text)=>{     
                let html = React.createElement('div',{dangerouslySetInnerHTML: {__html:text}});         
            })

Answer 1

You're downloading the data for Dropbox's /oauth2/authorize, but https://www.dropbox.com/oauth2/authorize is actually a web page, not an API call, so you should not be using your HTTPS client like this to download the HTML data.

You should instead be directing the user to that https://www.dropbox.com/oauth2/authorize... page in their browser. For example, you can construct the https://www.dropbox.com/oauth2/authorize... URL and then put it in an <a> HTML link for the user to click on, or redirect them there via JavaScript, depending on what makes sense for your use case.