chore(docs): add phone sign in example (#522)

Author: grdsdev

Examples/Examples.xcodeproj/project.pbxproj

@@ -37,6 +37,7 @@
 		797EFB6C2BABE1B800098D6B /* FileObjectDetailView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 797EFB6B2BABE1B800098D6B /* FileObjectDetailView.swift */; };
 		7993B8A92B3C673A009B610B /* AuthView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7993B8A82B3C673A009B610B /* AuthView.swift */; };
 		7993B8AB2B3C67E0009B610B /* Toast.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7993B8AA2B3C67E0009B610B /* Toast.swift */; };
+		799EE6A32C877BFB00FD9DD7 /* SignInWithPhone.swift in Sources */ = {isa = PBXBuildFile; fileRef = 799EE6A22C877BF900FD9DD7 /* SignInWithPhone.swift */; };
 		79AF047F2B2CE207008761AD /* AuthWithEmailAndPassword.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79AF047E2B2CE207008761AD /* AuthWithEmailAndPassword.swift */; };
 		79AF04812B2CE261008761AD /* AuthView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79AF04802B2CE261008761AD /* AuthView.swift */; };
 		79AF04842B2CE408008761AD /* AuthWithMagicLink.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79AF04832B2CE408008761AD /* AuthWithMagicLink.swift */; };
@@ -106,6 +107,7 @@
 		7993B8A82B3C673A009B610B /* AuthView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthView.swift; sourceTree = "<group>"; };
 		7993B8AA2B3C67E0009B610B /* Toast.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Toast.swift; sourceTree = "<group>"; };
 		7993B8AC2B3C97B6009B610B /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist; path = Info.plist; sourceTree = "<group>"; };
+		799EE6A22C877BF900FD9DD7 /* SignInWithPhone.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SignInWithPhone.swift; sourceTree = "<group>"; };
 		79AF047E2B2CE207008761AD /* AuthWithEmailAndPassword.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthWithEmailAndPassword.swift; sourceTree = "<group>"; };
 		79AF04802B2CE261008761AD /* AuthView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthView.swift; sourceTree = "<group>"; };
 		79AF04832B2CE408008761AD /* AuthWithMagicLink.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthWithMagicLink.swift; sourceTree = "<group>"; };
@@ -258,6 +260,7 @@
 		79AF04822B2CE3BD008761AD /* Auth */ = {
 			isa = PBXGroup;
 			children = (
+				799EE6A22C877BF900FD9DD7 /* SignInWithPhone.swift */,
 				7956405F2954AE140088A06F /* AuthController.swift */,
 				79AF04802B2CE261008761AD /* AuthView.swift */,
 				79AF047E2B2CE207008761AD /* AuthWithEmailAndPassword.swift */,
@@ -490,6 +493,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				796298992AEBBA77000AA957 /* MFAFlow.swift in Sources */,
+				799EE6A32C877BFB00FD9DD7 /* SignInWithPhone.swift in Sources */,
 				79AF04862B2CE586008761AD /* Debug.swift in Sources */,
 				79AF04842B2CE408008761AD /* AuthWithMagicLink.swift in Sources */,
 				79401F352BC708C8004C9C0F /* UIViewControllerWrapper.swift in Sources */,

Examples/Examples/Auth/AuthController.swift

@@ -26,7 +26,7 @@ final class AuthController {
 
   init() {
     observeAuthStateChangesTask = Task {
-      for await (event, session) in await supabase.auth.authStateChanges {
+      for await (event, session) in supabase.auth.authStateChanges {
         guard [.initialSession, .signedIn, .signedOut].contains(event) else { return }
 
         self.session = session

Examples/Examples/Auth/AuthView.swift

@@ -11,6 +11,7 @@ struct AuthView: View {
   enum Option: CaseIterable {
     case emailAndPassword
     case magicLink
+    case signInWithPhone
     case signInWithApple
     case signInWithOAuth
     case signInWithOAuthUsingUIKit
@@ -21,6 +22,7 @@ struct AuthView: View {
       switch self {
       case .emailAndPassword: "Auth with Email & Password"
       case .magicLink: "Auth with Magic Link"
+      case .signInWithPhone: "Sign in with Phone"
       case .signInWithApple: "Sign in with Apple"
       case .signInWithOAuth: "Sign in with OAuth flow"
       case .signInWithOAuthUsingUIKit: "Sign in with OAuth flow (UIKit)"
@@ -51,6 +53,7 @@ extension AuthView.Option: View {
     switch self {
     case .emailAndPassword: AuthWithEmailAndPassword()
     case .magicLink: AuthWithMagicLink()
+    case .signInWithPhone: SignInWithPhone()
     case .signInWithApple: SignInWithApple()
     case .signInWithOAuth: SignInWithOAuth()
     case .signInWithOAuthUsingUIKit: UIViewControllerWrapper(SignInWithOAuthViewController())

Examples/Examples/Auth/SignInWithPhone.swift

@@ -0,0 +1,115 @@
+//
+//  SignInWithPhone.swift
+//  Examples
+//
+//  Created by Guilherme Souza on 03/09/24.
+//
+
+import SwiftUI
+
+struct SignInWithPhone: View {
+  @State var phone = ""
+  @State var code = ""
+
+  @State var actionState: ActionState<Void, Error> = .idle
+  @State var verifyActionState: ActionState<Void, Error> = .idle
+
+  @State var isVerifyStep = false
+
+  var body: some View {
+    if isVerifyStep {
+      VStack {
+        verifyView
+        Button("Change phone") {
+          isVerifyStep = false
+        }
+      }
+    } else {
+      phoneView
+    }
+  }
+
+  var phoneView: some View {
+    Form {
+      Section {
+        TextField("Phone", text: $phone)
+          .keyboardType(.phonePad)
+          .textContentType(.telephoneNumber)
+          .autocorrectionDisabled()
+          .textInputAutocapitalization(.never)
+      }
+
+      Section {
+        Button("Send code to number") {
+          Task {
+            await sendCodeToNumberTapped()
+          }
+        }
+      }
+
+      switch actionState {
+      case .idle, .result(.success):
+        EmptyView()
+      case .inFlight:
+        ProgressView()
+      case let .result(.failure(error)):
+        ErrorText(error)
+      }
+    }
+  }
+
+  var verifyView: some View {
+    Form {
+      Section {
+        TextField("Code", text: $code)
+          .keyboardType(.numberPad)
+          .textContentType(.oneTimeCode)
+          .autocorrectionDisabled()
+          .textInputAutocapitalization(.never)
+      }
+
+      Section {
+        Button("Verify") {
+          Task {
+            await verifyButtonTapped()
+          }
+        }
+      }
+
+      switch verifyActionState {
+      case .idle, .result(.success):
+        EmptyView()
+      case .inFlight:
+        ProgressView()
+      case let .result(.failure(error)):
+        ErrorText(error)
+      }
+    }
+  }
+
+  private func sendCodeToNumberTapped() async {
+    actionState = .inFlight
+
+    do {
+      try await supabase.auth.signInWithOTP(phone: phone)
+      actionState = .result(.success(()))
+      isVerifyStep = true
+    } catch {
+      actionState = .result(.failure(error))
+    }
+  }
+
+  private func verifyButtonTapped() async {
+    verifyActionState = .inFlight
+    do {
+      try await supabase.auth.verifyOTP(phone: phone, token: code, type: .sms)
+      verifyActionState = .result(.success(()))
+    } catch {
+      verifyActionState = .result(.failure(error))
+    }
+  }
+}
+
+#Preview {
+  SignInWithPhone()
+}

Examples/supabase/config.toml

@@ -64,6 +64,29 @@ double_confirm_changes = true
 # If enabled, users need to confirm their email address before signing in.
 enable_confirmations = false
 
+[auth.sms]
+# Allow/disallow new user signups via SMS to your project.
+enable_signup = true
+# If enabled, users need to confirm their phone number before signing in.
+enable_confirmations = false
+# Template for sending OTP to users
+template = "Your code is {{ `{{ .Code }}` }} ."
+# Controls the minimum amount of time that must pass before sending another sms otp.
+max_frequency = "5s"
+
+# Use pre-defined map of phone number to OTP for testing.
+[auth.sms.test_otp]
+4152127777 = "123456"
+
+
+# Configure one of the supported SMS providers: `twilio`, `twilio_verify`, `messagebird`, `textlocal`, `vonage`.
+[auth.sms.twilio]
+enabled = true
+account_sid = "account sid"
+message_service_sid = "account service sid"
+# DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
+auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"
+
 # Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
 # `discord`, `facebook`, `github`, `gitlab`, `google`, `twitch`, `twitter`, `slack`, `spotify`.
 [auth.external.apple]
@@ -80,4 +103,4 @@ url = ""
 [auth.external.github]
 enabled = false
 client_id = "12d1131cd3582f942c71"
-secret = "env(SUPABASE_AUTH_EXTERNAL_GITHUB_SECRET)"
+secret = "env(SUPABASE_AUTH_EXTERNAL_GITHUB_SECRET)"