SwiftUI | Email/Password Signup Using Firebase

Learn how to implement an email/password authentication with the Firebase Auth APIs

The screen we are going to build

Difficulty: Beginner | Easy | Normal | Challenging

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

Create a new project

Open Xcode > App template > Select SwiftUI Interface and Life Cycle > call your project FirebaseTest.

Connect to the Firebase SDK with SPM

It’s now time to add the Firebase SDK to our project to communicate with the Firebase authenticate APIs. Please, check out the following article to learn how to add Firebase to your App:

How to add Firebase to a SwiftUI Project with SPM

If you have already connected Firebase to your SwiftUI project, you can also go ahead.

Set up Firebase Authentication

Go to your Firebase console and navigate to the Authentication section:

Firebase console > Authentication

From there click on Get started, and enable email/password login such as follow:

Firebase authenticate > Sign-in method

You app is now ready to register users to the the Firebase’s backend.

Let’s build the user interface

Now that Firebase’s backend is successfully communicating with our Application, we can implement our UI. First, create a new file and call it LoginView.

We will implement a few things, a Picker to switch between sign up and login on the same screen, 2 TextField, one for the email and one for the password with a Button to sign up or login.

But, first, let’s import the framework at the top of our File:

Then we will add three State variables to follow the evolution of our Picker and the entries for both of our TextField. Add the following code inside the struct LoginView but over the Body variable.

Now time to add all the UI elements, add the following code inside the Body variable:

Little explanation here:

We just implemented a User interface with a switcher to change from login to sign up, this way we will implement the signup function when the user is on the “create account” and call the signin function when the user switch to “Log In”. Run your App in the canvas and you should have this:

Our App running in the canvas

Let’s implement the signup and login functions

It’s now time to grab the Firebase Auth APIs to sign up or login our user.

Implement the two following function after the Body variable:

The 2 functions are taken directly from the Firebase documentation, one is for registering the user, the other to sign in, additionally, we are printing the errors in our console if there are any.

We can now call these 2 functions inside our Button action:

Button(action: { [add the code below here] },

Run your App

It’s now time to run our App, go to the FirebaseTestApp file and replace ContentView() to LoginView() since we need to run our program in the simulator.

Now, navigate to the sign up section and enter an email with a password of at least 6 characters, see what’s happening in the Firebase Console:

Our final result

Et voilà! We have sign up our user, you can now navigate to the login section and sign-in with the credentials we just used, if you have done a mistake writing the email or the password, Firebase will return an error in the console.

Where to go from here?

Now that we have added sign up and login, the next step is to check if our user is currently logged in, if yes, show the ContentView displaying their emails and a logout button, otherwise, present the LoginView. This is possible thanks to the Firebase Auth Listener and will be part of an upcoming tutorial. Stay tuned!

Thanks for reading! I’m always happy to have a chat and collaborate at hello@sullivandecarli.com. Consider subscribing to enjoy unlimited access to my articles and all of Medium through my referral link

I leave the full code here, in case you missed something: