Creating a Login Screen in SwiftUI

SwiftUI is a powerful framework for building user interfaces across all Apple platforms. One of the most common features in mobile applications is a login screen. In this article, we’ll guide you through creating a simple login screen in SwiftUI, complete with text fields for username and password, and a login button.

Step-by-Step Guide

1. Set Up Your Project:

• Open Xcode.
• Create a new SwiftUI project by selecting “App” and clicking “Next.”
• Enter your project name, select “SwiftUI” for the User Interface, and click “Next.”
• Choose a location to save your project and click “Create.”

2. Design the Login Screen:

Open ContentView.swift and set up the basic structure of your login screen. Here’s the complete code:

struct ContentView: View {
    @State private var username: String = ""
    @State private var password: String = ""
    @State private var isSecure: Bool = true
    
    var body: some View {
        VStack {
            // Title
            Text("Login")
                .font(.largeTitle)
                .bold()
                .padding(.bottom, 40)
            

            HStack {
                // Find a suitable icon from SF symbol
                Image(systemName: "person.fill")
              
                // Username Field
                TextField("Username", text: $username)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.horizontal, 20)
            }
            .padding()
            
            HStack {
                // Find a suitable icon from SF symbol
                Image(systemName: "lock.fill")
                
                // Password Field
                if isSecure {
                    SecureField("Password", text: $password)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding(.horizontal, 20)
                } else {
                    TextField("Password", text: $password)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding(.horizontal, 20)
                }
            }
            .padding()
            
            // Toggle Show/Hide Password
            Button(action: {
                isSecure.toggle()
            }) {
                Text(isSecure ? "Show Password" : "Hide Password")
                    .foregroundColor(.blue)
            }
            .padding(.bottom, 20)
            
            // Login Button
            Button(action: {
                login()
            }) {
                Text("Login")
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.blue)
                    .cornerRadius(10)
                    .padding(.horizontal, 20)
            }
        }
        .padding()
    }
    
    func login() {
        // Add login action here
        print("Username: \(username), Password: \(password)")
    }
}

Explanation

1. State Properties:

• @State private var username: String = "": This property holds the username entered by the user.
• @State private var password: String = "": This property holds the password entered by the user.
• @State private var isSecure: Bool = true: This property determines whether the password is visible or masked.

2. VStack:

• A vertical stack that arranges its children (title, HStack for Username, HStack for password) vertically.

3. Text:

• Displays a static title (“Login”) with a large font and padding below.

4. HStack:

• A horizontal stack that arranges its children (image, text field for username)

5. Image:

• You can use an image provide reference here according to your need. In this example I use image/icon from SF symbols.
• If you want to know more about SF symbols check my other article here.

6. TextField:

• A text field for the username. It uses RoundedBorderTextFieldStyle for styling and horizontal padding for spacing.

7. HStack:

• A horizontal stack that arranges its children (image, secure field for Password)

8. Image:

• Use a logo/image to denote the password field. I used SF symbol. check this article for SF symbols.

9. SecureField:

• A secure text field for the password, which masks the input. Conditional rendering is used to toggle between SecureField and TextField for showing or hiding the password.

10. Button (Toggle Password Visibility):

• Toggles the visibility of the password by changing the isSecure state.

11. Button (Login):

• Triggers the login() function, which currently prints the username and password to the console. In a real application, you would handle the authentication process here.

12. Styling:

• The Login button is styled with padding, background color, and corner radius to make it visually appealing.

Running the App

1. Ensure your simulator is running (or connect a physical device).
2. Click the play button in Xcode to build and run the app.
3. You should see a login screen with fields for username and password, a button to toggle password visibility, and a login button. Enter a username and password, and tap the login button to see the credentials printed in the Xcode console.

Conclusion

In this article, we walked through creating a simple login screen in SwiftUI. We used TextField for the username, SecureField for the password, Image to denote logo of ‘TextField/SecureField’ through SF Symbols, and implemented a toggle button to show or hide the password. This basic structure can be expanded with additional features like form validation, network requests, and error handling to create a fully functional login screen for your application.

Github

https://github.com/faraz-zafar/Login_Screen_SwiftUI_Example