FirebaseUI Authentication for iOS

By far, I have found that FirebaseUI is the easiest way to implement User Authentication to an iOS App. By the end of this tutorial, you’re going to see that in action with just adding a few lines of code.

As the name suggests, FirebaseUI is shipped with a prebuilt UI that gives view components for login flow out of the box.

FirebaseUI supports almost all the major OAuth providers listed below (at least at the time of writing this article).

• Email/Password (you are here)
• Phone
• Google
• Facebook
• Twitter
• Apple
• Github
• Microsoft
• Anonymous

For simplicity’s sake, I am going to stick with Email/Password Authentication and show you how to implement it.

Add Firebase to an iOS App

Adding Firebase SDK to the Xcode project will be the first step before using any of its products.

To keep this article short, I am going to point to my other article that shows how to add Firebase to the Xcode project from start to finish with STEP by STEP instructions.

Once Firebase is added to your Xcode project, you’re ready to use any of its products.

Enable Email/Password Sign-in Method

To use Email/Password Sign-in, I am going to enable it on the Firebase Console.

So, go to Firebase Dashboard → Authentication → Sign-in method tab and open up the Email/Password option by clicking on it.

Then, toggle the enable button and save it.

Install FirebaseUI Pods

Here are the pods that need to be installed into the project in order to use FirebaseUI Email/Password Authentication.

pod ‘FirebaseUI/Auth’
pod ‘FirebaseUI/Email’

Open up the Podfile from the Project Navigator and add them right below the pod ‘Firebase/Core’ line.

Then, install them by opening the project directory on the Terminal window and run:

pod install

This will take a few seconds to complete the installation process.

Once it’s done, we’re ready to add Email/Password Auth using FirebaseUI.

Check User Authentication Status

The first step is to import FirebaseUI at the top in the ViewController.swift file.

import FirebaseUI

The plan is…

If a user is logged in, show the user information such as:

Email
Display Name

If not, show the login view.

Simple enough…

The best place to check this is inside the viewWillAppear() method. As the name suggests, it will be called when our ViewController() is about to appear on the screen.

override func viewWillAppear(_ animated: Bool) {
}

Firebase provides a method called addStateDidChangeListener() to check the user’s authentication status.

So we can simply call this method inside the viewWillAppear() to do the check.

override func viewWillAppear(_ animated: Bool) {
    Auth.auth().addStateDidChangeListener { (auth, user) in
    }
}

Inside this method, the user parameter in the closure is optional which will hold one of these two values:

• User Object
• Nil

override func viewWillAppear(_ animated: Bool) {
    Auth.auth().addStateDidChangeListener { (auth, user) in
        if let user = user {
            self.showUserInfo(user:user)
        } else {
            self.showLoginVC()
        }
    }
}

If a user is logged in, I can safely unwrap it using the if let syntax and call the showUserInfo(user:user) function which I am going to define in just a moment.

Similar to that, call showLoginVC() if no user is logged in.

Let’s go ahead and declare both functions.

func showUserInfo(user:User) { }
func showLoginVC() { }

Instantiate AuthViewController()

Let’s add the authViewController, which is part of FirebaseUI.

func showLoginVC() {
    let authUI = FUIAuth.defaultAuthUI()
    let providers = [FUIEmailAuth()]
    authUI?.providers = providers
    let authViewController = authUI!.authViewController()
    self.present(authViewController, animated: true, completion: nil)
}

The first step is to create an instance of an authUI object by running the defaultAuthUI() method on the FUIAuth object.

The providers variable is an array of FUI sign-in method objects. For the Email/Password method, instantiate FUIEmaiAuth() inside the array.

This is where you’re going to be adding more sign-in providers, such as Facebook and Google, etc and the rest will be magic.

Then, assign providers to the provider’s property of the authUI object.

After that, create a login view controller by invoking authViewController on the authUI object.

Finally, show it on the view hierarchy using the present() method.

When you run the app, it will show the prebuilt Auth View Controller with the “Sign in with email” button.

Add A Brand New Firebase User

Continue Reading...