If you’ve used apps like Twitter, Youtube or LinkedIn while they’re loading content, you’ve seen the SwiftUI skeleton screen effect — that smooth, animated highlight that sweeps across placeholder shapes.

It’s one of the best ways to give users visual feedback while data loads, replacing static blank screens with a polished SwiftUI placeholder view that feels alive.

In this post, I’ll walk you through a quick guide on how to build it from scratch in SwiftUI.

Project Setup

Start by creating a new SwiftUI file. Right-click in your project navigator, choose New File → SwiftUI View, and name it ShimmerView (or whatever you prefer). This will be our reusable component.

Step 1: Setting Up the Gray Placeholder Background

The base of the shimmer effect is a gray placeholder background. Add a gray color with a low opacity to keep it easy on the eyes:

Color.gray
    .opacity(0.2)

Color.gray
    .opacity(0.2)

That’s all there is to the background — simple and clean.

Step 2: Building the LinearGradient Shimmer Effect

The shimmer is a linear gradient that fades in from the left, peaks in the middle, and fades back out on the right. We place it on top of the background using the .overlay modifier.

Because we need to know the full width of the view for the animation, we wrap everything inside a GeometryReader:

.overlay(
    GeometryReader { reader in
        LinearGradient(
            colors: [
                .clear,
                .gray.opacity(0.3),
                .clear
            ],
            startPoint: .leading,
            endPoint: .trailing
        )
        .frame(width: 200)
    }
)

.overlay(
    GeometryReader { reader in
        LinearGradient(
            colors: [
                .clear,
                .gray.opacity(0.3),
                .clear
            ],
            startPoint: .leading,
            endPoint: .trailing
        )
        .frame(width: 200)
    }
)

The three-color gradient — clear → gray → clear — gives us that soft, fading highlight. We constrain its width to 200 points so it appears as a stripe rather than filling the whole view. Feel free to adjust this to taste.

Step 3: Animating the Shimmer with KeyframeAnimator

Now for the fun part: making it move. We use SwiftUI’s keyframeAnimator modifier to sweep the gradient from left to right on a continuous loop.

.keyframeAnimator(
    initialValue: 0.0,
    repeating: true
) { content, value in
    content
        .offset(x: value)
} keyframes: { _ in
    LinearKeyframe(
        reader.size.width + 200,
        duration: 1.5
    )
}

.keyframeAnimator(
    initialValue: 0.0,
    repeating: true
) { content, value in
    content
        .offset(x: value)
} keyframes: { _ in
    LinearKeyframe(
        reader.size.width + 200,
        duration: 1.5
    )
}

A few things to note here:

• initialValue: 0.0 — the animation starts at x = 0.
• repeating: true — the animation loops continuously as long as the view is on screen.
• LinearKeyframe — this gives us a constant, even speed across the animation (no easing in or out), which is exactly the effect we want.
• Duration of 1.5 seconds — a smooth, natural pace. Adjust to your preference.

Step 4: Finishing Touches

You’ll notice the gradient starts in the middle of the view rather than offscreen to the left. Fix this by applying a negative x-offset to the gradient so it begins fully out of frame:

.offset(x: -200)

.offset(x: -200)

Now the shimmer sweeps all the way from left to right — exactly as expected.

How to Apply the Shimmer to Any SwiftUI View

Head over to ContentView (or wherever you want to use it) and apply ShimmerView as a background to any SwiftUI placeholder view using .clipShape:

VStack {
    // Rectangle placeholder (e.g. for a banner or text line)
    ShimmerView()
        .clipShape(RoundedRectangle(cornerRadius: 8))
        .frame(height: 60)

    // Circle placeholder (e.g. for an avatar)
    ShimmerView()
        .clipShape(Circle())
        .frame(width: 60, height: 60)
}
.padding()

VStack {
    // Rectangle placeholder (e.g. for a banner or text line)
    ShimmerView()
        .clipShape(RoundedRectangle(cornerRadius: 8))
        .frame(height: 60)

    // Circle placeholder (e.g. for an avatar)
    ShimmerView()
        .clipShape(Circle())
        .frame(width: 60, height: 60)
}
.padding()

By combining ShimmerView with different clip shapes and frame sizes, you can mock out any kind of loading UI — profile pictures, text lines, cards, and more.

Using the Shimmer as a SwiftUI ViewModifier

The ShimmerView approach works well, but there’s a more flexible and idiomatic SwiftUI way to do it — turning the shimmer into a ViewModifier. This lets you apply the effect to any existing view with a single modifier call, rather than wrapping things in a dedicated component.

Here’s the full implementation:

struct ShimmerModifier: ViewModifier {
    var backgroundColor: Color
    
    func body(content: Content) -> some View {
        content
            .overlay {
                GeometryReader { geometry in
                    LinearGradient(
                        colors: [.clear, .gray.opacity(0.2), .clear],
                        startPoint: .leading,
                        endPoint: .trailing
                    )
                    .frame(width: 200)
                    .offset(x: -200)
                    .keyframeAnimator(initialValue: 0.0, repeating: true) { shimmerContent, value in
                        shimmerContent.offset(x: value)
                    } keyframes: { _ in
                        LinearKeyframe(geometry.size.width + 200, duration: 1.5)
                    }
                }
            }
            .background(backgroundColor)
    }
}

extension View {
    func shimmer(
        backgroundColor: Color = .gray.opacity(0.2)
    ) -> some View {
        modifier(
            ShimmerModifier(backgroundColor: backgroundColor)
        )
    }
}

struct ShimmerModifier: ViewModifier {
    var backgroundColor: Color
    
    func body(content: Content) -> some View {
        content
            .overlay {
                GeometryReader { geometry in
                    LinearGradient(
                        colors: [.clear, .gray.opacity(0.2), .clear],
                        startPoint: .leading,
                        endPoint: .trailing
                    )
                    .frame(width: 200)
                    .offset(x: -200)
                    .keyframeAnimator(initialValue: 0.0, repeating: true) { shimmerContent, value in
                        shimmerContent.offset(x: value)
                    } keyframes: { _ in
                        LinearKeyframe(geometry.size.width + 200, duration: 1.5)
                    }
                }
            }
            .background(backgroundColor)
    }
}

extension View {
    func shimmer(
        backgroundColor: Color = .gray.opacity(0.2)
    ) -> some View {
        modifier(
            ShimmerModifier(backgroundColor: backgroundColor)
        )
    }
}

A couple of things worth highlighting:

• backgroundColor parameter — the background color is now part of the modifier itself, with a sensible default of gray.opacity(0.2). This means you no longer need to set the background separately on each placeholder shape.
• extension View — the convenience extension gives you clean dot-syntax across your entire app, just like any native SwiftUI modifier.

Usage is now much cleaner. Apply .shimmer() directly to any shape or view:

VStack(spacing: 16) {
    // Text line placeholder
    RoundedRectangle(cornerRadius: 8)
        .shimmer()
        .frame(height: 16)

    // Avatar placeholder
    Circle()
        .shimmer(backgroundColor: .gray.opacity(0.3))
        .frame(width: 60, height: 60)

    // Banner placeholder
    RoundedRectangle(cornerRadius: 12)
        .shimmer()
        .frame(height: 120)
}
.padding()

VStack(spacing: 16) {
    // Text line placeholder
    RoundedRectangle(cornerRadius: 8)
        .shimmer()
        .frame(height: 16)

    // Avatar placeholder
    Circle()
        .shimmer(backgroundColor: .gray.opacity(0.3))
        .frame(width: 60, height: 60)

    // Banner placeholder
    RoundedRectangle(cornerRadius: 12)
        .shimmer()
        .frame(height: 120)
}
.padding()

Notice how the shape itself defines the skeleton, and .shimmer() just layers the animation on top. This separation of concerns makes it trivial to swap placeholder shapes or customize colors per use case.

Summary

Here’s the full picture of what we built:

1. Gray background with low opacity as the base layer.
2. Linear gradient overlay fading clear → gray → clear, constrained to 200pt wide.
3. keyframeAnimator sweeping the gradient from left to right at constant speed.
4. Negative initial offset so the animation starts fully offscreen.
5. Reusable component you clip into any shape you need.

It’s a small touch, but a SwiftUI skeleton screen makes a big difference in how polished your app feels. Give it a try and tweak the width, duration, and colors to match your design.

The post SwiftUI Skeleton Loading View: Build a Shimmer Effect from Scratch appeared first on softwareanders.com.

Building secure iOS authentication for your SwiftUI apps just got easier. This SwiftUI Firebase tutorial shows you how to implement a complete login system using Firebase Auth—Google’s robust authentication platform that’s been the gold standard for mobile app development.

Whether you’re building your first iOS app authentication system or looking to learn more about Firebase, this guide provides everything you need. You’ll learn to create secure sign-in, registration, and session management with clean, production-ready SwiftUI code.

Unlike basic authentication guides, we’ll build a complete system with proper error handling, input validation, and real-world best practices that you can deploy immediately.

What You’ll Learn

By the end of this tutorial, you’ll have a fully functional authentication system that includes:

• User registration with email verification
• Secure sign-in functionality
• Password reset capabilities
• Session management
• Error handling and user feedback
• Clean, reusable SwiftUI components

Prerequisites

Before we dive in, make sure you have:

• Xcode 14+ installed
• Basic knowledge of SwiftUI
• A Google/Firebase account (free tier available)
• iOS 15+ as your deployment target

Setting Up Your Firebase Project

First, let’s set up the backend infrastructure:

1. Create a Firebase Project

1. Visit firebase.google.com and sign in with your Google account
2. Click “Create a project” and follow the setup wizard
3. Enter your project name and configure analytics (optional)
4. Wait for your project to be created (usually takes 1-2 minutes)
5. In the Firebase console, click “Add app” and select iOS
6. Register your app with your bundle identifier
7. Download the GoogleService-Info.plist file
8. Place the .plist file inside your project like the picture below

2. Configure Authentication Settings

To simplify this tutorial we are going to disable email verification – when you go to production, it’s good practice to keep this enabled and set it up correctly. But this tutorial is focused on implementing Firebase inside an iOS application:

1. Go to Authentication > Get Started > Sign-in method
2. Click on Email/Password
3. Enable Email/Password authentication
4. Disable “Email link (passwordless sign-in)” for now
5. Save your changes

iOS Project Setup with Firebase

Before we can do anything we need to create a new App, so open Xcode and create a new iOS project with SwiftUI interface.

Implement Firebase

Now it’s time to add Firebase to our project. Firebase provides excellent iOS SDKs that we’ll integrate using Swift Package Manager.

In Xcode, go to File → Add Package Dependencies and add:

https://github.com/firebase/firebase-ios-sdk

https://github.com/firebase/firebase-ios-sdk

Select these packages for your project:

• FirebaseAuth
• FirebaseCore

Then add the GoogleService-Info.plist file you downloaded earlier to your Xcode project.

Setting Up Firebase in Your SwiftUI App

When building SwiftUI apps that need Firebase services, you’ll need to initialize Firebase before your app starts running. We’ll do that by creating a AppDelegate class. Here’s the standard way to do it using an App Delegate:

import UIKit
import FirebaseCore

class AppDelegate: NSObject, UIApplicationDelegate {

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

import UIKit
import FirebaseCore

class AppDelegate: NSObject, UIApplicationDelegate {

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

What’s happening here:

• UIKit and FirebaseCore imports – UIKit gives us access to the app delegate protocol, while FirebaseCore contains the initialization methods
• AppDelegate class creation – We create a custom app delegate that inherits from NSObject and conforms to UIApplicationDelegate
• App launch method – The application(_:didFinishLaunchingWithOptions:) method runs automatically when your app starts
• Firebase initialization – FirebaseApp.configure() reads your Firebase configuration file and sets up the connection
• Success return – Returning true tells iOS that the app launched successfully

This App Delegate must be connected to your main SwiftUI App struct using @UIApplicationDelegateAdaptor to ensure Firebase initializes before your views load.

Setting Up the Main App Structure for Firebase Authentication

The main App struct is where everything comes together – it connects your App Delegate for Firebase initialization and launches your app’s main interface. Here’s how to structure your SwiftUI app entry point:

import SwiftUI

@main
struct FirebaseAuthTutorialApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

import SwiftUI

@main
struct FirebaseAuthTutorialApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

What’s happening here:

• App entry point – @main attribute marks this as the application’s main entry point where execution begins
• App protocol conformance – The struct conforms to the App protocol, which defines the structure of your SwiftUI app
• Delegate adapter – @UIApplicationDelegateAdaptor connects your custom AppDelegate to the SwiftUI app lifecycle
• Firebase initialization – The AppDelegate reference ensures Firebase.configure() runs before your views load
• Scene definition – WindowGroup creates the main window that contains your app’s user interface
• Root view setup – ContentView() becomes the first view users see when the app launches
• SwiftUI lifecycle – This structure uses SwiftUI’s modern app lifecycle instead of the traditional UIKit approach
• Automatic management – SwiftUI handles window management, scene transitions, and app state changes
• Clean architecture – Separates app initialization (AppDelegate) from UI structure (App body)

This App struct serves as the foundation that ties together Firebase initialization with your SwiftUI authentication interface, ensuring everything loads in the correct order.

Creating a Firebase Authentication Manager for SwiftUI

Managing user authentication in SwiftUI apps requires a centralized system that can track login status and communicate changes to your views. Here’s a complete AuthManager class that handles all the essential authentication functions:

import Foundation
import FirebaseAuth

class AuthManager: ObservableObject {
    @Published var isSignedIn: Bool = false
    @Published var user: User?
    
    init() {
        checkAuthStatus()
    }
    
    func checkAuthStatus() {
        if Auth.auth().currentUser != nil {
            isSignedIn = true
            user = Auth.auth().currentUser
        }else {
            isSignedIn = false
            user = nil
        }
    }
    
    @MainActor
    func createUser(email: String, password: String) async throws {
        do {
            let result = try await Auth.auth().createUser(withEmail: email, password: password)
            self.isSignedIn = true
            self.user = result.user
        } catch {
            self.isSignedIn = false
            throw error
        }
    }
    
    @MainActor
    func signIn(email: String, password: String) async throws {
        do {
            let result = try await Auth.auth().signIn(withEmail: email, password: password)
            self.isSignedIn = true
            self.user = result.user
        } catch {
            self.isSignedIn = false
            throw error
        }
    }
    
    func signOut() throws {
        do {
            try Auth.auth().signOut()
            self.isSignedIn = false
            self.user = nil
        } catch {
            throw error
        }
    }
    
    func forgotPassword(email: String) throws {
        Auth.auth().sendPasswordReset(withEmail: email)
    }
}

import Foundation
import FirebaseAuth

class AuthManager: ObservableObject {
    @Published var isSignedIn: Bool = false
    @Published var user: User?
    
    init() {
        checkAuthStatus()
    }
    
    func checkAuthStatus() {
        if Auth.auth().currentUser != nil {
            isSignedIn = true
            user = Auth.auth().currentUser
        }else {
            isSignedIn = false
            user = nil
        }
    }
    
    @MainActor
    func createUser(email: String, password: String) async throws {
        do {
            let result = try await Auth.auth().createUser(withEmail: email, password: password)
            self.isSignedIn = true
            self.user = result.user
        } catch {
            self.isSignedIn = false
            throw error
        }
    }
    
    @MainActor
    func signIn(email: String, password: String) async throws {
        do {
            let result = try await Auth.auth().signIn(withEmail: email, password: password)
            self.isSignedIn = true
            self.user = result.user
        } catch {
            self.isSignedIn = false
            throw error
        }
    }
    
    func signOut() throws {
        do {
            try Auth.auth().signOut()
            self.isSignedIn = false
            self.user = nil
        } catch {
            throw error
        }
    }
    
    func forgotPassword(email: String) throws {
        Auth.auth().sendPasswordReset(withEmail: email)
    }
}

What’s happening here:

• ObservableObject setup – The class publishes authentication state changes to update SwiftUI views automatically
• State tracking – isSignedIn and user properties maintain current authentication status
• Automatic status check – Constructor calls checkAuthStatus() to detect existing user sessions
• User registration – createUser() creates new Firebase accounts and updates local state on success
• Sign in functionality – signIn() authenticates users and stores their information locally
• Sign out capability – signOut() logs users out and clears all stored user data
• Password reset feature – forgotPassword() sends password reset emails to users who forgot their credentials
• Error propagation – All methods properly handle and re-throw Firebase errors for your app to manage
• Main thread safety – Authentication methods use @MainActor to ensure UI updates happen on the main thread
• Complete auth flow – Covers registration, login, logout, and password recovery for a full authentication system

This manager provides everything needed for a complete email/password authentication system in your SwiftUI app.

Building a Firebase Registration Screen in SwiftUI

Creating a user registration form requires input validation, loading states, and error handling. Here’s a complete SwiftUI registration view that integrates with our Firebase AuthManager:

import SwiftUI

struct RegisterView: View {
    @EnvironmentObject var authManager: AuthManager
    
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var confirmPassword: String = ""
    @State private var isLoading = false
    @State private var showError = false
    @State private var errorMessage: String = ""
    
    var body: some View {
        VStack(spacing: 40) {
            Text("Register to Firebase")
                .font(.title)
                .bold()
            
            VStack(alignment: .leading, spacing: 20) {
                VStack(alignment: .leading) {
                    Text("Enter email below:")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                    TextField("Enter email", text: $email)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
                
                VStack(alignment: .leading) {
                    Text("Enter password below:")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                    SecureField("Enter password", text: $password)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    SecureField("Re-enter password", text: $confirmPassword)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
                
            }
            Button(action: {
                Task {
                    do {
                        isLoading = true
                        try await authManager.createUser(email: email, password: password)
                        isLoading = false
                    }catch {
                        isLoading = false
                        errorMessage = error.localizedDescription
                        print("Registration failed: \(error.localizedDescription)")
                        showError = true
                    }
                }
            }) {
                HStack {
                    if isLoading {
                        ProgressView()
                            .progressViewStyle(CircularProgressViewStyle(tint: .white))
                            .scaleEffect(0.8)
                    } else {
                        Text("Signup using Firebase")
                    }
                }
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .background(Color.blue)
                .cornerRadius(8)
            }
        }
        .alert("Registration failed!", isPresented: $showError) {
            Button("OK") {
                showError = false
            }
        } message: {
            Text("\(errorMessage)")
        }
        .padding()
    }
}

#Preview {
    RegisterView()
}

import SwiftUI

struct RegisterView: View {
    @EnvironmentObject var authManager: AuthManager
    
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var confirmPassword: String = ""
    @State private var isLoading = false
    @State private var showError = false
    @State private var errorMessage: String = ""
    
    var body: some View {
        VStack(spacing: 40) {
            Text("Register to Firebase")
                .font(.title)
                .bold()
            
            VStack(alignment: .leading, spacing: 20) {
                VStack(alignment: .leading) {
                    Text("Enter email below:")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                    TextField("Enter email", text: $email)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
                
                VStack(alignment: .leading) {
                    Text("Enter password below:")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                    SecureField("Enter password", text: $password)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    SecureField("Re-enter password", text: $confirmPassword)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
                
            }
            Button(action: {
                Task {
                    do {
                        isLoading = true
                        try await authManager.createUser(email: email, password: password)
                        isLoading = false
                    }catch {
                        isLoading = false
                        errorMessage = error.localizedDescription
                        print("Registration failed: \(error.localizedDescription)")
                        showError = true
                    }
                }
            }) {
                HStack {
                    if isLoading {
                        ProgressView()
                            .progressViewStyle(CircularProgressViewStyle(tint: .white))
                            .scaleEffect(0.8)
                    } else {
                        Text("Signup using Firebase")
                    }
                }
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .background(Color.blue)
                .cornerRadius(8)
            }
        }
        .alert("Registration failed!", isPresented: $showError) {
            Button("OK") {
                showError = false
            }
        } message: {
            Text("\(errorMessage)")
        }
        .padding()
    }
}

#Preview {
    RegisterView()
}

What’s happening here:

• Environment object connection – @EnvironmentObject connects the view to the shared AuthManager instance
• State management – @State properties track user input, loading status, and error states
• Form structure – VStack layout creates a clean registration form with proper spacing
• Input fields – TextField for email and SecureField for password entries with rounded border styling
• Password confirmation – Second SecureField allows users to verify their password input
• Async registration – Button action uses Task to handle the async createUser() method
• Loading indicator – ProgressView appears during registration process, replacing button text
• Error handling – Catches registration failures and displays user-friendly error messages
• Alert system – Shows error alerts with specific failure messages from Firebase
• Visual feedback – Button changes appearance during loading and shows appropriate content
• Clean UI design – Consistent styling with proper typography, colors, and spacing throughout

This registration view provides a complete user experience with proper validation, feedback, and error handling for Firebase authentication.

Creating a Complete Firebase Sign-In Screen with Navigation

This SwiftUI view provides a full authentication interface with sign-in functionality and navigation to registration and password reset screens. Here’s the complete implementation:

import SwiftUI

struct SignInView: View {
    @EnvironmentObject var authManager: AuthManager
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var showError: Bool = false
    @State private var errorMessage: String = ""
    
    var body: some View {
        NavigationStack {
            
            
            VStack(spacing: 40) {
                Text("Firebase AUTH tutorial")
                    .font(.title)
                    .bold()
                
                
                VStack(alignment: .leading, spacing: 20) {
                    VStack(alignment: .leading, spacing: 3) {
                        Text("Enter your email below:")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                        TextField("Enter your email", text: $email)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                    }
                    
                    VStack(alignment: .leading, spacing: 3) {
                        Text("Enter your password below:")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                        SecureField("Enter your password", text: $password)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                    }
                    
                }
                
                VStackLayout(spacing: 10) {
                    Button(action: {
                        Task {
                            do {
                                try await authManager.signIn(email: email, password: password)
                            } catch {
                                print("Login failed: \(error.localizedDescription)")
                                errorMessage = error.localizedDescription
                                showError = true
                            }
                        }
                    }) {
                        Text("Login using Firebase")
                            .font(.headline)
                            .foregroundColor(.white)
                            .padding()
                            .background(Color.blue)
                            .cornerRadius(8)
                    }
                    
                    NavigationLink(destination:
                                    RegisterView()
                        .environmentObject(authManager)
                    ) {
                        Text("Register")
                            .font(.subheadline)
                    }
                    
                    NavigationLink(destination:
                                    ForgotPasswordView()
                        .environmentObject(authManager)
                    ) {
                        Text("Forgot password")
                            .font(.subheadline)
                    }
                    
                }
            }
            .alert("Login failed!", isPresented: $showError) {
                Button("OK") {
                    showError = false
                }
            } message: {
                Text("\(errorMessage)")
            }
            .padding()
        }
    }
}

#Preview {
    SignInView()
}

import SwiftUI

struct SignInView: View {
    @EnvironmentObject var authManager: AuthManager
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var showError: Bool = false
    @State private var errorMessage: String = ""
    
    var body: some View {
        NavigationStack {
            
            
            VStack(spacing: 40) {
                Text("Firebase AUTH tutorial")
                    .font(.title)
                    .bold()
                
                
                VStack(alignment: .leading, spacing: 20) {
                    VStack(alignment: .leading, spacing: 3) {
                        Text("Enter your email below:")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                        TextField("Enter your email", text: $email)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                    }
                    
                    VStack(alignment: .leading, spacing: 3) {
                        Text("Enter your password below:")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                        SecureField("Enter your password", text: $password)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                    }
                    
                }
                
                VStackLayout(spacing: 10) {
                    Button(action: {
                        Task {
                            do {
                                try await authManager.signIn(email: email, password: password)
                            } catch {
                                print("Login failed: \(error.localizedDescription)")
                                errorMessage = error.localizedDescription
                                showError = true
                            }
                        }
                    }) {
                        Text("Login using Firebase")
                            .font(.headline)
                            .foregroundColor(.white)
                            .padding()
                            .background(Color.blue)
                            .cornerRadius(8)
                    }
                    
                    NavigationLink(destination:
                                    RegisterView()
                        .environmentObject(authManager)
                    ) {
                        Text("Register")
                            .font(.subheadline)
                    }
                    
                    NavigationLink(destination:
                                    ForgotPasswordView()
                        .environmentObject(authManager)
                    ) {
                        Text("Forgot password")
                            .font(.subheadline)
                    }
                    
                }
            }
            .alert("Login failed!", isPresented: $showError) {
                Button("OK") {
                    showError = false
                }
            } message: {
                Text("\(errorMessage)")
            }
            .padding()
        }
    }
}

#Preview {
    SignInView()
}

What’s happening here:

• Navigation wrapper – NavigationStack enables navigation between sign-in, registration, and password reset screens
• AuthManager integration – @EnvironmentObject connects to the shared authentication manager
• Input state management – @State properties track email, password, and error states
• Clean form layout – VStack structure creates organized input sections with proper spacing
• Input fields – TextField for email and SecureField for password with rounded border styling
• Async sign-in – Button uses Task to handle the async signIn() method from AuthManager
• Error handling – Catches sign-in failures and displays specific error messages to users
• Navigation links – NavigationLink components provide seamless transitions to other authentication screens
• Environment object passing – Each destination view receives the AuthManager through .environmentObject()
• User-friendly navigation – Register and forgot password links offer alternative authentication paths
• Alert system – Error alerts show Firebase authentication failures with helpful messages
• Consistent styling – Uniform typography, colors, and spacing throughout the interface

This sign-in view serves as the main authentication hub, connecting users to all essential authentication functions in your Firebase-powered SwiftUI app.

Forgot password screen for Firebase authentication

When users forget their passwords, they need a simple way to reset them. Here’s a complete SwiftUI view that handles password reset requests through Firebase:

import SwiftUI

struct ForgotPasswordView: View {
    @EnvironmentObject var authManager: AuthManager
    @State private var email: String = ""
    @State private var showSuccess = false
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 40) {
                Text("Forgot Password")
                    .font(.title)
                    .bold()
                
                VStack(alignment: .leading, spacing: 20) {
                    VStack(alignment: .leading, spacing: 3) {
                        Text("Enter your email below:")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                        TextField("Enter your email", text: $email)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                            .keyboardType(.emailAddress)
                            .autocapitalization(.none)
                    }
                }
                
                VStackLayout(spacing: 10) {
                    Button(action: {
                        Task {
                            authManager.forgotPassword(email: email)
                            showSuccess = true
                        }
                    }) {
                        HStack {
                            Text("Send Reset Link")
                        }
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(8)
                    }
                    .disabled(email.isEmpty)
                    
                    Button("Back to Sign In") {
                        dismiss()
                    }
                    .font(.subheadline)
                }
            }
            .padding()
            .alert("Reset Link Sent!", isPresented: $showSuccess) {
                Button("OK") {
                    dismiss()
                }
            } message: {
                Text("We've sent a password reset link to \(email). Please check your inbox.")
            }
        }
    }
}

#Preview {
    ForgotPasswordView()
}

import SwiftUI

struct ForgotPasswordView: View {
    @EnvironmentObject var authManager: AuthManager
    @State private var email: String = ""
    @State private var showSuccess = false
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 40) {
                Text("Forgot Password")
                    .font(.title)
                    .bold()
                
                VStack(alignment: .leading, spacing: 20) {
                    VStack(alignment: .leading, spacing: 3) {
                        Text("Enter your email below:")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                        TextField("Enter your email", text: $email)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                            .keyboardType(.emailAddress)
                            .autocapitalization(.none)
                    }
                }
                
                VStackLayout(spacing: 10) {
                    Button(action: {
                        Task {
                            authManager.forgotPassword(email: email)
                            showSuccess = true
                        }
                    }) {
                        HStack {
                            Text("Send Reset Link")
                        }
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(8)
                    }
                    .disabled(email.isEmpty)
                    
                    Button("Back to Sign In") {
                        dismiss()
                    }
                    .font(.subheadline)
                }
            }
            .padding()
            .alert("Reset Link Sent!", isPresented: $showSuccess) {
                Button("OK") {
                    dismiss()
                }
            } message: {
                Text("We've sent a password reset link to \(email). Please check your inbox.")
            }
        }
    }
}

#Preview {
    ForgotPasswordView()
}

What’s happening here:

• Environment integration – @EnvironmentObject connects to the shared AuthManager and @Environment(\.dismiss) handles view dismissal
• Simple state management – @State properties track email input and success alert visibility
• Clean interface design – VStack layout creates a focused, single-purpose screen with proper spacing
• Email-optimized input – TextField configured with email keyboard type and disabled autocapitalization
• Smart button states – Send button is disabled when email field is empty to prevent invalid requests
• Password reset functionality – Calls authManager.forgotPassword() to send reset email through Firebase
• Success feedback – Alert confirms when reset link has been sent with personalized message
• Navigation handling – Back button and success alert both dismiss the view to return to sign-in
• User experience flow – Task wrapper handles the password reset request smoothly
• Accessibility features – Proper keyboard type and input formatting for better usability
• Clean visual hierarchy – Consistent styling matches other authentication screens in the app

This password reset view provides a streamlined experience for users who need to recover their accounts, integrating seamlessly with your Firebase authentication system.

Creating the Main Content View with Authentication Flow

The ContentView acts as your app’s traffic controller, deciding whether to show the authentication screens or the main app content based on user login status. Here’s how to implement this crucial navigation logic:

import SwiftUI

struct ContentView: View {
    @StateObject private var authManager = AuthManager()

    var body: some View {
        if authManager.isSignedIn {
            HomeView()
                .environmentObject(authManager)
        }else {
            SignInView()
                .environmentObject(authManager)
        }
    }
}

#Preview {
    ContentView()
}

import SwiftUI

struct ContentView: View {
    @StateObject private var authManager = AuthManager()

    var body: some View {
        if authManager.isSignedIn {
            HomeView()
                .environmentObject(authManager)
        }else {
            SignInView()
                .environmentObject(authManager)
        }
    }
}

#Preview {
    ContentView()
}

What’s happening here:

• Creates AuthManager – @StateObject makes a single AuthManager for the whole app
• Checks login status – Shows HomeView if signed in, SignInView if not
• Shares AuthManager – .environmentObject() lets other views use the same AuthManager
• Automatic updates – View changes when user signs in or out

This is your app’s main decision point – it decides what screen to show based on whether the user is logged in.

Basic Home Screen with Sign Out

This HomeView shows what authenticated users see, with a simple sign-out button:

import SwiftUI

struct HomeView: View {
    @EnvironmentObject var authManager: AuthManager

    var body: some View {
        Text("Hello, World!")
        
        Button {
            Task {
                 try authManager.signOut()
            }
        
        }label: {
            Text("Sign Out")
        }
    }
}

#Preview {
    HomeView()
}

import SwiftUI

struct HomeView: View {
    @EnvironmentObject var authManager: AuthManager

    var body: some View {
        Text("Hello, World!")
        
        Button {
            Task {
                 try authManager.signOut()
            }
        
        }label: {
            Text("Sign Out")
        }
    }
}

#Preview {
    HomeView()
}

What’s happening here:

• Welcome text – Shows “Hello, World!” to logged-in users
• Sign out button – Logs the user out when tapped
• Auto navigation – App goes back to sign-in screen after sign out

Simple home screen that lets users sign out and return to the login flow.

Conclusion

You’ve created a professional-grade authentication system that would typically take weeks to build from scratch. Your SwiftUI app now includes secure registration, reliable sign-in, password recovery, and persistent sessions—all leveraging Firebase’s battle-tested security infrastructure.

Now you just need to build the rest of your application

Get the Complete Code

Download the full source code on GitHub →

Frequently Asked Questions – SwiftUI Firebase Authentication

Auth domain not authorized” error – what does this mean?

In Firebase Console, go to Authentication > Settings > Authorized domains and add your development/production domains.

Can I customize the password reset email template?

Yes, in Firebase Console go to Authentication > Templates to customize email templates, including branding and content.

Do I need a paid Firebase account to use authentication?

No, Firebase Authentication is free for up to 10,000 monthly active users. The free tier includes email/password, phone, and social logins.

Why am I getting “GoogleService-Info.plist not found” error?

Ensure the .plist file is added to your Xcode project (not just the folder) and is included in your app target. Check that the bundle identifier matches your Firebase project.

How do I handle authentication state across app launches?

Firebase automatically maintains authentication state. The checkAuthStatus() method in AuthManager detects existing sessions when the app starts.

How do I implement proper password validation?

Add validation in your registration view: minimum 8 characters, mix of letters/numbers/symbols. Firebase also provides built-in password strength requirements.

Can I add social login (Google, Apple) to this setup?

Yes, you can extend the AuthManager to include social providers. You’ll need to add the respective Firebase provider dependencies and configure them in your Firebase console.

The post SwiftUI Firebase Authentication Tutorial: Complete iOS Login System appeared first on softwareanders.com.

If you’re an iOS developer looking to implement robust networking in your Swift applications, you’ve likely encountered the debate between using Apple’s native URLSession and the popular third-party Swift networking library, Alamofire. In this Alamofire tutorial, we’ll explore why Alamofire continues to dominate iOS networking in 2025 and how you can create a soild APIManager and use Alamofire best practices iOS to build better apps.

Whether you’re just starting your Alamofire iOS journey or looking to refine your existing implementation, this guide will provide you with the essential knowledge to make informed decisions about how to use Alamofire in Swift 2025 effectively.

The networking layer is often the backbone of iOS applications, connecting your users to the data and services they need. With the increasing complexity of APIs, authentication requirements, and performance expectations in 2025, choosing the right networking approach has never been more critical for your app’s success.

Why Alamofire Remains the Top Choice for Swift Networking in 2025

In the rapidly evolving world of iOS development, Alamofire has maintained its position as the premier Swift networking library for compelling reasons that become even more relevant in 2025’s development landscape.

Developer Productivity and Code Quality

Alamofire best practices iOS consistently demonstrate that developers can achieve complex networking functionality with significantly less code compared to URLSession implementations. While URLSession requires extensive boilerplate for common tasks like JSON parsing, authentication, and error handling, Alamofire provides these features through an elegant, chainable API.

The time savings are substantial. What might take 50-100 lines of URLSession code can often be accomplished in 10-15 lines with Alamofire, without sacrificing functionality or maintainability. This efficiency translates directly to faster development cycles and reduced maintenance overhead.

Maintenance and Reliability

Unlike homegrown networking solutions that require ongoing maintenance and testing, Alamofire provides proven reliability:

Setting Up Secure Token Storage

Before building our API manager, we need a way to securely store authentication tokens. iOS Keychain is perfect for this – it’s encrypted and persists across app updates and device restarts.

The KeychainHelper Foundation

import Foundation

final class KeychainHelper {
    static let standard = KeychainHelper()
    private init() {}
}

We’re using the singleton pattern – one instance handles all keychain operations throughout our app. The private initializer ensures no one can create additional instances.

Saving Data to Keychain

func save(_ data: Data, service: String, account: String) {
    let query = [
        kSecValueData: data,
        kSecClass: kSecClassGenericPassword,
        kSecAttrService: service,
        kSecAttrAccount: account,
    ] as CFDictionary
    
    let status = SecItemAdd(query, nil)
    
    if status != errSecSuccess {
        print("Error: \(status)")
    }
}

The save method creates a dictionary with keychain attributes. The service and account parameters act like a compound key – think of service as your app identifier and account as the specific data type (like “accesstoken”).

Reading Data Back

func read(service: String, account: String) -> Data? {
    let query = [
        kSecClass: kSecClassGenericPassword,
        kSecAttrService: service,
        kSecAttrAccount: account,
        kSecReturnData: true
    ] as CFDictionary
        
    var result: AnyObject?
    SecItemCopyMatching(query, &result)
    return result as? Data
}

Notice kSecReturnData: true – this tells the keychain to return the actual data, not just metadata. The &resultparameter is where the keychain stores the found data.

Updating Existing Data

func update(_ data: Data, service: String, account: String) {
    let query = [
        kSecClass: kSecClassGenericPassword,
        kSecAttrService: service,
        kSecAttrAccount: account
    ] as CFDictionary
        
    let updatedData = [kSecValueData: data] as CFDictionary
    SecItemUpdate(query, updatedData)
}

When you need to update a token (like after refresh), use SecItemUpdate instead of deleting and re-adding.

Cleanup with Delete

func delete(service: String, account: String) {
    let query = [
        kSecClass: kSecClassGenericPassword,
        kSecAttrService: service,
        kSecAttrAccount: account
    ] as CFDictionary
        
    SecItemDelete(query)
}

Perfect for logout scenarios or when tokens expire.

Why This Approach Works

• Secure: Data is encrypted by the system
• Persistent: Survives app updates and device restarts
• Simple: Clean API that hides keychain complexity
• Flexible: Service/account pattern lets you store multiple types of credentials

Now that we have secure token storage, let’s build an API manager that uses it automatically

Alamofire in Action: Essential Code Examples for Swift 2025

When building iOS apps that rely on network requests, you need an API manager that handles authentication, retries, and errors gracefully. Let’s build one step by step.

Starting with the Foundation

First, let’s create our basic API manager structure:

import Alamofire

public class APIManager {
    public static let shared = APIManager()
    
    func execute(serverUrl: String, httpBody: Data?, method: HTTPMethod = .get, parameters: Parameters? = nil, success: @escaping ((AFDataResponse<String>) -> Void), failure: @escaping ((APIError) -> Void)) {
        // Implementation coming next...
    }
}

The singleton pattern gives us a single point of access throughout our app. The execute method is our main workhorse – notice how it accepts flexible parameters and uses completion handlers for async responses.

Adding Request Setup and Validation

Now let’s implement the core request logic:

func execute(serverUrl: String, httpBody: Data?, method: HTTPMethod = .get, parameters: Parameters? = nil, success: @escaping ((AFDataResponse<String>) -> Void), failure: @escaping ((APIError) -> Void)) {
    guard let url = URL(string: serverUrl) else {
        failure(APIError.invalidURL)
        return
    }
    
    var request = URLRequest(url: url)
    request.httpMethod = method.rawValue
    request.setValue("application/json", forHTTPHeaderField: "Content-Type")
    request.httpBody = httpBody
    request.timeoutInterval = 30
    
    AF.request(request, interceptor: Interceptor()).validate().responseString { response in
        switch response.result {
        case .success:
            success(response)
        case .failure(let error):
            let apiError = APIError.httpError(
                statusCode: response.response?.statusCode ?? 0,
                message: error.localizedDescription
            )
            failure(apiError)
        }
    }
}

Key points: URL validation happens first, we set standard JSON headers, and notice the interceptor: Interceptor()parameter – that’s where the magic happens.

Automatic Authentication with Interceptors

Alamofire’s RequestInterceptor protocol lets us modify requests automatically:

final class Interceptor: RequestInterceptor {
    func adapt(_ urlRequest: URLRequest, for session: Session, completion: @escaping (Result<URLRequest, Error>) -> Void) {
        var urlRequestToUse = urlRequest
        
        if let accessToken = KeychainHelper.standard.read(service: "accesstoken", account: "madplan"),
           let tokenString = String(data: accessToken, encoding: .utf8) {
            let cleanToken = tokenString.replacingOccurrences(of: "\"", with: "")
            urlRequestToUse.setValue("Bearer \(cleanToken)", forHTTPHeaderField: "Authorization")
        }
        
        completion(.success(urlRequestToUse))
    }
}

Every request automatically gets the Bearer token added – no need to remember to add authentication headers manually.

Smart Retry Logic

The retry mechanism is where this API manager really shines:

func retry(_ request: Request, for session: Session, dueTo error: Error, completion: @escaping (RetryResult) -> Void) {
    let requestKey = "\(request.id)"
    
    Task {
        let currentAttempts = await attemptTracker.getAttempts(for: requestKey)
        
        if currentAttempts >= 3 {
            await attemptTracker.removeAttempts(for: requestKey)
            completion(.doNotRetry)
            return
        }
        
        if let response = request.task?.response as? HTTPURLResponse {
            switch response.statusCode {
            case 400...499:
                // Client errors - don't retry
                completion(.doNotRetryWithError(error))
            case 500...599:
                // Server errors - retry after delay
                await attemptTracker.incrementAttempts(for: requestKey)
                completion(.retryWithDelay(3))
            default:
                break
            }
        }
        
        await attemptTracker.incrementAttempts(for: requestKey)
        completion(.retryWithDelay(3))
    }
}

The logic is smart: client errors (4xx) don’t get retried because they’re usually permanent, but server errors (5xx) do get retried since servers can recover.

Thread-Safe Attempt Tracking

To track retries safely across concurrent requests, we use an actor:

actor RequestAttemptTracker {
    private var attempts: [String: Int] = [:]
    
    func getAttempts(for key: String) -> Int {
        attempts[key] ?? 0
    }
    
    func incrementAttempts(for key: String) {
        let current = attempts[key] ?? 0
        attempts[key] = current + 1
    }
    
    func removeAttempts(for key: String) {
        attempts.removeValue(forKey: key)
    }
}

The actor keyword ensures thread-safe access to our attempts dictionary – crucial for handling multiple concurrent network requests.

Structured Error Handling

Finally, define clear error types:

enum APIError: Error {
    case invalidURL
    case networkError(String)
    case httpError(statusCode: Int, message: String)
    case decodingError
    case noData
    case unauthorized
}

Using Your API Manager

With everything in place, making requests is simple – we will just update the standard ContentView to display the data raw without any parsing:

import SwiftUI

struct ContentView: View {
    @State private var message = "Hello, world!"
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text(message)
            
            Button("Fetch Data") {
                fetchData()
            }
        }
        .padding()
    }
    
    private func fetchData() {
        APIManager.shared.execute(
            serverUrl: "https://jsonplaceholder.typicode.com/posts",
            httpBody: nil,
            success: { response in
                DispatchQueue.main.async {
                    self.message = response.value ?? "No data"
                }
            },
            failure: { error in
                DispatchQueue.main.async {
                    self.message = "Error occurred"
                }
            }
        )
    }
}
)

That code will produce something like this:

Cost-Benefit Analysis

While adding any external dependency requires consideration, the benefits of Alamofire far outweigh the costs:

Conclusion: Embracing Alamofire for Modern iOS Development

Understanding how to use Alamofire in Swift 2025 is about more than just making HTTP requests—it’s about building a robust, maintainable networking foundation that can evolve with your application’s needs. The Alamofire best practices iOS we’ve discussed demonstrate why this Swift networking library continues to be the preferred choice for professional iOS development.

Whether you’re building a simple app with basic API integration or a complex enterprise application with sophisticated networking requirements, implementing an Alamofire iOS tutorial approach will serve your project well. The investment in learning Alamofire’s patterns and capabilities pays dividends throughout your application’s lifecycle, enabling you to focus on building great features rather than wrestling with networking complexity.

Get the Complete Code

Download the full source code on GitHub →

The post Alamofire Swift Tutorial: Build Robust iOS Networking with Less Code appeared first on softwareanders.com.

Building secure iOS authentication for your SwiftUI apps just got easier. This SwiftUI Supabase tutorial shows you how to implement a complete login system using Supabase Auth—the open-source Firebase alternative that’s transforming mobile app development in 2025.

Whether you’re building your first iOS app authentication system or migrating from Firebase, this Supabase Swift integration guide provides everything you need. You’ll learn to create secure sign-in, registration, and session management with clean, production-ready SwiftUI code.

Unlike basic authentication guides, we’ll build a complete system with proper error handling, input validation, and real-world best practices that you can deploy immediately.

What You’ll Learn

By the end of this tutorial, you’ll have a fully functional authentication system that includes:

• User registration with email verification
• Secure sign-in functionality
• Password reset capabilities
• Session management
• Error handling and user feedback
• Clean, reusable SwiftUI components

Prerequisites

Before we dive in, make sure you have:

• Xcode 14+ installed
• Basic knowledge of SwiftUI
• A Supabase account (free tier available)
• iOS 15+ as your deployment target

Setting Up Your Supabase Project

First, let’s set up the backend infrastructure:

1. Create a Supabase Project

1. Visit supabase.com and create a new account
2. Click “New Project” and fill in your project details
3. Wait for your database to initialize (usually takes 2-3 minutes)
4. Find your API URL which can be found in Project Settings -> Data API 
5. Find your API KEY which also can be found in Project Settings -> API KEYS

2. Configure Authentication Settings

To simplify this tutorial we are going to disable “Confirm email” – when you go to production, it’s good practice to keep this enabled and set it up correctly. But this tutorial is focused on implementing Supabase inside a iOS application:

1. Go to Authentication > Sign In / Providers
2. Click on Email
3. Disable Confirm email

iOS Project Setup with Supabase

Before we can do anything we need to create a new App, so open Xcode and create a new iOS project with SwiftUI interface.

Implement Supabase

Now it’s time to add Supabase to our project. Luckily this is pretty straightforward and Supabase have created an excellent package we will use.

In Xcode, go to File → Add Package Dependencies and add:

https://github.com/supabase/supabase-swift

Then just add the packages to your project.

Create Supabase service

This Swift code creates a singleton service class that manages the Supabase client connection for your iOS app.

The SupabaseService class acts as a central hub for all Supabase operations, ensuring there’s only one client instance throughout your app’s lifecycle.

This approach provides better resource management and consistency when handling authentication, database queries, and other Supabase features.

import Supabase
import Foundation

class SupabaseService {
    static let shared = SupabaseService()
    
    let client: SupabaseClient
    
    private init() {
        // Replace with your actual Supabase credentials
        guard let url = URL(string: "**ENTER YOUR SUPABASE URL**") else {
            fatalError("Invalid Supabase URL")
        }
        
        self.client = SupabaseClient(
            supabaseURL: url,
            supabaseKey: "**ENTER YOUR SUPABASE API KEY**"
        )
    }
}

• static let shared = SupabaseService() – Singleton pattern for app-wide access
• let client: SupabaseClient – The main Supabase client instance
• private init() – Prevents external instantiation, enforcing singleton pattern

The initializer:

1. Creates a URL from the Supabase project URL string
2. Uses guard let to safely unwrap the URL or crash with fatalError
3. Initializes the SupabaseClient with the project URL and anonymous API key

This service acts as a centralized access point for Supabase operations throughout the app. Other classes (like AuthManager) can access the client via SupabaseService.shared.client.

Using Supabase in AuthManager

Now it’s time to create a AuthManager to use our Supabase service and then create the rest of the functions.

As an ObservableObject, it manages authentication state and automatically updates the UI when that state changes.

The class provides a complete authentication system including sign-in, registration, sign-out, and password reset functionality.

import Foundation
import Auth

class AuthManager: ObservableObject {
    @Published var isSignedIn: Bool = false
    @Published var currentUser: User?
    
    private let supabase = SupabaseService.shared.client
    
    init() {
        Task {
            await checkAuthStatus()
        }
    }
    
    @MainActor
    func checkAuthStatus() async {
        do {
            let session = try await supabase.auth.session
            let user = session.user
            self.currentUser = user
            self.isSignedIn = true
        } catch {
            print("No active session: \(error)")
            self.isSignedIn = false
            self.currentUser = nil
        }
    }
    
    func resetPassword(email: String) async throws {
        try await supabase.auth.resetPasswordForEmail(email)
    }
    
    func signOut() async {
        do {
            try await supabase.auth.signOut()
            self.currentUser = nil
            self.isSignedIn = false
        } catch {
            print("Sign out error: \(error)")
        }
    }
    
    func signIn(email: String, password: String) async throws {
        let response = try await supabase.auth.signIn(
            email: email,
            password: password
        )
        
        self.currentUser = response.user
        self.isSignedIn = true
    }
    
    @MainActor
    func register(email: String, password: String) async throws {
        let response = try await supabase.auth.signUp(
            email: email,
            password: password
        )
        
        self.currentUser = response.user
        self.isSignedIn = true
    }
}

• ObservableObject protocol enables SwiftUI reactivity
• @Published var isSignedIn: Bool – Tracks authentication state
• @Published var currentUser: User? – Stores current user data
• private let supabase – Reference to the shared Supabase client

The init() method automatically calls checkAuthStatus() to verify if a user session exists when the app starts. The @MainActor decorator ensures UI updates happen on the main thread.

checkAuthStatus() – Retrieves existing session and updates authentication state 

signIn() – Authenticates user with email/password and updates state 

register() – Creates new user account and signs them in 

signOut() – Ends current session and resets authentication state 

resetPassword() – Sends password reset email via Supabase

Methods use async throws for proper error propagation, while sign-out includes internal error handling to prevent app crashes. The @MainActor decorators ensure UI-affecting operations run on the main thread.

Create AUTH flow and SwiftUI Views

The flow in our app will be: Open the app, the app checks if the user is logged in or not. If the user is logged in to user will see the HomeView and if not logged in the user will see the SignInView. On the SignInView there will be a button that leads the user to RegisterView.

In order for us to create the flow above, we need a class that knows if the user is logged in or not – we already made that and it’s called AuthManager, now it’s time to create the views we need and use the AuthManager

Building the views

Next up we are going to create the views for the app. We will have four views: ContentView, HomeView, RegisterView and SignInView.

Pro tip: Create a folder called Views and place your views inside the folder.

SignInView.swift

This SwiftUI code creates a sign-in screen for Supabase authentication. Here’s the breakdown:

import SwiftUI

struct SignInView: View {
    @EnvironmentObject var authManager: AuthManager
    @State private var email: String = ""
    @State private var password: String = ""
    
    var body: some View {
        NavigationStack {
            
        
        VStack(spacing: 40) {
            Text("Supabase AUTH tutorial")
                .font(.title)
                .bold()
            
            
            VStack(alignment: .leading, spacing: 20) {
                VStack(alignment: .leading, spacing: 3) {
                    Text("Enter your email below:")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                    TextField("Enter your email", text: $email)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
              
                VStack(alignment: .leading, spacing: 3) {
                    Text("Enter your password below:")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                    SecureField("Enter your password", text: $password)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
                    
            }
            
            VStackLayout(spacing: 10) {
                Button(action: {
                    Task {
                        do {
                            try await authManager.signIn(email: email, password: password)
                        } catch {
                            print("Login failed: \(error.localizedDescription)")
                        }
                    }
                }) {
                    Text("Login using Supabase")
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(8)
                }
                
                NavigationLink(destination:
                                RegisterView()
                                    .environmentObject(authManager)
                ) {
                    Text("Register")
                        .font(.subheadline)
                }
                
            }
        }
        .padding()
        }
    }
}

#Preview {
    SignInView()
}

Key Components

• @EnvironmentObject var authManager: AuthManager – Shared authentication manager
• @State variables for email and password input
• NavigationStack for screen navigation

The layout uses nested VStack containers with:

• Title text
• Email TextField and password SecureField with labels
• Login button that calls authManager.signIn() in an async Task
• NavigationLink to the registration screen

When “Login using Supabase” is tapped:

1. Creates async task
2. Calls authManager.signIn(email:password:)
3. Handles errors with do-catch

RegisterView.swift

This code creates a registration screen with great user experience including loading states, error handling, and user feedback alerts:

import SwiftUI

struct RegisterView: View {
    @EnvironmentObject var authManager: AuthManager

    @State private var email: String = ""
    @State private var password: String = ""
    @State private var confirmPassword: String = ""
    @State private var isLoading = false
    @State private var showError = false
    @State private var errorMessage: String = ""
    
    var body: some View {
        VStack(spacing: 40) {
            Text("Register to Supabase")
                .font(.title)
                .bold()
            
            
            VStack(alignment: .leading, spacing: 20) {
                VStack(alignment: .leading) {
                    Text("Enter email below:")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                    TextField("Enter email", text: $email)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
              
                VStack(alignment: .leading) {
                    Text("Enter password below:")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                    SecureField("Enter password", text: $password)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    SecureField("Re-enter password", text: $confirmPassword)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
                    
            }
            Button(action: {
                Task {
                    do {
                        isLoading = true
                        try await authManager.register(email: email, password: password)
                        isLoading = false
                    }catch {
                        isLoading = false
                        errorMessage = error.localizedDescription
                        print("Registration failed: \(error.localizedDescription)")
                        showError = true
                    }
                }
            }) {
                HStack {
                    if isLoading {
                        ProgressView()
                            .progressViewStyle(CircularProgressViewStyle(tint: .white))
                            .scaleEffect(0.8)
                    } else {
                        Text("Signup using Supabase")
                    }
                }
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.blue)
                    .cornerRadius(8)
            }
        }
        .alert("Registration failed!", isPresented: $showError) {
            Button("OK") {
                showError = false
            }
        } message: {
            Text("\(errorMessage)")
        }
        .padding()
    }
}

#Preview {
    RegisterView()
}

• @EnvironmentObject var authManager: AuthManager – Shared authentication manager
• @State variables for email, password, and confirmPassword input
• @State private var isLoading: Bool – Loading state for button
• @State private var showError: Bool – Error alert trigger
• @State private var errorMessage: String – Stores error details for display

The layout uses VStack containers with:

• “Register to Supabase” title
• Email TextField with label
• Two password SecureField inputs (password and confirmation) with labels
• Smart signup button that shows loading indicator or text
• Error alert dialog for registration failures

The signup button now includes full implementation:

1. Loading State: The signup button shows a ProgressView spinner during registration and displays appropriate text or loading indicator.
2. Error Handling: Comprehensive error management that captures error messages and displays them in user-friendly alerts.
3. Visual Feedback: Loading spinner provides immediate feedback that the registration process is active.

HomeView.swift

This SwiftUI code creates a simple home screen shown after successful authentication. Here’s the breakdown:

import SwiftUI

struct HomeView: View {
    @EnvironmentObject var authManager: AuthManager

    var body: some View {
        Text("Hello, World!")
        
        Button {
            Task {
                await authManager.signOut()
            }
        
        }label: {
            Text("Sign Out")
        }
    }
}

#Preview {
    HomeView()
}

• @EnvironmentObject var authManager: AuthManager – Shared authentication manager
• Basic UI with placeholder content and sign-out button

The layout contains:

• Sign-out button with complete logout functionality

The sign-out button now includes full implementation:

1. Creates an async Task
2. Calls authManager.signOut() to end the user session
3. The AuthManager handles the logout process and automatically updates authentication state
4. SwiftUI reactively switches back to the sign-in screen when isSignedIn becomes false

ContentView.swift

This SwiftUI code creates the main app controller that manages authentication state. Here’s the breakdown:

import SwiftUI
struct ContentView: View {
    @StateObject private var authManager = AuthManager()
    
    var body: some View {
        if authManager.isSignedIn {
            HomeView()
                .environmentObject(authManager)
        }else {
            SignInView()
                .environmentObject(authManager)
        }
    }
}
#Preview {
    ContentView()
}

• @StateObject private var authManager = AuthManager() – Creates and owns the authentication manager instance
• Conditional view rendering based on authentication state

The view uses a simple if-else statement to determine which screen to show:

• If signed in: Shows HomeView()
• If not signed in: Shows SignInView()

Both views receive the authManager as an environment object using .environmentObject(authManager).

This acts as the root view that automatically switches between the authentication flow and the main app content based on the user’s login status.

When authManager.isSignedIn changes, SwiftUI automatically updates the displayed view.

ForgotPasswordView.swift

The following code creates a password reset screen with enhanced user experience features including loading states, success feedback, and proper form validation.

import SwiftUI

struct ForgotPasswordView: View {
    @EnvironmentObject var authManager: AuthManager
    @State private var email: String = ""
    @State private var isLoading = false
    @State private var showSuccess = false
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 40) {
                Text("Forgot Password")
                    .font(.title)
                    .bold()
                
                VStack(alignment: .leading, spacing: 20) {
                    VStack(alignment: .leading, spacing: 3) {
                        Text("Enter your email below:")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                        TextField("Enter your email", text: $email)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                            .keyboardType(.emailAddress)
                            .autocapitalization(.none)
                    }
                }
                
                VStackLayout(spacing: 10) {
                    Button(action: {
                        Task {
                            isLoading = true
                            try? await authManager.resetPassword(email: email)
                            showSuccess = true
                            isLoading = false
                        }
                    }) {
                        HStack {
                            if isLoading {
                                ProgressView()
                                    .progressViewStyle(CircularProgressViewStyle(tint: .white))
                                    .scaleEffect(0.8)
                            } else {
                                Text("Send Reset Link")
                            }
                        }
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(8)
                    }
                    .disabled(email.isEmpty || isLoading)
                    
                    Button("Back to Sign In") {
                        dismiss()
                    }
                    .font(.subheadline)
                }
            }
            .padding()
            .alert("Reset Link Sent!", isPresented: $showSuccess) {
                Button("OK") {
                    dismiss()
                }
            } message: {
                Text("We've sent a password reset link to \(email). Please check your inbox.")
            }
        }
    }
}

#Preview {
    ForgotPasswordView()
}

• @EnvironmentObject var authManager: AuthManager – Shared authentication manager
• @State private var email: String – Email input field
• @State private var isLoading: Bool – Loading state for button
• @State private var showSuccess: Bool – Success alert trigger
• @Environment(\.dismiss) – SwiftUI environment value to dismiss the view

The layout includes:

• “Forgot Password” title
• Email input field with proper keyboard type and capitalization settings
• Smart reset button that shows loading indicator or text
• “Back to Sign In” button for navigation
• Success alert dialog

Loading State: The reset button shows a ProgressView spinner while processing and is disabled during the operation.

Form Validation: The button is disabled when the email field is empty or during loading.

Success Feedback: An alert appears when the reset email is sent, providing clear user confirmation.

Keyboard Optimization: Email field uses .emailAddress keyboard type and disables auto-capitalization.

Conclusion

All done! You’ve built a complete, production-ready authentication system with SwiftUI and Supabase that includes secure registration, sign-in, password reset, and session management.

Get the Complete Code

Download the full source code on GitHub →

What will you build next? This authentication foundation is ready for any iOS app idea – from social platforms to productivity tools. Share your projects in the comments!

The post SwiftUI Supabase Authentication: Complete Tutorial appeared first on softwareanders.com.

In this comprehensive SwiftUI tutorial for iOS developers, we’ll build a fully functional todo application using SwiftUI for iOS development and Supabase as our open-source backend service. By the end of this step-by-step guide, you’ll have created a production-ready iOS app with real-time database synchronization and complete CRUD operations.

We’ll start by creating the complete iOS application using the MVVM architecture pattern, and once our SwiftUI app is running smoothly, we’ll integrate the powerful Supabase backend for data persistence and real-time updates.

You can download the complete project here: Go to Github

What You’ll Build in This SwiftUI Todo App Tutorial

By following this step-by-step SwiftUI tutorial, you’ll create:

• Complete CRUD operations – Create, read, update, and delete todos with SwiftUI and Supabase integration
• Real-time data synchronization – Instant updates across all devices using Supabase’s PostgreSQL database
• Modern iOS interface – Clean, intuitive SwiftUI design following Apple’s Human Interface Guidelines

Understanding MVVM Architecture for SwiftUI App Development

Before diving into our SwiftUI todo app code, let’s understand the Model-View-ViewModel (MVVM) architectural pattern we’ll be implementing throughout this iOS development tutorial.

What is MVVM in iOS Development?

MVVM is a proven architectural pattern that organizes your SwiftUI application into three distinct, maintainable layers:

• Model Layer: Represents your data structures and business logic (Todo entities, User models, and core app data)
• View Layer: The SwiftUI views and UI components that users interact with (TodoListView, AuthView, custom SwiftUI components)
• ViewModel Layer: The crucial bridge between Model and View, managing business logic, state management, and data flow

Why Use MVVM Architecture with SwiftUI?

SwiftUI and MVVM create a powerful combination for iOS app development because:

• Enhanced Reusability: ViewModels can be shared across multiple SwiftUI views, reducing code duplication
• Reactive UI Updates: ViewModels leverage @Published properties and ObservableObject protocol for automatic UI updates
• Clean Separation of Concerns: Business logic remains separate from SwiftUI views, creating more maintainable and readable code
• Superior Testability: Unit test ViewModels independently without UI dependencies, improving code quality and reliability

This MVVM approach will make our Supabase integration cleaner and our SwiftUI todo app more scalable as we add real-time database functionality.

MVVM Flow in Our Todo App

User Interaction → View → ViewModel → Service/API → Database
                    ↑                      ↓
                    ← ← ← ← ← ← ← ← ← ← ← ← 

1. User taps a button in the View
2. View calls a method on the ViewModel
3. ViewModel processes the request and calls the Service
4. Service makes API calls to Supabase
5. Data flows back through the chain, updating the UI reactively

Essential MVVM Classes for Our SwiftUI Todo App

Our SwiftUI Supabase tutorial will focus on building these core architectural components:

• TodoViewModel: Manages todo list state, handles CRUD operations, and processes real-time database updates from Supabase
• SupabaseService: Our dedicated service layer that handles all API communication with the Supabase backend

Let’s start by building the data models that form the foundation of our iOS app’s architecture, then we’ll implement these ViewModels as they contain the core business logic for our SwiftUI application!

Building Data Models for SwiftUI MVVM Architecture

Before we dive into ViewModels, let’s establish the foundation – our Data Models. In MVVM architecture for iOS development, models are clean data structures that represent the core entities in your SwiftUI application.

Best Practices for SwiftUI Data Models

A well-designed model for iOS app development should be:

• Simple and Clean: Contains only data properties, avoiding complex business logic that belongs in ViewModels
• Identifiable Protocol: Each model instance must be uniquely identifiable for SwiftUI’s list rendering and state management
• Equatable Protocol: Enables SwiftUI’s diffing algorithm to efficiently update the UI when underlying data changes
• Codable Ready: Structured for seamless JSON encoding/decoding with Supabase API responses

These model design principles ensure optimal performance in our SwiftUI todo app and smooth integration with Supabase’s PostgreSQL database.

Our Todo Model

Right click on the Models folder and add a new swift class and write the following code:

import Foundation

struct TodoItemModel: Identifiable, Equatable {
    let id = UUID()
    var title: String
    var isCompleted: Bool = false
}

Let’s break this down:

• struct: We use a struct because models are typically value types – simple data containers
• Identifiable: This protocol requires an id property, allowing SwiftUI to track individual todos in lists
• Equatable: This lets SwiftUI compare todos efficiently and only update the UI when something actually changes
• let id = UUID(): Each todo gets a unique identifier automatically
• var title & var isCompleted: The actual data we care about – these can change over time

This model is intentionally simple – it focuses purely on representing data, leaving all the business logic (like saving, loading, updating) to the ViewModel. This separation makes our code clean, testable, and easy to understand.

Create the ViewModel for the todos

Before we create a new class we first need to bring some order to our project – so let’s start by creating a Group/Folder called Viewmodels. Inside this folder we create our ToDo viewmodel and call it TodoListViewmodel – then our project structure will look like this:

Inside our viewmodel we will create our business logic – in our case – it will be 3 functions: createToDo(), deleteToDo() and toggleCompletion(). In addition to the 3 functions we will also have an array that holds the todos that we will be displaying in the application.

Inside our TodoListViewmodel class we will start by an empty observable class:

import Foundation

class TodoListViewmodel: ObservableObject {
}

Now our viewmodel conforms to ObservableObject, which is SwiftUI’s protocol for reactive data binding.

The next thing we are going to create is an array that conforms to our ToDoModel.swift, and create a init method that appends three todos to our array – an init method is a special function that sets up and initializes a new instance of a class or struct when it’s created.

import Foundation

class TodoListViewmodel: ObservableObject {
  @Published var todos: [TodoItemModel] = []
    
      init() {
        self.todos.append(TodoItemModel(title: "Buy groceries"))
        self.todos.append(TodoItemModel(title: "Finish project"))
        self.todos.append(TodoItemModel(title: "Call mom"))
    }
}

When properties marked with @Published inside this class change, any SwiftUI views that observe this ViewModel will automatically update their UI – this is the magic that makes our todo list refresh in real-time when we add, edit, or delete items.

So far so good – now we need our functions to: Create and Delete.

Create a new Todo

Our createTodo() function is going to be pretty straightforward – the function will take a title for the todo as a parameter and then create a new TodoItemModel and then add that todo to the list of todos:

func addTodo(title: String) {
  let newTodo = TodoItemModel(title: title)
  todos.append(newTodo)
}