Let’s make an React app and API that lets us log in with Google.

We’ll show a “Log in with Google” button on our homepage, and rely on Google‘s servers to tell us some facts about the user (like their email address), which we’ll then store and use to authenticate the user in future.

This flow is triangular: we have our client React app, our own API server, and Google’s oAuth servers. Doing it right means making API requests between all three.

Why do this? Well, at minimum we can save the user from having to create and remember another password. We can also re-use other information from Google, like their profile picture and full name. Longer term, we could integrate other Google services on the user’s behalf.

You’ll need

• A React application that makes requests of your API (create-react-app is just fine!)
• An express.js API we want to authenticate against

At the moment, our app only has basic username and password login.

#javascript