• MongoDB Guides >

Sample App: React + Stitch + Google Authentication

Deployment Type:

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.

Procedure

1

Download the React sample app.

Download the sample app from github or clone the repo.

To clone the repo:

copy

copied

git clone git@github.com:skerschb/testauth.git

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.

copy

copied

import { Stitch, GoogleRedirectCredential } from "mongodb-stitch-browser-sdk";

Run npm install to install the module required.

copy

copied

npm install mongodb-stitch-browser-sdk

In index.js you will also see a method called setupStitch(). This method is where the stitch client is initialized or assigned, and then checked for auth.

copy

copied

async setupStitch() {
  //copy the name of your google-auth enabled stitch application here
  //the name of the app will typically be the stitch application name
  //with a "-"" + random string appended
  const appId = 'authentication_test-htbrq';

  // Get a client for your Stitch app, or instantiate a new one
  const client = Stitch.hasAppClient(appId)
    ? Stitch.getAppClient(appId)
    : Stitch.initializeAppClient(appId);

  //manage user authentication state
  
  // Check if this user has already authenticated and we're here
  // from the redirect. If so, process the redirect to finish login.
  if (client.auth.hasRedirectResult()) {
    await client.auth.handleRedirectResult().catch(console.error);
    console.log("Processed redirect result.")
  }

  if (client.auth.isLoggedIn) {
    // The user is logged in. Add their user object to component state.
    currentUser = client.auth.user;
    this.setState({ currentUser });
  } else {
    // The user has not yet authenticated. Begin the Google login flow.
    const credential = new GoogleRedirectCredential();
    client.auth.loginWithRedirect(credential);
  }
}

2

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).

copy

copied

npm install

3

Modify the package.json.

npm will install dependencies in the node_modules directory.

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 deploy and homepage attributes.

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.

copy

copied

npm run deploy

4

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.

Summary

If you have successfully completed this guide, you have deployed a Stitch and React application with Google authentication enabled.

What’s Next

Want to build more with Stitch? See the Stitch tutorials for more ideas.

© MongoDB, Inc 2008-present. MongoDB, Mongo, and the leaf logo are registered trademarks of MongoDB, Inc.