Should I make 3rd party API calls in backend or frontend?

Question

I have an API and that API needs some data from the Microsft Graph API. I was thinking of implementing an endpoint in my API to refresh the token and use that token to make calls from the frontend. I don't know if that's optimal or safe, hence my question.

EDIT 1: To give a better perspective of what I have, this is the logic I have at the moment. Tell me if this is correct please.

User requests my API's authorization endpoint, which has the Azure's secret key, then the user is redirected to the Microsft oAuth login page. Once logged in oAuth, Microsoft redirects the user to my API, where it saves the JWT tokens in the user's cookies, so the user can refresh the token anytime.

In order to refresh the token, the user simply just makes a call to myapi.com/auth/microsoft/token, where it has the secret key, and it refreshes.

Answer 1

Generally I would recommend always making the 3rd party calls from the back end. It gives you more control and avoids any cross origin complications.

You also want to be aware of any API keys. Most APIs require a key for access and often that key is private and you wouldn't want to share on the front end.

MS Azure APIs have an application and secret token. You cannot expose the secret token to the client. To call directly from the client you would use OAuth to get a JWT token and then you can call from the SPA into the MS Web APIs with that token.

https://docs.microsoft.com/en-us/azure/active-directory/develop/authentication-scenarios#single-page-application-spa

In contrast, there are other 3rd party APIs that are designed to be called only from the front-end. Stripe for example is a payment processing API where the UI can call directly into Stripe and then the client's payment information is never actually passed to the host application, only to Stripe. This improves security.