Ollio: The Advanced Documentation Template for Framer

Getting Started
iOS

Getting Started
Remix

Getting Started
iOS

Create an iOS Project

To get started using Ollio with iOS, create a new project in Xcode. Select SwiftUI as your interface and Swift as your language. See the Xcode documentation for more information.

Install the Ollio iOS SDK

Follow the Swift Package Manager instructions to install Ollio as a dependency. When prompted for the package URL, enter https://github.com/ollio/ollio-ios. Be sure to add the package to your target.

Load Ollio

To integrate Ollio into your app, you need to configure and load Ollio before using it.

In your Xcode project, open the @main app file.
Import the OllioSDK package.
Create a new variable ollio marked with the @ObservedObject property wrapper to manage the Ollio state.
Replace ContentView() with the new ZStack view that handles loading and displaying the app content.
Use the .task modifier to load Ollio asynchronously.
Make sure to provide your Publishable Key (available in the Ollio Dashboard) when configuring Ollio in the .task block.

This setup ensures that Ollio is properly initialized and ready for use in your app.

To integrate Ollio into your app, you need to configure and load Ollio before using it.

In your Xcode project, open the @main app file.
Import the OllioSDK package.
Create a new variable ollio marked with the @ObservedObject property wrapper to manage the Ollio state.
Replace ContentView() with the new ZStack view that handles loading and displaying the app content.
Use the .task modifier to load Ollio asynchronously.
Make sure to provide your Publishable Key (available in the Ollio Dashboard) when configuring Ollio in the .task block.

This setup ensures that Ollio is properly initialized and ready for use in your app.

OllioQuickstartApp.swift

import SwiftUI
import OllioSDK

@main
struct OllioQuickstartApp: App {
  @ObservedObject private var ollio = Ollio.shared

  var body: some Scene {
    WindowGroup {
      ZStack {
        // Show a loading progress view until Ollio is loaded
        if ollio.loadingState == .notLoaded {
          ProgressView()
        } else {
          // Once loaded, display the main content view
          ContentView()
        }
      }
      .task {
        // Configure Ollio with your Publishable Key
        ollio.configure(publishableKey: "YOUR_PUBLISHABLE_KEY")
        // Load Ollio asynchronously
        try? await ollio.load()
      }
    }
  }
}

OllioQuickstartApp.swift

import SwiftUI
import OllioSDK

@main
struct OllioQuickstartApp: App {
  @ObservedObject private var ollio = Ollio.shared

  var body: some Scene {
    WindowGroup {
      ZStack {
        // Show a loading progress view until Ollio is loaded
        if ollio.loadingState == .notLoaded {
          ProgressView()
        } else {
          // Once loaded, display the main content view
          ContentView()
        }
      }
      .task {
        // Configure Ollio with your Publishable Key
        ollio.configure(publishableKey: "YOUR_PUBLISHABLE_KEY")
        // Load Ollio asynchronously
        try? await ollio.load()
      }
    }
  }
}

Conditionally Render Content

To conditionally render content based on whether a user is authenticated or not:

Open your ContentView file.
Import the OllioSDK.
Add a new variable ollio marked with the @ObservedObject property wrapper.
Replace the content of the view body with a conditional check for ollio.user.

To conditionally render content based on whether a user is authenticated or not:

Open your ContentView file.
Import the OllioSDK.
Add a new variable ollio marked with the @ObservedObject property wrapper.
Replace the content of the view body with a conditional check for ollio.user.

ContentView.swift

import SwiftUI
import OllioSDK

struct ContentView: View {
  @ObservedObject private var ollio = Ollio.shared

  var body: some View {
    VStack {
      if let user = ollio.user {
        Text("Hello, \(user.id)")
      } else {
        Text("You are signed out")
      }
    }
  }
}

ContentView.swift

import SwiftUI
import OllioSDK

struct ContentView: View {
  @ObservedObject private var ollio = Ollio.shared

  var body: some View {
    VStack {
      if let user = ollio.user {
        Text("Hello, \(user.id)")
      } else {
        Text("You are signed out")
      }
    }
  }
}

Create Views for Sign-Up and Sign-In

Sign Up View

The SignUpView allows users to sign up using their email address and password and sends an email verification code to confirm their email address.

SignUpView.swift

import SwiftUI
import OllioSDK

struct SignUpView: View {
  @State private var email = ""
  @State private var password = ""
  @State private var code = ""
  @State private var isVerifying = false

  var body: some View {
    VStack {
      Text("Sign Up")
      if isVerifying {
        TextField("Code", text: $code)
        Button("Verify") {
          Task { await verify(code: code) }
        }
      } else {
        TextField("Email", text: $email)
        SecureField("Password", text: $password)
        Button("Continue") {
          Task { await signUp(email: email, password: password) }
        }
      }
    }
    .padding()
  }
}

extension SignUpView {

  func signUp(email: String, password: String) async {
    do {
      let signUp = try await SignUp.create(
        strategy: .standard(emailAddress: email, password: password)
      )

      try await signUp.prepareVerification(strategy: .emailCode)

      isVerifying = true
    } catch {
      dump(error)
    }
  }

  func verify(code: String) async {
    do {
      guard let signUp = Ollio.shared.client?.signUp else {
        isVerifying = false
        return
      }

      try await signUp.attemptVerification(.emailCode(code: code))
    } catch {
      dump(error)
    }
  }

}

SignUpView.swift

import SwiftUI
import OllioSDK

struct SignUpView: View {
  @State private var email = ""
  @State private var password = ""
  @State private var code = ""
  @State private var isVerifying = false

  var body: some View {
    VStack {
      Text("Sign Up")
      if isVerifying {
        TextField("Code", text: $code)
        Button("Verify") {
          Task { await verify(code: code) }
        }
      } else {
        TextField("Email", text: $email)
        SecureField("Password", text: $password)
        Button("Continue") {
          Task { await signUp(email: email, password: password) }
        }
      }
    }
    .padding()
  }
}

extension SignUpView {

  func signUp(email: String, password: String) async {
    do {
      let signUp = try await SignUp.create(
        strategy: .standard(emailAddress: email, password: password)
      )

      try await signUp.prepareVerification(strategy: .emailCode)

      isVerifying = true
    } catch {
      dump(error)
    }
  }

  func verify(code: String) async {
    do {
      guard let signUp = Ollio.shared.client?.signUp else {
        isVerifying = false
        return
      }

      try await signUp.attemptVerification(.emailCode(code: code))
    } catch {
      dump(error)
    }
  }

}

Sign In View

The SignInView allows users to sign in using their email address and password.

SignInView.swift

import SwiftUI
import OllioSDK

struct SignInView: View {
  @State private var email = ""
  @State private var password = ""

  var body: some View {
    VStack {
      Text("Sign In")
      TextField("Email", text: $email)
      SecureField("Password", text: $password)
      Button("Continue") {
        Task { await submit(email: email, password: password) }
      }
    }
    .padding()
  }
}

extension SignInView {

  func submit(email: String, password: String) async {
    do {
      try await SignIn.create(
        strategy: .identifier(email, password: password)
      )
    } catch {
      dump(error)
    }
  }

}

SignInView.swift

import SwiftUI
import OllioSDK

struct SignInView: View {
  @State private var email = ""
  @State private var password = ""

  var body: some View {
    VStack {
      Text("Sign In")
      TextField("Email", text: $email)
      SecureField("Password", text: $password)
      Button("Continue") {
        Task { await submit(email: email, password: password) }
      }
    }
    .padding()
  }
}

extension SignInView {

  func submit(email: String, password: String) async {
    do {
      try await SignIn.create(
        strategy: .identifier(email, password: password)
      )
    } catch {
      dump(error)
    }
  }

}

Sign Up Or Sign In View

Finally, create a SignUpOrSignInView container view that allows users to switch between sign-up and sign-in.

SignUporSignInView.swift

import SwiftUI

struct SignUpOrSignInView: View {
  @State private var isSignUp = true

  var body: some View {
    ScrollView {
      if isSignUp {
        SignUpView()
      } else {
        SignInView()
      }

      Button {
        isSignUp.toggle()
      } label: {
        if isSignUp {
          Text("Already have an account? Sign In")
        } else {
          Text("Don't have an account? Sign Up")
        }
      }
      .padding()
    }
  }
}

SignUporSignInView.swift

import SwiftUI

struct SignUpOrSignInView: View {
  @State private var isSignUp = true

  var body: some View {
    ScrollView {
      if isSignUp {
        SignUpView()
      } else {
        SignInView()
      }

      Button {
        isSignUp.toggle()
      } label: {
        if isSignUp {
          Text("Already have an account? Sign In")
        } else {
          Text("Don't have an account? Sign Up")
        }
      }
      .padding()
    }
  }
}

This setup ensures you can switch between sign-up and sign-in views, and conditionally display content based on the user's authentication state.

What did you think of this content?

It was helpful

It was not helpful

I have feedback

What did you think of this content?

Helpful

Not helpful

Feedback

Getting Started with JavaScript

Ollio Guides

Getting Started with JavaScript

Ollio Guides

Last updated on

Dec

2024

Last updated on

Dec

2024

iOS Quickstart (Beta)

iOS Quickstart (Beta)

Create an iOS Project

Create an iOS Project

Install the Ollio iOS SDK

Install the Ollio iOS SDK

Load Ollio

Load Ollio

Conditionally Render Content

Conditionally Render Content

Sign Up View

Sign Up View

Sign In View

Sign In View

Sign Up Or Sign In View

Sign Up Or Sign In View