12.5.2. Register Screen: Create a user in Firebase

Let's design the Register Screen to let the user create an account. It will look like the following:

The Register Screen design is very simple; we have three text fields to put the name, email, and password so that the user can create an account with them.

RegisterView.swift

Let's create a new Group named "Register Screen." Create another group "Views" inside the "Register Screen" group. Add a file named "RegisterView.swift" in it.

Put the following code to create the view for the Register screen:

//
//  RegisterView.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import UIKit

class RegisterView: UIView {
    var textFieldName: UITextField!
    var textFieldEmail: UITextField!
    var textFieldPassword: UITextField!
    var buttonRegister: UIButton!
    
    override init(frame: CGRect){
        super.init(frame: frame)
        self.backgroundColor = .white
        setuptextFieldName()
        setuptextFieldEmail()
        setuptextFieldPassword()
        setupbuttonRegister()
        
        initConstraints()
    }
    
    func setuptextFieldName(){
        textFieldName = UITextField()
        textFieldName.placeholder = "Name"
        textFieldName.keyboardType = .default
        textFieldName.borderStyle = .roundedRect
        textFieldName.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(textFieldName)
    }
    
    func setuptextFieldEmail(){
        textFieldEmail = UITextField()
        textFieldEmail.placeholder = "Email"
        textFieldEmail.keyboardType = .emailAddress
        textFieldEmail.borderStyle = .roundedRect
        textFieldEmail.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(textFieldEmail)
    }
    
    func setuptextFieldPassword(){
        textFieldPassword = UITextField()
        textFieldPassword.placeholder = "Password"
        textFieldPassword.textContentType = .password
        textFieldPassword.isSecureTextEntry = true
        textFieldPassword.borderStyle = .roundedRect
        textFieldPassword.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(textFieldPassword)
    }
    
    func setupbuttonRegister(){
        buttonRegister = UIButton(type: .system)
        buttonRegister.setTitle("Register", for: .normal)
        buttonRegister.titleLabel?.font = .boldSystemFont(ofSize: 16)
        buttonRegister.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(buttonRegister)
    }
    
    func initConstraints(){
        NSLayoutConstraint.activate([
            textFieldName.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 32),
            textFieldName.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            textFieldName.widthAnchor.constraint(equalTo: self.safeAreaLayoutGuide.widthAnchor, multiplier: 0.9),
            
            textFieldEmail.topAnchor.constraint(equalTo: textFieldName.bottomAnchor, constant: 16),
            textFieldEmail.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            textFieldEmail.widthAnchor.constraint(equalTo: self.safeAreaLayoutGuide.widthAnchor, multiplier: 0.9),
            
            textFieldPassword.topAnchor.constraint(equalTo: textFieldEmail.bottomAnchor, constant: 16),
            textFieldPassword.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            textFieldPassword.widthAnchor.constraint(equalTo: self.safeAreaLayoutGuide.widthAnchor, multiplier: 0.9),
            
            buttonRegister.topAnchor.constraint(equalTo: textFieldPassword.bottomAnchor, constant: 32),
            buttonRegister.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

The above code is very straightforward to display three text fields: name, email, password, and a register button.

RegisterViewController.swift

Then let's create RegisterViewController.swift file to write code for controlling the Register screen.

//
//  RegisterViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import UIKit
import FirebaseAuth
import FirebaseFirestore

class RegisterViewController: UIViewController {

    let registerView = RegisterView()
    
    override func loadView() {
        view = registerView
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        navigationController?.navigationBar.prefersLargeTitles = true
        registerView.buttonRegister.addTarget(self, action: #selector(onRegisterTapped), for: .touchUpInside)
        title = "Register"
    }
    
    @objc func onRegisterTapped(){
        //MARK: creating a new user on Firebase...
        //registerNewAccount()
    }
    
    
}

In the above code:

• We have added the onRegisterTapped() method to handle if the Register button is tapped. We need to patch the Firebase code on line 30.

RegisterFirebaseManager.swift

We will separate the code for Firebase from the controller. Let's create a new file Register Screen -> RegisterFirebaseManager.swift.

In this file, we will handle the Firebase Authentication procedures.

Firebase Authentication

Please visit the following documentation for using the Firebase Authentication service in iOS: https://firebase.google.com/docs/auth/ios/start. First look at their official documentation. If you are confused, ask us.

We have to do the following tasks:

• We need to register the user using email and password.

• Then we will update the profile's display name.

So, let's write the following code in RegisterFirebaseManager.swift file:

//
//  RegisterFirebaseManager.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import Foundation
import FirebaseAuth

extension RegisterViewController{
    
    func registerNewAccount(){
        //MARK: create a Firebase user with email and password...
        if let name = registerView.textFieldName.text,
           let email = registerView.textFieldEmail.text,
           let password = registerView.textFieldPassword.text{
            //Validations....
            Auth.auth().createUser(withEmail: email, password: password, completion: {result, error in
                if error == nil{
                    //MARK: the user creation is successful...
                    self.setNameOfTheUserInFirebaseAuth(name: name)
                }else{
                    //MARK: there is a error creating the user...
                    print(error)
                }
            })
        }
    }
    
    //MARK: We set the name of the user after we create the account...
    func setNameOfTheUserInFirebaseAuth(name: String){
        let changeRequest = Auth.auth().currentUser?.createProfileChangeRequest()
        changeRequest?.displayName = name
        changeRequest?.commitChanges(completion: {(error) in
            if error == nil{
                //MARK: the profile update is successful...
                self.navigationController?.popViewController(animated: true)
            }else{
                //MARK: there was an error updating the profile...
                print("Error occured: \(String(describing: error))")
            }
        })
    }
}

In the above code:

(Creating a new User in Firebase)

• The registerNewAccount() method creates a new account using Firebase Authentication service.

  • You have to import the authentication library FirebaseAuth (line 9).

  • Then on lines 14 through 17, we read the text fields to unwrap name, email, and password.

  • Then you need to validate the user inputs; I am omitting it here.

  • Then we call Auth.auth().createUser(withEmail:...) to send a request to the Firebase Authentication service to create a user with email and password.

  • In the completion closure, we will handle the response from the Firebase server.

    • There are two parameters of the response: result and error.

    • Then we check if the error is nil, meaning if there is no error. If there is no error, we decide that the response was successful, and the user is created.

      • Please note we cannot set the profile data in a FirebaseAuth account while creating the account. It can create just an account with the email and password. Then we have to update the profile with the name provided by the user in setNameOfTheUserInFirebaseAuth() method.

    • Else we have to handle the error.

(Updating a User Profile in Firebase)

• The setNameOfTheUserInFirebaseAuth(name: String) method updates the profile of the created user. (See https://firebase.google.com/docs/auth/ios/manage-users#update_a_users_profile).

  • On line 33, we create a change request for the current FirebaseAuth user.

  • On line 34, we set the intended name of the user in the change request.

  • Then on line 35, we commit the changes with a request.

    • The completion closure handles what happens after the profile update.

    • If there is no error, the response returns a nil error. So, here we can certainly say that the profile has been updated.

    • Since all the tasks are done, we can close the register screen and return to the main screen (line 38).

Very important: Firebase calls are asynchronous, requiring network communications and server processing. So the sequence of events is very important. You must wait until one operation is done, then conduct the next operation. We cannot create a Firebase user and update profile operations together. We have to wait for the user to be created first. If the response is successful and the user is created, we update the profile. You must think carefully before writing codes and maintain the chain of Firebase calls correctly to avoid errors.

RegisterViewController.swift

Now we need to handle when the user taps on the Register button. We need to call registerNewAccount() method from onRegisterTapped() method in RegisterViewMethod.swift file.\

Open RegisterViewController.swift file, and update the onRegisterTapped method.

@objc func onRegisterTapped(){
    //MARK: creating a new user on Firebase...
    registerNewAccount()
}

Patching the Main Screen to Show Register Screen

Open RightBarButtonManager.swift file. Now, we need to write the logic for opening the Register Screen in registerAction AlertAction. We will add the following codes:

//
//  RightBarButtonManager.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

//codes omitted...

extension ViewController{
    func setupRightBarButton(isLoggedin: Bool){
        //codes omitted...
    }
    
    @objc func onSignInBarButtonTapped(){
        //codes omitted...
        
        //MARK: Register Action...
        let registerAction = UIAlertAction(title: "Register", style: .default, handler: {(_) in
            //MARK: logic to open the register screen...
            let registerViewController = RegisterViewController()
            self.navigationController?.pushViewController(registerViewController, animated: true)
        })
        
        //codes omitted...
    }
    //codes omitted...   
}

If you run the app now, you will see:

If you now look into the Firebase Authentication portal,