React Native Tutorial — Guide to Integrate Google SSO in your MeteorJs React Native app (Part 1)

The Missing Manual

Photo by Mitchell Luo on Unsplash

After developing several React Native apps, I’ve come to the conclusion that I desperately need to write a clear instruction to my future self on how to correctly integrate Google Single-Sign-On (SSO) in a MeteorJs React Native project.

MeteorJs is an open-source platform for seamlessly building and deploying Web, mobile, and desktop applications in Javascript or TypeScript. Previously, I’ve been using MeteorJs to build bespoke web applications. Even though it is a highly opinionated framework, I like it simply because it is easy enough to get started. You can spin up a working front and backend in a matter of minutes! Check out their documentation to learn more.

I have had zero problems configuring Google SSO for web applications, as it just involves generating a new one clientId from the Google Developer Console and saving it in thesettings.json file at the root of your MeteorJs web application. simple enough for a web application's needs. However, the marriage of React Native and MeteorJs, while fantastic, has some drawbacks. This post is going to be a bit longer than usual, as it’ll detail the necessary steps to create a seamless SSO integration between the two.

There are a number of guides and tutorials out there for the same purpose, but most involve jumping to several different Github repositories and documentation sites, which some may find a tad bit confusing. As a result, this article is intended to serve as a one-stop shop for all of your Google SSO React Native MeteorJs requirements!

Setting Up The MeteorJs Server

You need a MeteorJS server running, either on localhost or on a live server. I suggest taking a look at MeteorJs’s own Cloud hosting.

To get started with Meteor,

• For Linux and macOS:

curl https://install.meteor.com/ | sh

• For Windows (Node.js is required)

npm install -g meteor

If you encounter any problems, refer to MeteorJs official installation documentation. I’m not going to cover them here as it’ll unnecessarily prolong the article.

After MeteorJs installation, you can proceed to create a new MeteorJs project with this simple command in your terminal/command line:

meteor create <your app name>

Of course, you’ll have to replace the <your app name> with your app actual name. This command will create a new MeteorJs project with React as its default flavour for front-end development. You can pass different parameters if you prefer to start a project with a different framework scaffold e.g.

• meteor create <your app name> --blaze if you want to use blaze framework. Blaze is MeteorJs’s own templating framework that relies on handlebar-like syntax.
• meteor create <your app name> --vue if you want to use vue3 framework.
• meteor create <your app name> --svelte if you want to use svelte framework

After finish creating the project, you can start the development server by cd into the project folder, and run the meteor command

cd <your app name> && meteor

The terminal will show the progress of booting up a server and will end with something like => App running at: http://localhost:3000/ . You can then open your browser and visit the http://localhost:3000/ URL. You’ll see the generic MeteorJs welcome message with a clickable button that highlights MeteorJs' prowess in handling data via its pub-sub method.

In case you’re wondering, the database is also locally handled through a Mongo instance (read: magic). I do not have enough technical background to explain how this work, but MeteorJs uses something called MiniMongo on the client (browser) as an active cache that frequently listens to any changes in the database. If there are changes in the database, the MiniMongo will update itself with the latest data. This is part of the MeteorJs proprietary pub-sub framework, which provides us with a reactive system. Cool!

There is a lot more to MeteorJs than just booting up as a mobile app server. There are a lot of real-world applications that use MeteorJs as their framework of choice. Head over to their Showcase Page to look at some of the products developed by various companies around the world, using the framework.

Coming back to our project, now we have a working server that can be connected to our React Native mobile app, and act as the ‘brain’ for our app.

There are various packages that you can install from npm or MeteorJs’s own package management platform Atmosphere. But for this tutorial, we’ll be focusing on setting up things that are related to user account management and validation. Awesomely, MeteorJs already provide us with a useful package to do that i.e. Accounts. To proceed, you need to install these packages using the following meteor add command on the terminal:

• accounts-base
• accounts-password
• accounts-google
• service-configuration

meteor add accounts-base accounts-password accounts-google service-configuration

As outlined in MeteorJs's official documentation here, you just need to create a settings.json file at the root of your server folder and create an packagesobject with the required information, like so:

{
   ...
    "packages": {
        "service-configuration" : {
            "google" : {
                "clientId" : "xxxx.apps.googleusercontent.com",
                "loginStyle" : "popup",
                "secret" : "xxxx"
            }
        }
    }
}

The cliendId and the secret values can be generated from the Google Developer Console. Follow the steps below to obtain your very own clientId and secret!

Getting the Google ClientId and Secret

• Go to Google Developer Console. Sign in to your Google account.
• Create a New Project. Give it a meaningful name for easy reference in the future.
• After you’ve successfully created the project, navigate to APIs & Services section. There you will see several options on the sidebar.

APIs & Services Sidebar

• Go to OAuth consent screen section. Follow the on-screen prompts.
• For User Type, you can choose between Internal or External, depending on your app’s intended usage. For internal user type, there won’t be any verification needed. For external, you will be able to start with a trial status, but will eventually have to verify the app with Google.
• In the next step, you need to provide some information about your app, including App Information, App Domain, and Developer Contact Information. You will need to prepare links to your own privacy policy & terms of service pages for this step.
• In the next step, you need to specify the scope of information you want to get from Google when a user signed into your application. Click on the “Add or Remove Scope” button. I’d recommend getting just the basic information i.e. userinfo.email, userinfo.profile, and theopenid . If you require more information, Google may request a detailed justification. Select the boxes that correspond to the respective scopes, and click the “Update” button at the bottom.

• The next step asks you to list down the test users. Fill in the information accordingly.
• The last step will present you with a summary of the information you have entered. Edit any information if needed. If everything is okay, click the “Back To Dashboard” button at the bottom.
• On the OAuth consent screen section, under the “Publishing status” heading, click the “publish app” button. You’ve now successfully configured the consent screen. The logo and information you’ve provided just now will be used/displayed in the SSO popup window every time when user hit the “Login with Google” button.
• Next, let’s generate the clientId and secret.
• On the sidebar, click on the “Credentials” menu. Then click on the “+ Create Credentials” button on the top bar.
• A dropdown will appear. Select the “OAuth client ID” option.

• Under the “Application type” dropdown menu, choose “Web Application”.
• Fill in the form accordingly. The name should reflect the nature of the clientID. For example “<insertprojectname> WEB”. This is important as later, you will revisit this page and generate several other clientIDs for iOS and Android settings too.
• For “Authorized JavaScript origins”, enter localhost if you’re developing locally, and your server URL if you’ve already deployed the web app on the live server. The format of the URLs should be like this: http://localhost:3000 and https://www.<insertdomainhere>
• For “Authorized redirect URIs”, enter the same URLs as above, with an additional detail at the end of the URLs like this: http://localhost:3000/_oauth/google and https://www.<insertdomainhere>/_oauth/google
• Then click “Create”
• A popup window will appear, showing you your very own clientId and secret. DO NOT share this with other people. Copy both values, and replace the “xxxx” in the settings.json file above accordingly.

• P/S: You will need to revisit this Google Developer Console later to generate clientId for React Native iOS and Android configuration.
• Before we end the first part of the tutorial, we need to reboot our MeteorJs server above with the credentials (clientId & secret) that we’ve just populated in the settings.json file.
• To do that, just exit the currently running server by hitting Control + C on Mac. This will stop the server. Then, re-run our MeteorJs server with the command:

meteor --settings settings.json

This will restart the server with the new values.

See you in the next part of the tutorial!