13.3. Displaying Images Hosted in Cloud

Now, we know the download URL of the profile photo of the logged-in user. We will now display it in an ImageView.

We first add a custom utility for the UIImageView class using extension keyword. Let's create a file named 'ImageViewUtils.swift'.

Put the following code there:

//
//  ImageViewUtils.swift
//  App12
//
//  Created by Sakib Miazi on 6/5/23.
//

import Foundation
import UIKit

extension UIImageView {
    //MARK: Borrowed from: https://www.hackingwithswift.com/example-code/uikit/how-to-load-a-remote-image-url-into-uiimageview
    
    func loadRemoteImage(from url: URL) {
        DispatchQueue.global().async { [weak self] in
            if let data = try? Data(contentsOf: url) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.image = image
                    }
                }
            }
        }
    }
}

In the above code:

• We are extending the default UIImageView class and adding loadRemoteImage(from url: URL) method.

• On line 15: We are creating a background task to load the cloud image. It has to be through an asynchronous background thread because it is a network call. We cannot guarantee the image getting downloaded instantly.

• If the data from the remote URL is a valid image, then we load the data as image into the UIImageView.

Now, we need to open ViewController.swift file and scroll down to handleAuth.

Let's add the following couple of lines of code in the file:

//
//  ViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/1/23.
//

//codes omitted...

class ViewController: UIViewController {

   //codes omitted...
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        //MARK: handling if the Authentication state is changed (sign in, sign out, register)...
        handleAuth = Auth.auth().addStateDidChangeListener{ auth, user in
            if user == nil{
               //codes omitted...
                
            }else{
                //codes omitted...
                
                //MARK: setting the profile photo...
                if let url = self.currentUser?.photoURL{
                    self.mainScreen.profilePic.loadRemoteImage(from: url)
                }
                
                //codes omitted...
                
            }
        }
    }
    
    //codes omitted...
}

In the above code:

• If the user is logged in on lines 26 through 28, we are checking whether the user's profile photo is nil. If it's not nil, we set the profilePic's image using our custom utility.

Let's run the app now.

Great!!! We now know how to store and retrieve an image using Firebase Storage.

What data can you store in a FirebaseAuth user object?

• Firebase users have a fixed set of basic properties—a unique ID, a primary email address, a name and a photo URL—stored in the project's user database, that can be updated by the user (iOS, Android, web). You cannot add other properties to the user object directly; instead, you can store the additional properties in any other storage services, like Google Cloud Firestore.