How to authorize my React app via GitHub OAuth?-CodePudding

I have a button in my app to sign in using GitHub. It opens up a popup with a confirmation about permissions my app is going to get once authorized. When user authorizes my app to use their GitHub profile, GitHub calls a callback URL. And that's when the things get tricky for me.

I have a React app with a route to /login where it sends a request to the nodejs backend part of app to obtain an access_token. It does it successfully closing the callback URL window. But now the problem is with rendering the result of authorization in the React app. How, for example, I replace the log in button with a profile picture. The React app has no way of knowing that the callback URL was called, therefore, there is no way to force the app to update/re-render its elements based on the fact that authorization has happened.

So, how do I make my app display the GitHub profile picture and have the rest of the profile data available in the React app?

CodePudding user response：

Instead of using a callback URL, you can handle the authorization process entirely on the server side. This means that when the user clicks the "Sign in with GitHub" button, the React app makes a request to the server to start the authorization process. The server then redirects the user to the GitHub authorization page, and when the user grants access, the server receives an access token and stores it in a session. The React app can then make a request to the server to get the access token and use it to fetch the user's profile information. This approach requires a bit more setup, but it can be more secure as it avoids exposing the access token in the URL.

CodePudding user response：

There are a few ways you could approach this problem. Here are a few options you might consider:

Use a client-side library like query-string to parse the URL parameters that are returned in the callback URL. This would allow you to extract the access token and other relevant information from the URL, and then use that information to update the React app.

Use a server-side solution to handle the callback request and extract the access token and other relevant information. You could then store this information in a session or a database, and use it to update the React app when the user visits a different route or refreshes the page.

Use a client-side solution like WebSockets or Server-Sent Events to establish a real-time connection between the React app and the server. This would allow the server to send updates to the client whenever the authorization status changes, allowing the React app to update in real-time.