How Can I Add a Background Image for FirebaseUI Login for iOS?

I’d like to be able to place a background image behind the three sign-in buttons (for Google, Facebook, and Email) of the FirebaseUI login screen. FirebaseUI login is a drop-in authentication solution for iOS, Android, and Web. I’m having trouble with iOS.

There’s a little bit of advice on Github, but not enough.

  • How to wait for firebase to load the data into a variable before returning the variable then call the function
  • How to remove a GeoFire handle for the following observe in Swift?
  • FCM Push notifications do not work on iOS 11
  • Firebase Cloud Messaging Doesn't Create Push Notifications but Gets Information
  • Query users by name or email address using Firebase (Swift)
  • Handling Errors in New Firebase and Swift
  • I first initialize my var customAuthPickerViewController : FIRAuthPickerViewController! near the top of the ViewController.swift file.

    Then, this is the function in my ViewController.swift file, but it’s not working. When I click the logout button, the app crashes, and no background image is ever shown.

    // Customize the sign-in screen to have the Bizzy Books icon/background image
    
    func authPickerViewController(for authUI: FIRAuthUI) -> FIRAuthPickerViewController {
    
        customAuthPickerViewController = authPickerViewController(for: authUI)
        backgroundImage = UIImageView(image: UIImage(named: "bizzybooksbee"))
        backgroundImage.contentMode = UIViewContentMode.scaleAspectFill
        customAuthPickerViewController.view.addSubview(backgroundImage)
    
        return customAuthPickerViewController
    }
    

    The background image “bizzybooksbee” is a Universal Image Set with 1x, 2x, and 3x images already loaded in my Assets.xcassets folder.

    Here’s a picture of what the login screen looks like without trying to implement the background image.

    enter image description here

    UPDATE: I’m able to get the image to show, with the code I gave in the comments below, but it shows OVER the sign-in buttons, as in the pic below.

    enter image description here

    Here’s an image of the “heirarchy,” with Jeffrey’s help:

    enter image description here

    Solutions Collect From Internet About “How Can I Add a Background Image for FirebaseUI Login for iOS?”

    Here’s the solution!

    Remove the junk that doesn’t work from ViewController.swift:

    func authPickerViewController(for authUI: FIRAuthUI) -> FIRAuthPickerViewController {
    
        customAuthPickerViewController = authPickerViewController(for: authUI)
        backgroundImage = UIImageView(image: UIImage(named: "bizzybooksbee"))
        backgroundImage.contentMode = UIViewContentMode.scaleAspectFill
        customAuthPickerViewController.view.addSubview(backgroundImage)
    
        return customAuthPickerViewController   
    }
    

    Create a .swift “subclass” of FIRAuthPickerViewController that you can name anything, and add your background image/customization there:

    import UIKit
    import FirebaseAuthUI
    
    class BizzyAuthViewController: FIRAuthPickerViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            // Do any additional setup after loading the view.
    
            let width = UIScreen.main.bounds.size.width
            let height = UIScreen.main.bounds.size.height
    
            let imageViewBackground = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
            imageViewBackground.image = UIImage(named: "bizzybooksbee")
    
            // you can change the content mode:
            imageViewBackground.contentMode = UIViewContentMode.scaleAspectFill
    
            view.insertSubview(imageViewBackground, at: 0)
        }}
    

    In your ViewController.swift (or whatever you call it), in the section where you login, change authViewController to equal your new subclass, add a line for the navigation controller, and pass it into the self.present:

    let authViewController = BizzyAuthViewController(authUI: authUI!)
    
    let navc = UINavigationController(rootViewController: authViewController)
    
    self.present(navc, animated: true, completion: nil)
    

    I also made a YouTube tutorial which shows how to do this in depth.