Google Sign-in for React-Native iOS

Part ɪɪ: React-Native UI│Story 06: User Sign-in component and Google Sign-in implemented for iOS platform

GIT : Repo | Feature/Story branch| PR

In the previous posts, we registered our app in Google Firebase Developer console for Google Sign-in for iOS and initialized react-native project and got the basic default scaffolded project up and running in iOS and Android simulators.

In this article, we would first add a screen component in the app for Google Sign-in. We would set up Google Sign-in for iOS platform first and would set it for android in a later post.

TL;DR : This would be a bit long post as we would perform below tasks:

▫ Add and link react-native-google-signin npm package
▫ Configure iOS project to add Google-SignIn SDK and googleservice-info.plist
▫ Create UserSignIn component to react-native project
▫ Add UserSignIn component to App.js

Add ‘react-native-google-signin’

We would use react-native-google-signin npm package to add Google Sign-in to our app.

$ yarn add react-native-google-signin

Next, we’ll follow the iOS setup instructions for linking react-native-google-signin plugin to iOS app.

1. First thing you will notice in the iOS setup guide is:

NOTE react-native-link may add the RNGoogleSignin podspec to your Podfile. If your Podfile looks roughly like the one described here then this is likely what you want, but otherwise you may get stuck with build errors. If your Podfile does not refer to the React podspec, then you probably do not want to use the RNGoogleSignin podspec and we recommend that you rename or delete the RNGoogleSignin.podspec file from node_modules/react-native-google-signin and only then run react-native link react-native-google-signin. This is a one-time operation that you won't need to repeat later...

👆 Its asking us to check if our Pod file looks anything like the one given here.

We don’t have PodFile yet under our project’s ios folder 👇

So, we’ll try deleting RNGoogleSignin.podspec file from node_modules/react-native-google-signin: 👇

Link the plugin to iOS and Andriod platforms using link command: 👇

$ react-native link react-native-google-signin

Install Google Sign In SDK without Cocoapods

1. Download the latest GoogleSignIn SDK from here and unzip it.

2. Open your React-native ios project file in Xcode.

$ open ios/notewordy.xcodeproj

3. Drag and drop the unzipped .framework files into the Frameworks group in Xcode and copy GoogleSignIn.bundle to your project. During copying, check copy items if needed. 👇

4. Make sure GoogleSignIn.bundle is added in your Xcode project's Copy Bundle Resources in Build Phases settings. 👇

5 . Add the .plist file that we have downloaded at the end of adding iOS App to the Firesbase project(download # 1), to the project in Xcode.

6 . Configure URL types in the Info panel (see screenshot 👇)
In Xcode, with project selected as target, go to Info tab and expand URL Types. Click ‘+’ button at the bottom of URL Types section and add a URL with scheme set to your REVERSED_CLIENT_ID which can be found inside GoogleService-Info.plist

7 . Also, link libRNGoogleSignIn.a to noteWordyTests target, else you would get build errors

Modify your app to respond to the URL scheme (optional)

• Open AppDelegate.m
• Add an import: #import <RNGoogleSignin/RNGoogleSignin.h> (if this one will not work try #import "RNGoogleSignin.h")
• Copy-paste below method to respond to the URL scheme:

- (BOOL)application:(UIApplication *)application openURL:(nonnull NSURL *)url options:(nonnull NSDictionary<NSString *,id> *)options {
  return [RNGoogleSignin application:application
                             openURL:url
                   sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
                          annotation:options[UIApplicationOpenURLOptionsAnnotationKey]];
}

(After this when I built the project, I got linker error with vocabuilderTests target — linker command failed with exit code 1 (use -v to see invocation) -

The detailed message of the error was showing few Undefined symbols for architecture x86_64:

Linking libRNGoogleSignIn.a to noteWordyTests fixed the issue 👇

( You may probably get a variety of other errors based on various different factors like the iOS/Xcode version, different Xcode build settings, missing to link required binaries etc. But usually you should be able to fix those quickly taking help from stack overflow/github. )

Eventually when everything would go well :-), the build should ‘succeed’.

User Sign-in Component

Finally we get to our favorite part - <𝚌𝚘𝚍𝚒𝚗𝚐/>.

Let’s create our first react-native component for Google Authentication.

📂 Under the src folder, add two folders screens and components. We would store our top level screen/view components under screens and other non-screen common, reusable or service-type components would go under components folder.

📂 Add a folder UserSignIn under components
📝 Add a file UserSignIn.js under the components/UserSignIn folder with below code:

The highlights of the above code are:

Line # 20–23: component’s constructor: we call GoogleSignin.configure(). (see its documentation here)

Line # 25–27: componentDidMount life-cycle method: here we call the component’s local method isUserSignedIn(). In this method, we call GoogleSignin.isSignedIn() to check if user is already signed in from the previous session. if so, we call local method getCurrentUserInfo() to get the details of the signed-in user using GoogleSignin.signInSilently() method.

Line # 29–58: render method: If the component is in a state of checking user’s signed-in status, we are rendering ActivityIndicator (loading spinner). Otherwise, if user has successfully signed-In ( or is signed in from previous session ), we show user’s name with a logout button.
If none of the above conditions are true, we show ‘Google SignIn’ button.

Line # 64–73: onSignInPress method: This method is called onPress event of Google SignIn button. It calls GoogleSignin.isSignIn() method that would internally do all the things needed to sign in with Google account credentials like prompting a modal to enter google id and password, contacting google to perform authentication and returns with userInfo object having the details like name, email, profile picture etc of the logged user.

𝚒𝚗𝚍𝚎𝚡.𝚓𝚜 for components folder:

Add a file index.js under components folder to export the components we would have in any subfolders under the components folder 👇 (why this index.js? see here)

Next, update the App.js component to add the above created UserSignIn component:

👆Line # 10 : We added UserSignIn component to App component

With all these changes, refresh the app on simulator (or it would probably hot reload and refresh itself. For me it was broken, I had to close the app and metro bundler terminal window and run react-native run-ios command again.)

You should see Google Sign-in button. Try to log in with your google account and it should be working 👇:

👏 Yay!!! Our app users should now be able to sign in using their Google accounts to our React-native iOS app .

In the next part, we would add NativeBase react-native component library, a Home screen component with some static content for now and would add React-Navigation to our app.

← Prev:folder restructure┈🏠┈ Next:routing and navigation→