Next.js 14 oAuth 2.0 authorization flow redirect 401 error

Thanks @Greg-DB and @Здравко for your replies.

This is the first time I'm implementing a Dropbox oauth 2.0 authorization flow, so I apologize if my understanding or language is not clear.

My overall purpose is to have the user sign in to their Dropbox account in the app, for the subsequent purpose of the app then having the authority to interact with the user's Dropbox account on the user's behalf.

My understanding of the Dropbox oauth 2.0 authorization flow is ultimately it produces an access token which allows the app to use to interact with the user's Dropbox account on the user's behalf.

This is what I am trying to produce - this access token which will allow the app to interact with the user's Dropbox account on the user's behalf.

If my understanding of the purpose of the Dropbox oauth 2.0 authorization flow is not correct, I would be grateful if you were able to correct my understanding.

Leaving aside for the moment whether my understanding is correct, what I have been able to achieve so far is the following:

1. The user indicates that they want to give the app the authority to interact with their Dropbox account on their behalf by clicking a button -> 'Sign in to Dropbox account'
2. Upon clicking the button, the page is rerouted to -> `https://www.dropbox.com/oauth2/authorize?client_id=${process.env.NEXT_PUBLIC_DROPBOX_APP_KEY}&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_DROPBOX_REDIRECT_URI}&access_token_type=online`
3a. The user completes the following Dropbox flow, ie they sign into their Dropbox account, and click the 'Continue' and 'Allow' buttons on the 'Before you connect to this app...' and '[name of app] would like to:' pages respectively

3b. The Dropbox pages / flow disappears and the browser window goes blank.
4a. A url similar to the following appears in the browser address bar ('Callback Url'): `http://localhost:3000/api/dropboxcallback?code=Ws4_UVwyTaIAAAAAAAAu87nekOq4KScGOTojU_hhepU`. The browser window is blank, and remains so.
4b. A GET 401 Unauthorized error appears in the browser console tab:

4c. The following appears in the network tab of the browser:

Note the url on the second line begins with dropboxcallback? and not api/dropboxcallback? which is the correct url for the api route.
4d. If the Callback Url is executed manually (within 5 seconds of it appearing), the api route api/dropboxcallback executes correctly by producing an access token.

My question is - what is preventing the Callback Url from executing automatically?

@Greg-DB - you say I 'need to check on what it is doing on its /api/dropboxcallback page'. This page executes correctly - once the url is executed manually. It appears, however, the /api/dropboxcallback page is never reached - something is preventing it from being so - the answer to which likely lies in the reason for the 'Unauthorized' expression in the 401 error. If this assumption is correct, why is it 'Unauthorized'?

I would be extremely grateful if you were able to help me understand why the Callback Url is being treated as 'Unauthorized'. Perhaps when I understand this I can get the authorization flow to execute automatically.

Any assistance greatly appreciated.