Introduction to Firebase

You’ll need to create an APNs authentication key and an APNs certificate key.

Steps to Create an APNs Authentication Key 

• In your developer account, go to Certificates, Identifiers & Profiles, and under Keys, select All. 
• Click the add button (+) in the upper-right corner. 
• Enter a description for the APNs auth key.
• Under Key Services, select the APNs checkbox, and click Continue.
• Click Confirm and then Download. Save your key in a secure place! This is a one-time download, and the key cannot be retrieved later.

Steps to Create an APNs Certificate Key

• Create an App ID from your Apple developer account and enable Push Notification while creating. An App ID is an identifier that uniquely identifies an app. As a convention, it is represented by a reversed domain with your company name and the app name (e.g. com.mysoft.myfirstfirebaseApp).
• Create a Provisioning Profile for the above App ID. 

And that’s it! Now, we are done with all the configurations, and we can start implementing the registration and login flow.

Registering a User With Phone Authentication

Let’s go back to Xcode and create the RegistrationViewController.swift, RegistrationViewController.storyboard, and RegistrationService.swift files.

For the storyboard, I have added a UITextField and UIButton as shown below. These should be linked in RegistrationViewController.swift.

This is how my RegistrationViewController.swift will look: 

import Foundation
import UIKit

class RegistrationViewController: UIViewController, UITextFieldDelegate {
    
    @IBOutlet weak var phoneNumber: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func requestOTPTapped(_ sender: Any) {
        
    }
}

Since our main focus is on Firebase, we won’t be implementing UITextFieldDelegates. Instead, to keep things simple, we’ll capture the text on button click. 

Now let’s add the following code in RegistrationService.swift.

import FirebaseAuth

class RegistrationService {

    func getVerificationId(phoneNumber: String, completionHandler: @escaping (String?, Error?) -> Void){
        
        PhoneAuthProvider.provider().verifyPhoneNumber(phoneNumber, uiDelegate: nil) { (verificationID, error) in
            
            if let error = error {
                completionHandler(nil, error)
            }
            
            if let id = verificationID {
                completionHandler(id, nil)
            }
        }
    }
} 

In this code, PhoneAuthProvider.provider().verifyPhoneNumber takes a phone number as input and sends us back the verificationID. This also triggers a one-time password (OTP) message to the phone number that was provided in the text field. The user will receive the OTP on their phone and input it back into an alert dialog in the app.

Note: while entering the phone number, make sure the country code is also entered.

Also note that we have to remember to import FirebaseAuth at the top of the file.

Now, let’s go back to RegistrationViewController.swift and call getVerificationId, as shown below. Here, I’m printing the id to the console to check if verificationId was generated.

import Foundation
import UIKit

class RegistrationViewController: UIViewController, UITextFieldDelegate {
    
    @IBOutlet weak var phoneNumber: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func requestOTPTapped(_ sender: Any) {
        if let phoneNumber = phoneNumber.text{
            
            RegistrationService().getVerificationId(phoneNumber: phoneNumber){ (id, error) in
                if error != nil {
                    return
                }
                
                if let id = id {
                    print(id)
                }
            }
        }
    }
}

The Sign-In Method

Now let’s write a sign-in method in RegistrationService. Here, we’ll create a Firebase Credential object using verificationId and OTP. This is how the code will look:

    func signIn(verificationId: String, verificationCode: String, completionHandler: @escaping (String?, Error?) -> Void){
        
        let credential = PhoneAuthProvider.provider().credential(withVerificationID: verificationId, verificationCode: verificationCode)
        
        Auth.auth().signIn(with: credential) { (user, error) in
            
            if let error = error {
                completionHandler("Error", error)
            }
            completionHandler("Success", nil)
        }
    }

Once we receive the id, we’ll show an alert view for user to capture the OTP and call the signIn method in RegistrationService. Here is what the RegistrationViewController will look like after these changes: 

import Foundation
import UIKit

class RegistrationViewController: UIViewController, UITextFieldDelegate {
    
    @IBOutlet weak var phoneNumber: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func requestOTPTapped(_ sender: Any) {
        if let phoneNumber = phoneNumber.text{
            
            RegistrationService().getVerificationId(phoneNumber: phoneNumber){ (id, error) in
                if error != nil {
                    return
                }
                
                if let id = id {
                    self.displayAlert(id: id)
                }
            }
        }
    }
    
    func displayAlert(id: String) {
        let alertController = UIAlertController(title: "OTP?", message: "", preferredStyle: .alert)
        
        let cancelAction = UIAlertAction(title: "Cancel", style: .default, handler: {
            (action : UIAlertAction!) -> Void in
        })
        
        let saveAction = UIAlertAction(title: "Save", style: .default, handler: {
            alert -> Void in
            
            let otpText = alertController.textFields![0] as UITextField
            if let otp = otpText.text {
                print(otp)
                
                RegistrationService().signIn(verificationId: id, verificationCode: otp){ (status, error) in
                    if error != nil {
                        return
                    }
                    
                    print("SignIn status", status ?? "Unknown")
                }
            }
        })
        
        alertController.addTextField { (textField : UITextField!) -> Void in
            textField.placeholder = "OTP"
        }
        
        alertController.addAction(cancelAction)
        alertController.addAction(saveAction)
        
        self.present(alertController, animated: true, completion: nil)
    }
}

Now you can run your app to try it out—here’s what you’ll see when you click Request OTP.

Now the sign-in status will print as Success. We can check in Firebase Console that a user has been created. 

Conclusion

In this tutorial, we built a simple app using Xcode and Firebase. Hopefully, you’ll have gained some new skills which you’ll be able to put into practice in your upcoming projects. 

If you have any questions, let me know in the comments below.