Sample App: React + Stitch + Google Authentication¶
Author: MongoDB Documentation Team
In this guide, you will set up Google Authentication in your React+Stitch application.
Time required: 15 minutes
What You’ll Need¶
Before you start this Guide, see the instructions on how to enable Google Authentication in your Stitch app. You will need an account on Google Cloud Services, an OAuth token generated by Google, and to enable and configure your Stitch application to use Google Authentication.
The Google Authentication Page will take you through these steps.
Check Your Environment¶
To deploy this sample application you will need npm and access to github.com in order to download the sample application.
If you would like to clone the github repository, you will need access to the
git CLI (command line interface).
To deploy your application, you will need a server to deploy your code. While Stitch allows for development in serverless environments, Google authentication will not work unless you deploy to a server.
Download the React sample app.¶
Download the sample app from github or clone the repo.
To clone the repo:
Look in the
src folder. In the
index.js toward the top of the file you will see an import
statement that shows the Stitch package you will need to install to run this application.
npm install to install the module required.
index.js you will also see a method called
This method is where the stitch client is initialized or assigned,
and then checked for auth.
Build the sample app.¶
Once you have downloaded or cloned the app, use
npm to install
any remaining dependencies (the Stitch dependency has already been
installed as part of Step 1).
Modify the package.json.¶
npm will install dependencies in the
After the packages are installed, there are a few parameters in the
package.json you will need to modify in order to deploy the application,
in particular the
Consult the instructions for your deployment environment for the correct parameters to add to your package.json. The package.json that is included in the sample app uses Github Pages .
Once you have modified your parameters, it’s time to deploy your application.
Check your results¶
Once you have deployed your application, check the url for which you have set up Google OAuth. You should be directed to a google login page. Once you authenticate, the application will render your username on the page.
If you have successfully completed this guide, you have deployed a Stitch and React application with Google authentication enabled.