Enable sign-in with web UI

Prerequisites

An application with a minimum target of iOS 13.0 and/or macOS 10.15 with Amplify libraries integrated, using Xcode 14.1 or later.

For a full example, please follow the project setup walkthrough.

Configure Auth Category

In terminal, navigate to your project, run amplify add auth, and choose the following options:

? Do you want to use the default authentication and security configuration? 
    `Default configuration with Social Provider (Federation)`
? How do you want users to be able to sign in? 
    `Username`
? Do you want to configure advanced settings? 
    `No, I am done.`
? What domain name prefix you want us to create for you? 
    `(default)`
? Enter your redirect signin URI: 
    `myapp://`
? Do you want to add another redirect signin URI 
    `No`
? Enter your redirect signout URI: 
    `myapp://`
? Do you want to add another redirect signout URI 
    `No`
? Select the social providers you want to configure for your user pool: 
    `<hit enter>`

Once finished, run amplify push to publish your changes.

Update Info.plist

Signin with web UI require the Amplify plugin to show up the signin UI inside a webview. After the signin process is complete it will redirect back to your app. You have to enable this in your app's Info.plist. Right click Info.plist and then choose Open As > Source Code. Add the following entry in the URL scheme:

<plist version="1.0">

     <dict>
     <!-- YOUR OTHER PLIST ENTRIES HERE -->

     <!-- ADD AN ENTRY TO CFBundleURLTypes for Cognito Auth -->
     <!-- IF YOU DO NOT HAVE CFBundleURLTypes, YOU CAN COPY THE WHOLE BLOCK BELOW -->
     <key>CFBundleURLTypes</key>
     <array>
         <dict>
             <key>CFBundleURLSchemes</key>
             <array>
                 <string>myapp</string>
             </array>
         </dict>
     </array>

     <!-- ... -->
     </dict>

When creating a new SwiftUI app using Xcode 13 no longer require configuration files such as the Info.plist. If you are missing this file, click on the project target, under Info, Url Types, and click '+' to add a new URL Type. Add myapp to the URL Schemes. You should see the Info.plist file now with the entry for CFBundleURLSchemes.

Launch Web UI Sign In

Sweet! You're now ready to launch sign in with web UI. The signInWithWebUI api require a presentationAnchor and for an iOS app it will be the main UIWindow of the app. The example code below assume that you are in a UIViewController where you can fetch the UIWindow instance by self.view.window.

func signInWithWebUI() async {
    do {
        let signInResult = try await Amplify.Auth.signInWithWebUI(presentationAnchor: self.view.window!)
        if signInResult.isSignedIn {
            print("Sign in succeeded")
        }
    } catch let error as AuthError {
        print("Sign in failed \(error)")
    } catch {
        print("Unexpected error: \(error)")
    }
}

func signInWithWebUI() -> AnyCancellable {
    Amplify.Publisher.create {
        try await Amplify.Auth.signInWithWebUI(presentationAnchor: self.view.window!)
        }.sink {
            if case let .failure(authError) = $0 {
                print("Sign in failed \(authError)")
            }
        }
        receiveValue: { signInResult in
            if signInResult.isSignedIn {
                print("Sign in succeeded")
            }
        }
}

Prefer private session during signIn

Starting Amplify 1.6.0, Amplify.Auth.signInWithWebUI automatically uses ASWebAuthenticationSession internally for iOS 13.0+. For older iOS versions, it will fall back to SFAuthenticationSession. This release also introduces a new preferPrivateSession flag to AWSAuthWebUISignInOptions during the sign in flow. If preferPrivateSession is set to true during sign in, the user will not see a web view displayed when they sign out. preferPrivateSession will set ASWebAuthenticationSession.prefersEphemeralWebBrowserSession internally and the authentication session will be private if the user's preferred browser supports it.

try await Amplify.Auth.signInWithWebUI(
    presentationAnchor: self.view.window!,
    options: .preferPrivateSession()
) {
    ...
}