In this article, we will create an iOS app which is integrated with Supabase backend for authentication. We will use SwiftUI to create the app&amp;#x27;s UI. The full source code for this project can be found here.

&amp;#x5C;
The tutorial will be divided into following sections:


1. Setting up Supabase Project (install Supabase iOS SDK)
2. Designing the UI of the app using SwiftUI (Login, Registration, Home screens)
3. Registration with Supabase authentication &amp;#x2F; saving user data in database
4. Login with Supabase auth &amp;#x2F; retrieving user data from database

&amp;#x5C;
# 1.Setting up Supabase Project (install Supabase iOS SDK)

Getting started with Supabase is extremely easily as compared to AWS or even Firebase. Simply head over to [Supabase.io](http:&amp;#x2F;&amp;#x2F;Supabase.io) and sign up using Github. That&amp;#x27;s it. You will see your Supabase console
as well as all the private keys, and URLs you will need for your project.
To install Supabase iOS SDK, follow these three easy steps:


1. Open Xcode and create your project
2. then, Go to File -&amp;gt; Add Packages
3. Enter this URL: &amp;lt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;supabase&amp;#x2F;supabase-swift.git&amp;gt; and install Supabase package

&amp;#x5C;
# 2. Designing the UI of the app using SwiftUI

Now lets set up the UI. The UI for this project is extremely simple. We will have three SwiftUI files


1. ContentView where we will implement Sign Up view
2. SignIn view
3. HomeView

&amp;#x5C;
This is the UI for &amp;#96;ContentView&amp;#96;:

&amp;#96;&amp;#96;&amp;#96;javascript
struct ContentView: View {
    @State var email: String = &amp;quot;&amp;quot;
    @State var password: String = &amp;quot;&amp;quot;
    @State var name: String = &amp;quot;&amp;quot;

    @State var presentHomeView: Bool = false
    @State var user = User()
NavigationView {
           ZStack {
               VStack(spacing: 20) {
                   Text(&amp;quot;Sign Up&amp;quot;)
                       .font(.largeTitle)
                       .bold()
                       .padding(.bottom, 24)
                   TextField(&amp;quot;Name&amp;quot;, text: $name)
                   TextField(&amp;quot;Email&amp;quot;, text: $email)
                   SecureField(&amp;quot;Password&amp;quot;, text: $password)
                   Button {
                       self.signUp(email: self.email, password: self.password, name: self.name)
                   } label: {

                       Text(&amp;quot;Sign Up&amp;quot;)
                           .padding()
                           .background(Color.blue.opacity(0.3))
                           .cornerRadius(5)
                   }.padding(.top, 20)


                   HStack {
                       Text(&amp;quot;Already Registered&amp;quot;)
                       NavigationLink(&amp;quot;Log In&amp;quot;, destination: SignInView())
                   }


               Spacer()
               }
               .padding(.horizontal)
               .padding(.top, 64)

           }.fullScreenCover(isPresented: self.$presentHomeView) {
               HomeView(user: self.$user)
           }

       }
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
This will be the &amp;#96;SignInView&amp;#96;:

&amp;#96;&amp;#96;&amp;#96;javascript
struct SignInView: View {
    @State var presentHomeView: Bool = false
    @State var email = &amp;quot;&amp;quot;
    @State var password = &amp;quot;&amp;quot;
    @State var user = User()
var body: some View {
       ZStack {
           VStack(spacing: 20) {
               Text(&amp;quot;Log In&amp;quot;)
                   .font(.largeTitle)
                   .bold()
                   .padding(.bottom, 24)
               TextField(&amp;quot;Email&amp;quot;, text: $email)
               SecureField(&amp;quot;Password&amp;quot;, text: $password)
               Button {
                    self.signIn(email: self.email, password: self.password)
               } label: {

                   Text(&amp;quot;Log In&amp;quot;)
                       .padding()
                       .background(Color.blue.opacity(0.3))
                       .cornerRadius(5)
               }.padding(.top, 20)
           Spacer()
           }
           .padding(.horizontal)
           .padding(.top, 64)

       }
       .fullScreenCover(isPresented: self.$presentHomeView) {
           HomeView(user: $user)
       }
   }
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
This is the code for &amp;#96;HomeView&amp;#96;:

&amp;#96;&amp;#96;&amp;#96;javascript
struct HomeView: View {
    @Environment(&amp;#x5C;.presentationMode) var presentationMode
    @Binding var user: User

    var body: some View {
        VStack {
            Text(&amp;quot;Hello,&amp;#x5C;(user.name ?? &amp;quot;&amp;quot;)&amp;quot;)
            Button {
                self.signOut()
            } label: {

                Text(&amp;quot;Sign Out&amp;quot;)
                    .padding()
                    .background(Color.blue.opacity(0.3))
                    .cornerRadius(5)
            }.padding(.top, 20)
        }
    }
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
Please add &amp;#96;import Supabase&amp;#96; in all three files.

# 3. Registration with Supabase auth:

Whenever we need to call supabase - during our authentication procedures or when we are accessing database, we will first create a Supabase client object that requires two items both of which we can get from the Supabase console.

So to make it easier for ourselves, create a new swift file and name it API. Create a class API and add the following code:

&amp;#x5C;
&amp;#96;&amp;#96;&amp;#96;javascript
import Foundation
import Supabase
class API {
    static var supabaseServiceKey = &amp;quot;get the key from Supabase console&amp;quot;
    static var supabaseURL = &amp;quot;get the URL from Supabase console&amp;quot;

    static var supabase = SupabaseClient(supabaseUrl: API.supabaseURL, supabaseKey: API.supabaseServiceKey)
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
You can get these URL and keys by heading over to &amp;quot;API&amp;quot; section in Supabase console and copying the following keys: Supabase URL and Service Key. Now whenever we need to use the supabase client, we can just call do &amp;#96;API.supabase&amp;#96;.

&amp;#x5C;
Now let&amp;#x27;s go ahead and implement the logic for signing up users. First create a simple User struct:

&amp;#96;&amp;#96;&amp;#96;javascript
struct User: Codable {
    var id: Int?
    var userID : String?
    var name: String?
    var email: String?
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
Create a new function - we will call it &amp;#96;signUp&amp;#96; and it will take &amp;#96;email&amp;#96;, &amp;#96;password&amp;#96; and &amp;#96;name&amp;#96; string:

&amp;#96;&amp;#96;&amp;#96;javascript
func signUp(email: String, password: String, name: String) {
    API.supabase.auth.signUp(email: email, password: password) { result in
        switch result {
        case let .success(session):
            print(session)
            guard let safeUser = session.user else { return }
            let user = User(userID: safeUser.id,name: name,email: safeUser.email)
            self.user = user
            self.addUserToDatabase(user: user)
            self.presentHomeView = true
            self.email = &amp;quot;&amp;quot;
            self.password = &amp;quot;&amp;quot;
        case let .failure(error):
            print(error.localizedDescription)
        }
    }
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
Here we are calling the &amp;#96;API.supabase.auth.signUp&amp;#96; method and passing in the &amp;#96;email&amp;#96; and &amp;#96;password&amp;#96;. If the sign up is successful, we will get &amp;#96;result&amp;#96; which contains the newly created user information. This information will contain user&amp;#x27;s email, and &amp;#96;userID&amp;#96;. This is what we will user to query the user in the database later on. We will create a simple &amp;#96;user&amp;#96; object and we will construct the object by passing in the &amp;#96;userID&amp;#96; (which we get from the &amp;#96;result&amp;#96; object), email and name. We will then pass it to the &amp;#96;@State user&amp;#96; property of type &amp;#96;User&amp;#96;. Then we will pass this &amp;#96;user&amp;#96; object to a subroutine call &amp;#96;addUserToDatabase&amp;#96;. Let&amp;#x27;s implement this subroutine next:

&amp;#x5C;
&amp;#96;&amp;#96;&amp;#96;javascript
func addUserToDatabase(user: User) {
    do {
        let jsonData: Data = try JSONEncoder().encode(user)

        API.supabase.database.from(&amp;quot;User&amp;quot;).insert(values: jsonData).execute { result in
            switch result {
            case let .success(response):
                print(response)
                print(&amp;quot;Success&amp;quot;)
            case let .failure(error):
                print(error.localizedDescription)
            }
        }

    } catch {
        print(error.localizedDescription)
    }
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
In this subroutine, we will first encode the &amp;#96;user&amp;#96; object to &amp;#96;jsonData&amp;#96;. Then we will use the same SupabaseClient object and this time use Supabase database. You can easily create a new table in your Supabase console, here is how:


1. Head over to &amp;#96;Table Editor&amp;#96; (situated on the left side panel)
2. Click on &amp;#96;New table&amp;#96;
3. Give the new table a name (we named our table as &amp;quot;User&amp;quot;), and add columns. Keep id as it is, and add other columns - (we will add userID of type text&amp;#x2F;string, name of type text&amp;#x2F;string and email of type text&amp;#x2F;string).

&amp;#x5C;
Going back to the code, we are basically saying to the database, to insert the jsonData in the &amp;quot;User&amp;quot; table. That&amp;#x27;s it, so now when a user signs up, we are also storing the new user&amp;#x27;s details in database.

# 4. Log In using Supabase:

Create the following subroutine in &amp;#96;SignInView&amp;#96;:

&amp;#96;&amp;#96;&amp;#96;javascript
func signIn(email: String, password: String) {
        API.supabase.auth.signIn(email: email, password: password) { result in
            switch result {
            case let .success(session):
                print(session)
                guard let safeUser = session.user else { return }
                self.fetchUserDetails(userID: safeUser.id) { user in
                    self.user = user
                    self.presentHomeView = true
                }

                self.email = &amp;quot;&amp;quot;
                self.password = &amp;quot;&amp;quot;
            case let .failure(error):
                print(error.localizedDescription)
            }
        }
    }
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
We are pretty much just using the &amp;#96;signIn&amp;#96; method provided to us by the supabase SDK and using the &amp;#96;email&amp;#96; and &amp;#96;password&amp;#96; which we will get from the user. If the log in is successful, we will grab the &amp;#96;userID&amp;#96; from the result and pass it to &amp;#96;fetchUserDetails&amp;#96; subroutine. In this subroutine we will fetch all the data of the user from the database and create the User object. Here is how:

&amp;#96;&amp;#96;&amp;#96;javascript
func fetchUserDetails(userID: String, completion: @escaping (_ user: User) -&amp;gt; ())  {
        API.supabase.database.from(&amp;quot;User&amp;quot;).select().eq(column: &amp;quot;userID&amp;quot;, value: userID).execute { result in
            switch result {
            case let .success(response):
                print(response)
                    do {
                        let user = try response.decoded(to: [User].self)
                        completion(user[0])
                        print(user[0])
                    } catch {
                        print(String(describing: error))
                    }
            case let .failure(error):
                print(error.localizedDescription)
            }
        }
    }
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
So this time we are querying the database and saying to retrieve the entire row in the &amp;quot;User&amp;quot; table for &amp;quot;UserID&amp;quot; that matches the userID we passed to the subroutine. The response we will get from this is JSON data. We will decode it to a &amp;#96;User&amp;#96; array. However, we know that there will be just one item in that array so we can easily grab the first element from the array and pass it to the completion handler.

&amp;#x5C;
Back in &amp;#96;signIn&amp;#96; routine, we are calling the &amp;#96;fetchUserDetails&amp;#96; subroutine which gives us the &amp;#96;user&amp;#96; item, which we assign to &amp;#96;@state user&amp;#96; property and also toggle the boolean to show the &amp;#96;HomeView&amp;#96; modally (fullScreenCover). The HomeView takes in the user object.

# 5. HomeView and SignOut:

So now we have the last view, the &amp;#96;HomeView&amp;#96;. The &amp;#96;HomeView&amp;#96; will grab this &amp;#96;User&amp;#96; object and show the name of the user. We will also add a SignOut button, which when pressed invokes the following subroutine:

&amp;#96;&amp;#96;&amp;#96;javascript
func signOut(){
     API.supabase.auth.signOut { result in
         print(&amp;quot;Signed Out&amp;quot;)
         presentationMode.wrappedValue.dismiss()
     }
 }
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;


How to Build a SwiftUI App and Integrate It with Supabase

About

Legal

Products

Resources

Category: