SignInWithAppleButton check for value before starting authorisation-CodePudding

I am creating a signup flow with swiftui, with two options: email pass or Apple Login.

The user needs to accept T&C (via checkbox) before being able to Sign Up. This works flawlessly in the email pass signup, but I have not been able to add the same check within the SignInWithAppleButton methods, so that it runs before the user starts the actual Apple flow.

This is the form

And this is the code I currently have for the Button

SignInWithAppleButton(.signIn) { request in
  request.requestedScopes = [.email]
} onCompletion: { result in
  switch result {
    case .success(let authResults):
       // My code
    case .failure(let error):
      print("Authorisation failed: \(error.localizedDescription)")
  }
}

I've already successfully tested my check within the onCompletion part, but this is not ideal from the UX perspective, since the user needs first to complete the Apple Sign up, just to be reminded they didn't select the checkbox.

So instead, I tried adding my check after request.requestedScopes = [.email], and the check itself works, but I am not able to stop the next step from happening since request doesn't have a cancel() or stop() method.

I also tried attaching the event onTapGesture, but in this case I am not able to start the Apple flow if the check is passed.

So, my question is: how can I check that the checkbox is checked BEFORE the actual Apple login flows start?

CodePudding user response：

You can disable the button as long as the checkbox is unchecked:

@State private var termsAccepted: Bool = false

var body: some View{
    SignInWithAppleButton{ _ in
        
    } onCompletion: { _ in
        
    }
    .disabled(!termsAccepted) // disable the button here
}

Edit:

You could add a conditional overlay to capture a tap:

@State private var termsAccepted: Bool = false

var body: some View{
    VStack{

        Toggle("terms", isOn: $termsAccepted)
        SignInWithAppleButton{ _ in
            
        } onCompletion: { _ in
            
        }
        .disabled(!termsAccepted)
        .overlay{
            if !termsAccepted{
                Color.clear
                    .contentShape(Rectangle())
                    .onTapGesture {
                        print("please accept terms")
                    }
                    
            }
        }

    }
}