I'm learning about oauth2 and I want to implement a simple webapp (using react) and a backend(with flask) for it.
The webapp displays a 'sign in with discord button'. Upon signing in, the webapp displays "Hello {username}" with their profile picture and the backend prints the signed in user (discord user ID) to the console.
This is the end of what I want to do. Here are my approaches:
What should handle the callback URL after access is granted? The webapp or the backend?
Callback URL handled by webapp
If the callback URL was set to the webapp, the webapp would receive a OAuth2 code. The OAuth 2 code can be securely sent to the backend via an API endpoint like POST api.backend.com/oauth_token/
The backend then takes this code and exchanges it for tokens. With the tokens, the backend can make API calls to discord and then get the user ID, and send a JSON payload back to the client containing a URL to the picture and the username which the client displays (or the backend sends the access token to the webapp itself which the client can use)
Or should the webapp be making the API calls itself for profile picture, username, user ID and POST the user ID to the backend? I don't want the webapp to post the user ID to the backend as it can be faked by the webapp and the client might be tricked into thinking a different user signed in
Callback URL handled by backend
if the backend handles the callback URL, the process is pretty straightforward, but how do I make flask serve back a react app? The tutorials I found for integrating flask and react show flask as being an API server