Next.js 14 oAuth 2.0 authorization flow redirect 401 error

---

pvr325i wrote:

...

In the browser console,

GET http://localhost:3000/api/dropboxcallback?code=Ws4_UVwyTaIAAAAAAAAu5BM5xJGSNdXxF_y5V9JGyrs 401 (Unauthorized)

 

appears.

...

---

Hi pvr325i,

You question could get reformatted and redirected back to you: What kind of authorization do you expect on this request and why do you implement such authorization expectation at all? 🧐

That request is supposed to be a callback to receive the authentication code - nothing more. At that moment your application is not authorized in any way and the request cannot provide such thing! Granting to access the data (and corresponding authorization) will be the end result of OAuth process (again the end, not before). It's your responsibility to provide some suitable content as response to be shown in browser. 🙋

---

pvr325i wrote:

...

and believe it may be necessary to have the 'state' parameter in the initial `https://www.dropbox.com/oauth2/authorize` call.

...

---

The 'state' parameter is a convenient way to pass some context sensitive data either to distinguish different possible calls to the same callback point (if possible) or to prevent possible attacks (or whatever you want). That parameters doesn't anything to do with the issue you have though.

If you're looking for better protection, a good way is implementing PKCE 'fork' of OAuth. In such a way Dropbox is actively involved in this protection (comparison "code challenge" and "code verifier" just before completion and error if something wrong).

In all cases (whatever you'll select to use) don't expect authorization (on low HTTP transport protocol level) on any callback - otherwise wouldn't work. If you want, implement your own additional custom protection that wouldn't break the request if you don't like PKCE (or in addition to PKCE).

Hope this gives direction.