Firebase User Registration

Overview

In our first lesson, we learned how to integrate the Firebase library into our project. In this tutorial, we will design a user registration and login screen using Storyboard and implement user registration with the server.

Reference: Swift — CocoaPods — Firebase Integration

Step 1: Storyboard Setup

Add the following elements to your Storyboard:

• "User Registration App" (Label)
• "Enter Email" (emailTextField)
• "Enter Password" (passwordTextField)
• "Login" (loginButton)
• "Register" (registerButton)

Don't forget to connect the Storyboard elements to your ViewController.swift file.

Step 2: Navigation Setup (Optional)

After successful registration, you'll want to navigate to a new view. Add a new ViewController to your Storyboard with an Identifier.

To create navigation between views:

1. Hold Command and right-click to drag from the first screen to the second screen
2. Select "Show" from the options
3. Add an Identifier name

You can set the new view to "Present Modally, FullScreen" if you want full-screen display.

Step 3: Error Message Function

Before implementing Firebase registration, let's create an error message function to handle registration failures.

This function will be called with a title and message content as parameters: (titleInput: String, messageInput: String)

func showAlert(titleInput: String, messageInput: String) {
    let alert = UIAlertController(title: titleInput, message: messageInput, preferredStyle: UIAlertController.Style.alert)
    let okButton = UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil)
    alert.addAction(okButton)
    self.present(alert, animated: true, completion: nil)
}

We use UIAlertController to show a pop-up warning to the user. The action button will be "OK" and we add this action to the alert. Finally, we present the alert with animation.

Step 4: Firebase Console Configuration

First, go to the Firebase console and enable email and password authentication.

Step 5: Registration Implementation

When the "Register" button is tapped, we first check if the email and password text fields are empty (lines 3 and 9).

@IBAction func registerButtonTapped(_ sender: Any) {
    if emailTextField.text != "" && passwordTextField.text != "" {
        Auth.auth().createUser(withEmail: emailTextField.text!, password: passwordTextField.text!) { (authdata, error) in
            if error != nil {
                self.showAlert(titleInput: "Error", messageInput: error?.localizedDescription ?? "Error")
            } else {
                self.performSegue(withIdentifier: "toSecondVC", sender: nil)
            }
        }
    } else {
        showAlert(titleInput: "Error", messageInput: "Please enter email and password")
    }
}

If the fields are filled, we perform the registration on line 5. The "error in" code block on line 5 handles Firebase errors (registration failure, server problems, existing email, etc.) and shows an error message to the user.

If an error occurs (line 6), we call the showAlert function. If no error, we use performSegue to navigate to the other ViewController.

If the email and password fields are empty, we show a warning to enter username and password.

Complete ViewController Code

Here's the complete ViewController implementation:

import UIKit
import Firebase

class ViewController: UIViewController {
    
    @IBOutlet weak var emailTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    func showAlert(titleInput: String, messageInput: String) {
        let alert = UIAlertController(title: titleInput, message: messageInput, preferredStyle: UIAlertController.Style.alert)
        let okButton = UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil)
        alert.addAction(okButton)
        self.present(alert, animated: true, completion: nil)
    }
    
    @IBAction func registerButtonTapped(_ sender: Any) {
        if emailTextField.text != "" && passwordTextField.text != "" {
            Auth.auth().createUser(withEmail: emailTextField.text!, password: passwordTextField.text!) { (authdata, error) in
                if error != nil {
                    self.showAlert(titleInput: "Error", messageInput: error?.localizedDescription ?? "Error")
                } else {
                    self.performSegue(withIdentifier: "toSecondVC", sender: nil)
                }
            }
        } else {
            showAlert(titleInput: "Error", messageInput: "Please enter email and password")
        }
    }
}

Additional Features

You can enhance your registration screen by adding:

1. Password Confirmation: Add a second password field to confirm the password
2. Email Validation: Check if the email format is valid
3. Password Strength: Ensure password meets minimum requirements
4. Loading Indicator: Show a spinner during registration
5. Terms and Conditions: Add a checkbox for user agreement