Design for a API server with 3rd party OAuth flow

Question

I have an API server, and it's SPA client (node+ react, but it's unrelated). All the API endpoints are under /api namespaces, and the SPA just keep make REST calls to perform operations.

We're working on a feature which require our users to link their Foo Service 3rd party account through OAuth 2. OAuth 2 requires the user to be redirected to the Foo Service auth server, and it'll redirect back, as usual with OAuth 2.

This is where the design question arises:

1. I'm making only REST calls through fetch() in the SPA:

Should the cliente make another REST call, then the server return the usual 302 redirect, and the client would interpret the response, changing the browser to the OAuth 2 website?

Or, should the client know that said request to the server is not to be made through REST, but browser redirect, and then the server just return a 302 heading to Foo Service. If the this one is the correct one, this endpoint shoud not be under /api path, right?

Answer 1

For security reasons the 302 should come from a non-AJAX, full-page refresh HTTP request from your server. Make sure your server, not SPA, generates the state parameter that will be passed as part of the OAuth flow.

Answer 2

To expand a litte on the answer from @RibaldEddie: make your API completely independent of user interactions. User should not access any API endpoint by browser. In this particular case you should get OAuth token inside your SPA and pass it to your API.