Back to Supabase

Use Supabase with iOS and SwiftUI

apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx

1.26.083.8 KB
Original Source
<AiPrompt id="ios-swiftui" />

<$Partial path="quickstart_db_setup.mdx" />

3. Create an iOS SwiftUI app with Xcode

Select the Xcode > New Project > iOS > App menu item.

4. Install Supabase's Agent Skills (optional)

Supabase's Agent Skills is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.

Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.

To install, run the following command in the root of your project:

bash
npx skills add supabase/agent-skills

5. Install the Supabase client library

Add the supabase-swift package to your app using the Swift Package Manager.

In Xcode, navigate to File > Add Package Dependencies... and enter the repository URL https://github.com/supabase/supabase-swift in the search bar. For detailed instructions, see Apple's tutorial on adding package dependencies.

Make sure to add Supabase product package as a dependency to your application target.

6. Initialize the Supabase client

Create a new Supabase.swift file add a new Supabase instance using your project URL and publishable key, which you can get from the helper below, or from the project Connect panel:

<Button variant="primary" asChild> <a href="/dashboard/project/_?showConnect=true&connectTab=mobiles&framework=swift"> Open Connect panel </a> </Button>
swift
import Supabase

let supabase = SupabaseClient(
  supabaseURL: URL(string: "YOUR_SUPABASE_URL")!,
  supabaseKey: "YOUR_SUPABASE_PUBLISHABLE_KEY"
)

<$Partial path="api_settings.mdx" variables={{ "framework": "swift", "tab": "mobiles" }} />

7. Create a data model for instruments

Create a decodable struct to deserialize the data from the database.

Add the following code to a new file named Instrument.swift.

swift
struct Instrument: Decodable, Identifiable {
  let id: Int
  let name: String
}

8. Query data from the app

Use a task to fetch the data from the database and display it using a List.

Replace the default ContentView with the following code.

swift
import SwiftUI

struct ContentView: View {

  @State var instruments: [Instrument] = []

  var body: some View {
    List(instruments) { instrument in
      Text(instrument.name)
    }
    .overlay {
      if instruments.isEmpty {
        ProgressView()
      }
    }
    .task {
      do {
        instruments = try await supabase.from("instruments").select().execute().value
      } catch {
        dump(error)
      }
    }
  }
}

9. Start the app

Run the app on a simulator or a physical device by hitting Cmd + R on Xcode.

If you want to implement authentication features like magic links or OAuth, you need to set up deep links to redirect users back to your app. For instructions on configuring custom URL schemes for your iOS app, see the deep linking guide.

Next steps