SwiftUI | Firebase Auth — Manage a User Session

In this tutorial, we are going to integrate Firebase Auth SDK, implement sign ups with email/password and sign outs, and handle the UI based on a user session

Difficulty: Beginner | Easy | Normal | Challenging

Environment : Xcode 13, iOS 15, MVVM, Firebase & SwiftUI

Repository at the end of this article

Introduction

We are going to learn how to authenticate our users with an email address, get the currently signed-in user with a listener and present the sign in screen or the main screen accordingly, as done on popular social media login flows, like Instagram, TikTok, etc.

This is a great starter if you’re looking to build an application in which access is restricted to authenticated users only.

The logic we are going to implement:

Illustration of the logic we are going to implement

Create a new project

Go to Xcode > Create a new project > SwiftUI interface & lifecycle > Name it FireLogin

Add the Firebase SDK to your project

Go to the Firebase console and create a new project:

Add an iOS App to your Firebase project

Click on iOS+ and follow the 5 steps presented by Firebase. Make sure to add the Firebase Auth module with the Swift Package Manager:

Once you have added the GoogleService-info.plist file into your folder and implemented the code below in the file FireLoginApp.swift, you should be successfully connected to Firebase.

How your FireLoginApp.swift file should look.

Configure Firebase Auth

Now, head to your Firebase console and add Firebase Auth capabilities — we only need the email provider for now. To do so, click on get started, select email/password provider and switch it on to enable it, then save the changes. You are now ready to communicate user information back and forth with Firebase.

Let’s implement the View Model

Thanks to Firebase’s APIs, we don’t need to create a model. It is already provided as part of the FIRUser and it contains all the information that we need. So let’s go ahead and create a Swift file and call it AuthViewModel, then paste the following code:

In this code we handle multiple crucial steps:

• We implemented a reference to our model, the Firebase user that we introduced as a variable.
• We added a listener to check if the user is logged in or not.
• We implemented a function to sign up our user with an email and a password.
• We added the necessary function to log out our user and end the current session.

Great, now we can head to the FireLoginApp.swift file and add an environmentObject as part of the body variable next to the ContentView().

.environmentObject(AuthViewModel())

This way, we will have a binding with our View Model to observe the user status at the app start up.

Since the ContentView.swift file will be the first screen we show, we are going to handle the logic in this file:

• If there is no user session active, present the sign up screen.
• If the user is logged in, present the main screen.

In ContentView.swift, start by observing our View Model:

@EnvironmentObject private var authModel: AuthViewModel

Then replace the current Text “Hello, world!” with the code below inside the Body variable:

Group {
if authModel.user != nil {
MainView() 
} else {
SignUpView() 
} 
}.onAppear {
authModel.listenToAuthState() 
}

Create the user interface

We have just implemented the logic that we described earlier, only one step is missing: creating both screens, SignUpView and MainView.

Go ahead and create two SwiftUIView files, call one SignUpView and the other MainView.

In SignUpView, implement the following code:

First, we observe our View Model:

@EnvironmentObject private var authModel: AuthViewModel

Then, we add two variables for the email and password:

@State private var emailAddress: String = "" 
@State private var password: String = ""

Now, we can implement the user interface in the body varaible:

You can now run your application and sign up your first user! Once you have clicked on “sign up,” you should be able to find your user in the Firebase console > Authentication

Great, our user is registered on Firebase and after it is logged in, we are bringing it to the MainView.swift.

Now that our user can sign up, we are going to add the function to logout and display the current user’s email.

Observe the AuthViewModel inside the MainView.swift file.

@EnvironmentObject private var authModel: AuthViewModel

And implement the following code inside the body variable:

Great, now you can run your application again. Since we have implemented the listener to check user status, we will have our MainView presented first with the current email.

When clicking on logout, our session is terminated and we are back to the SignUpView.

Where to go from here?

We just implemented a logic to restrict user access to only authenticated users, it is fast and easy thanks to the APIs provided by Firebase. You can now implement the sign-in and forget password function. Also, to make the user experience even better, you can check out my other article on how to integrate Sign In with Apple. The code we implemented to check the user session is also going to work great with it, you might just need to adapt the user interface:

Sign in With Apple Using Firebase Auth SDK and SwiftUI 2

You can support my work by either buying my book on SwiftUI & Firebase or subscribing to enjoy unlimited access to my articles and all of Medium through my referral link.

GitHub Repository:

GitHub - Sullivan677/FireLogin: A login flow using Firebase and SwiftUI to restrict access to…