How To Build A Firebase App With SwiftUI

Sebastian Esser
Sep 20, 2019 · 3 min read
Image for post
Image for post

This is a tutorial on how to build your first SwiftUI based app with Firebase integration. All code is up to date with the current Xcode 11 GM release. We’ll be making a simple todo list app that stores its data in Firebase and requires a login to view the users' todo’s.

First, go to your Firebase console and add a new project. Go through the usual steps and download the plist file generated during setup.

Image for post
Image for post

While you’re on Firebase, setup the authentication for email and password and set up a Realtime Database with the following rules. These allow the user to only access their own content.

{
"rules": {
"$uid": {
".write": "$uid === auth.uid",
".read": "$uid === auth.uid"
}
}
}

Once you’ve got that complete, create a new project in Xcode 11 and select Single View App. Call it whatever you’d like, I named mine TODO. Importantly, make sure you select SwiftUI as the user interface, and click Next to save the project.

Image for post
Image for post

Before you forget, add that plist file from Firebase now.

Image for post
Image for post
Be sure to place it within the project folder.

Navigate to AppDelegate and configure Firebase in the didFinishLaunchingWithOptions function.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {   //Firebase
FirebaseApp.configure()
return true
}

Create a new pod file and make sure to include Firebase/Auth as well as Firebase/Database for our purposes. (If this is your first time using pods check out: https://cocoapods.org)

# Pods for TODOpod 'Firebase'
pod 'Firebase/Auth'
pod 'Firebase/Analytics'
pod 'Firebase/Database'

Once set up, run the pod file, exit your TODO project and open up the newly created workspace file. First add a model to define your User.

Now add a model to define your todo data.

Let’s now create the session file. Included are all of the functions you’ll need for Firebase.

Next let’s do the basic view. The home page should display a simple list with clickable items. It should also have a way to log in and out as well as sign up. Finally, it should have a way of adding more todo items. Open up ContentView.swift and setup the view.

Create new SwiftUI view files for logging in, signing up, viewing the todo on the list, details, and adding a new todo. Use functions from the session file to communicate with Firebase. (Check the bottom for a Github link to the completed version if you’re stuck.)

Finally, test and ensure the app all functions correctly, albeit a bit ugly.

I hope this guide helped you create your first SwiftUI app using Firebase. It’s quite a simple app with minimal aesthetic considerations. Feel free to build on this into whatever you’d like. Below is a link to a completed version of the TODO app if you need more guidance. If you need help with SwiftUI, check out the SwiftUI tutorials on Apple’s developer website.

https://github.com/EsserApps/TODO/

Flawless iOS

🍏 Community around iOS development, mobile design, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store