Currently our team is working implementing Google Sign Up and Log In for the client-side React application for our Teacher Supply Donation web app. During the implementation, I discovered that we have to take into account the method we’re implementing with. At first, the authenticating via Google was implemented using the passport-google-oauth20 package which basically had the Express server receive the request from the client containing the user’s Google Id, if the id already existed in database we would simply return the user data, otherwise we create a new user in the database and then return the user data. The data was sent back via a callback route which required a redirect. This scenario is best for server-side rendering. This is where we realized we had an issue with our initial implementation since our project wants to redirect the user using Client-Side routing based on authorization.
After some research, I discovered the @react-oauth/google NPM package. This package allows the developer to create a Google Login component and handle authenticating the user with Google on the client side. Once Google responds that the user is authenticated as a Google user, we can then send the access token to our Express server to exchange for a JWT token. With that JWT token, the user will have authorization to our protected routes in the React application.
When dealing with Authentication and Authorization strategies, first decide whether the use case is for Server-Side rendering or Client-Side routing.