Authentication view

Ugh, that was quite a bit of work, but now we are ready to use all of the Firebase libraries.

Login UI

Let’s start by creating a very simple login page with email and password. SwiftUI uses a declarative approach very similar to React. The visual representation of the view is created by composing blocks of UI elements. UI elements are in fact functions which generate the respective view including its child views. These high level function take care of defining the layout and any constraints and provide additional methods to further modify them. This means the beautiful native views can be generated with very few lines of code without any repetitive boilerplate.

On the right side of the view we can see the Preview Canvas — it shows in real-time how the view is going to look like on a real device. The preview can be configured using the PreviewProvider at the end of the file, in our case in a struct named LoginView_Previews . Multiple previews can be generated at the same time. As of now, previews are supported only for iOS targets. When you try to request a preview for Mac you’ll be faced with a rather unhelpful message where in fact the problems is the chosen target (top left corner).

Login view implementation

Let create a new file in our project called LoginView.swift and copy the above code into it. Every SwiftUI view implements the View protocol. This protocol requires you to provide a variable called body which returns some View. The some keyword allows us to return multiple types of view e.g. a Text view or a Button view. However, only one type of view can be returned from body (more on this a bit later)

First we start with a VStack (vertical stack). VStack allows us to combine multiple views together. VStack {} is equivalent with VStack(content: {}) , whereas content defines what’s going to be generated inside the stack.

Inside the VStack we first include a Text function which generates a View showing some simple text. The Text function returns a View , this fact can be used to further modify the view created by the Text function. Views can be modified using … , yes “modifiers”. In this case, .font is a view modifier which allows you to provide font formatting arguments. The .font modifier again returns a modified view with applied changes, this means we can make further changes to the Text view, for example change colour using the .background modifier.

TextField is similar to Text but allows the user to type some information into the box. We will use this to get the user’s email address. Part of TextField ’s definition is providing where the result will be stored. In this case at the beginning of the LoginView we have declared two variables: email and password . The @State in the declaration and $ in TextField tell Swift that the value is dynamically updated. Meaning that changes done by user to the TextField will be saved in the $ variable and changes done by the programmer to the variable will be shown to the user using TextField . More about this this in the next part. SecureField is the same as TextField but user won’t be able to see the value — this is useful for password fields.

After filling all the information we need a way to perform some action. A Button is ideal for this use case. When defining buttons we need to provide a Swift String type instead of the SwiftUI Text element. In addition, we need to provide an action that is performed when the button is pressed. For now, we use an empty function {} , but later this is going to perform the login.

To make view a bit prettier we can use Divider and Spacer . Divider inserts a line to visually separate views. Spacer generates a space, but in a rather funny way: Spacer consumes all empty space and pushes content up or down. When we have multiple spacers e.g Spacer1 , Text , Spacer2 , Spacer3 , the View will compute that 90% of the view is empty and then divide total empty space by the number of spacers and each spacer will get a proportional share of space, in this case 30%. Meaning that our Text view will be in approximately about 1/3 from the top.

Let’s open ContentView.swift and replace Text(“Hello, World!”) with a call to our login view LoginView() . This will show us our newly created view when running our simple application. To see this in action, run the application and verify you can see login page. If facing any problems refer to the finished application on Github.

Let’s create a new file CreateAccountView.swift . The CreateAccount view is very similar to the previous LoginView with a slight modification in the title, description and a different action when pressing create button.

You can copy the provided code from below.