Firebase Google Sign-In with Swift 3

Firebase allows developers to easily add sign in functionality to an app and this provides a lot of useful information about the user like the user’s email and profile photo. This tutorial will be showing you how to add Google Sign in functionality to your app! The process will be very similar when trying to add other service’s “log in” functionality like Facebook’s sign in service.

This tutorial is based off of Firebase’s tutorial for adding Google Sign in to your app. However, the Firebase tutorial uses Swift 2 and I will be sharing exactly what you need to do to implement it in Swift 3 and XCode 8!

Setting your Podfile

Add the following two pods into your Podfile and run pod install

pod ‘Firebase/Auth’
pod
‘GoogleSignIn’

Setting up the Project

In your project’s storyboard you should create a new View Controller for displaying the Google Sign in button. Also create a new ViewController swift file for this View. This View Controller should conform to the protocol GIDSignInUIDelegate and set itself to be the delegate in the viewDidLoad() method.

Screen Shot 2016-11-26 at 3.59.41 PM.png

To add the sign in button to the View Controller via Storyboard, just drag a View into the sign in screen’s view and set it’s class to GIDSignInButton.

Screen Shot 2016-11-25 at 10.33.53 PM.png

Screen Shot 2016-11-25 at 10.34.00 PM.png

Screen Shot 2016-11-25 at 10.34.17 PM.png

Import the Google Header Files

A .h file or a header file is used in objective-c to define the API for the app. For our purposes, we need to include the Google Sign In header file to our swift app in order to obtain access to the Google Sign In library methods. To include the google header file we need to create something that’s called a “bridging header”. A bridging header allows swift developers to “bridge” objective-c and Swift.

To create a bridging header

Create a new objective-c file, you can name it whatever you like.

Screen Shot 2016-11-25 at 10.47.39 PM.png

When creating the objective-c file you will come across a message asking if you want to create a bridging header file. Click Create Bridging Header.

Screen Shot 2016-11-25 at 10.50.23 PM.png

Lastly you can delete the Objective-C file you just created. We only created it to be able to generate the bridging header.

Now, inside the bridging header, add the following line.

#import <GoogleSignIn/GoogleSignIn.h>

This will import the Google Sign in library to your project!

Add Custom URL Scheme

We need to add a custom URL Scheme to our project in order for the Google Sign in to work.

The first step is to navigate to your GoogleService-Info.plist file that you downloaded when setting up Firebase in your app. Within it you will see a property name REVERSED_CLIENT_ID. Copy the value for it.

Then navigate to the project settings, then to the info tab, and create a new URL Type. You can paste the value you copied from the REVERSED_CLIENT_ID property and paste it in the URL Schemes field.

Screen Shot 2016-11-25 at 11.14.51 PM.png

Authentication

The last step is to set up the authentication with Google Sign in and Firebase!

A Google Sign In works like this:

  1. First the User clicks the “Sign In with Google” button which opens up the Google Sign In Screen
  2. Once the user successfully signs in with Google, their credentials are returned to the app
  3. Then we use the Google credentials to obtain Firebase Authentication credentials which we send to Firebase to Authenticate the User
  4. Once the User’s credentials are successfully Authenticated with Firebase, the callback method for the Firebase Sign-In is executed to finish the Sign In process!

FirebaseGoogleAuthentication.png

Setting up AppDelegate.swift

There are 5 steps to configuring the AppDelegate.swift

1.import the Google and Firebase libraries

Screen Shot 2016-11-26 at 3.13.27 PM.png

2.Make the AppDelegate implement the GIDSignInDelegate protocol

Screen Shot 2016-11-26 at 3.14.24 PM.png

3.In the application(didFinishLaunchingWithOptions:) method, set the GIDSignIn client ID to be the same as the Firebase clientID. Then set the GIDSignIn delegate to self.

Screen Shot 2016-11-26 at 3.15.54 PM.png

4.Implement the application(url:, options:) method to handle a Google Sign in url.

*Note that this method is updated for Swift 3.

Screen Shot 2016-11-26 at 3.18.33 PM.png

 5.Implement the sign(signIn:) method required for the AppDelegate’s GIDSignInDelegate protocol. This method will be called on a successful Google Sign in which allows us to obtain the Firebase authentication credentials from the Google Sign in and call the FIRAuth.signIn() method. Within that method will be the code ran on a successful Firebase sign in!

Screen Shot 2016-11-26 at 3.20.38 PM.png

At this point you should be able to run the App and successfully sign in through Google!

For more information about Firebase Authentication take a look at https://firebase.google.com/docs/auth/.

2 Comments

  1. Ben
    September 27, 2017

    I’m shocked… this is the first tutorial of this process that has worked! Thank you!

    1. toropeza
      September 27, 2017

      Glad it helps! 😀

Comments are closed.