Meteor Google OAuth from React Native

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.

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.

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.

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

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

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.

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.

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

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.

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

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.

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.

Connecting the Meteor and React Native Apps

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.

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.

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.

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

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.

Next let’s log the user in after they authenticate with Google.

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.