Meteor Google OAuth from React Native


by Spencer Carli

Future updates will be made on Medium.

Allowing a user to sign up for your app via OAuth has become common place. If you’ve used Meteor in the past you’ve experienced the ease through which you can set up OAuth in the browser or in Cordova. If you haven’t, or you’re just interested in learning more about the flexibility, I would suggest checking out this recipe by The Meteor Chef. It may also help you configure Google OAuth if you run into any issues throughout this post.

One problem with the way Meteor handles the integrated OAuth is its reliance on the browser. This one took me a while to workout but I think I’ve now find a solution I’m happy with - which we’ll be exploring today. So, let’s jump into how to set up Google OAuth for your React Native application that is backed by Meteor.

First, clone the Meteor React Native boilerplate. You can do so via

git clone https://github.com/spencercarli/react-native-meteor-boilerplate.git

Setting up the Google App

First thing we have to do is set up the Google App so that we can authorize our Meteor app, and later our React Native app, with Google. This is a step you have to take regardless of the platform you’re using.

  1. Go to the Google Developer Console
  2. Create a new google project (image 01 and 02) Creating Google Project, image 01 Creating Google Project, image 02

  3. Open API Manager Open the API Manager, image 03

  4. Click the Credentials Tab Click the Credentials Tab, image 04

  5. Set a Product Name Set a Product Name, image 05

  6. Create an OAuth Client ID Create an OAuth Client ID, image 06

  7. Add Settings for the Client ID Add Settings for the Client ID, image 07

  8. Save your New Credentials Save your New Credentials, image 08

Setting up the Meteor Server

We’re going to have very basic Google login on the web side of things. This is just to show that everything is working and the same login system is used for both the Meteor web and the React Native app.

  1. Add the necessary Meteor packages meteor add accounts-google service-configuration accounts-ui

  2. Create the following directories: MeteorApp/client

MeteorApp/server

  1. Delete the following files (just cleaning things up) MeteorApp.html, MeteorApp.js, MeteorApp.css

  2. Now we need to create a new client file

  3. Now create a .gitignore file in the MeteorApp directory. We don’t want to commit any private keys

  4. Create a settings file to store our google credentials

  5. Now we actually have to configure our Google OAuth services so the package has access to the proper data.

  6. Start your Meteor server with your settings file meteor --settings settings.json

  7. Visit localhost:3000 and try to login to your app via Google! If you followed the steps above everything should be good to go and you can move on to the next section.

Image Demoing the Web App expectation

Setup the React Native App

We’re going to rely on the react-native-google-signin package which I have used in the past. It’s got a shared API for both iOS and Android which makes setting up our application code simple.

Code in this section will all happen in the RNApp/ directory so make sure you run any commands from there.

  1. Save the Google SignIn package to your node modules npm install react-native-google-signin --save

  2. Configure your platform(s) I tried to write detailed steps for both iOS and Android for this section but I realized that it would make this post incredibly long and that I would just be repeating the documentation of the package itself so rather than try to reinvent the wheel I will push you towards the proper resources instead.

For iOS: https://github.com/apptailor/react-native-google-signin/blob/master/ios-guide.md

For Android: https://github.com/apptailor/react-native-google-signin/blob/master/android-guide.md

Note: Depending on what you’re experience is/where your app is at you may have to sign your Android app before following the instructions from react-native-google-signin. You can access those instructions here here

  1. (IOS ONLY) Add the CLIENT_ID from the .plist file you downloaded earlier to your app config file like so:

  2. Now we actually have to configure Google Sign In for our app. We’re going to update the componentWillMount function in our main file. First we need to import our config file and GoogleSignin library.

  3. Next we have to set up our sign in screen. Just to make it easy for this tutorial we’re going to go ahead and replace our entire signIn container component.

  4. Now that we got rid of the old, unnecessary, code let’s make it do something.

  1. Setup an onPress handler for our button

You should now be able to authenticate with Google! If you’re actively building along with this tutorial you should see your user information returned in the console. Let’s actually make it do something though.

  1. Create a function that changes our logged in state when we login

  2. We don’t want the user to have to enter their credentials each time they use the app so we should automatically log them in when they open the app, if they’ve previously authenticated.

  1. Once a user is logged in we need to give them the ability to log out. We’re going to modify one function to do so in our signOut file.

So we’ve now got a system that “fakes” logging in. Once they authenticate with Google we change the screen they’re viewing but they’re not actually logged in yet. That’s what we’ll handle now.

Expectation of the app when signed in

Connecting the Meteor and React Native Apps

  1. First thing we have to do is switch over to the MeteorApp/ directory in our terminal. Then run the command

meteor add spencercarli:accounts-google-oauth

This is a package that allows us to use native Google SDK’s for logging in and hooks us into the normal Meteor accounts system. Feel free to check out the source code.

  1. Next thing we need is a list of all the Google Client IDs associated with our app. You can find these at the Google Developer Console. Navigate to the API Manager and then to the Credentials tab.

  2. Once you’ve got all of your Client IDs we need to update our settings file.

The Client IDs will go into the validClientIds array.

  1. Still working in the Meteor app we need to tell our Google Service Configuration about these valid client IDs. Make sure to name the key exactly as I do because that is how the package is accessing them.

The Meteor server should now be all good to go! You may want to restart your server.

meteor --settings settings.json

  1. Switching over to the React Native app we have just three things to do before we can ship it. First is to add a function to login with Google. We’ll keep this with our other ddp logic.
  1. Next let’s log the user in after they authenticate with Google.

  2. Lastly we need to log the user out of our server as well when they press log out.

Okay you should now be good to go! This was a long one and a tough one for me to write - really had to dive into the internals of Meteor. If you want to find out how to configure offline server access for your app please check out the React Native Google Signin docs. The Meteor package is already setup to accept the data.

You can find an example of what we walked through here. It’s missing some data (such as client tokens) but should at least show you where everything is setup and give a full picture of the steps above.

I hope you found this helpful. I find OAuth tricky to setup and even trickier to explain. It would be immensely valuable to me if you could give me feedback on this article and let me know what you liked and what could be improved. You can reach me on Twitter (@spencer_carli) or open an issue on the Github repo.

If you want to see other OAuth implementations from React Native sign up for my email list!

Share Share on Twitter Share on Facebook Share on LinkedIn

How Can We Help?

Reaching out doesn’t mean you’re ready to start a project, but we’d love to learn more about the challenge you’re facing, answer any questions, and see if we might be a good fit for working together.

Contact Us