Add social provider sign-in

Prerequisites

Note: Social sign-in (OAuth) functionality is only available in iOS and macOS.

When configuring social sign-in through the Amplify CLI, it's important to exercise caution when designating attributes as "required." Different social identity providers have varied scopes in terms of the information they respond back to Cognito with. User pool attributes that are initially set up as "required" cannot be changed later, and may require you to migrate the users or create a new user pool.

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.

To use Auth in a macOS project, you'll need to enable the Keychain Sharing capability. In Xcode, navigate to your application target > Signing & Capabilities > + Capability, then select Keychain Sharing.

This capability is required because Auth uses the Data Protection Keychain on macOS as a platform best practice. See TN3137: macOS keychain APIs and implementations for more information on how Keychain works on macOS and the Keychain Sharing entitlement.

For more information on adding capabilities to your application, see Xcode Capabilities.

Setup Your Auth Provider

Create a developer account with Facebook.
Sign In with your Facebook credentials.
Choose My Apps from the top navigation bar, and on the page that loads choose Create App.
For your use case, choose Set up Facebook Login.
For platform, choose Website and select No, I'm not building a game.
Give your Facebook app a name and choose Create app.
On the left navigation bar, choose Settings and then Basic.
Note the App ID and the App Secret. You will use them in the next section during the CLI flow.

Configure Auth Category

Once you have the social provider configured, run the following in your project’s root folder

1amplify add auth     ## "amplify update auth" if already configured

Choose the following options (the last steps are specific to Facebook here but are similar for other providers):

1? Do you want to use the default authentication and security configuration?
2    `Default configuration with Social Provider (Federation)`
3? How do you want users to be able to sign in?
4    `Username`
5? Do you want to configure advanced settings?
6    `No, I am done.`
7? What domain name prefix you want us to create for you?
8    `(default)`
9? Enter your redirect signin URI:
10    `myapp://`
11? Do you want to add another redirect signin URI
12    `No`
13? Enter your redirect signout URI:
14    `myapp://`
15? Do you want to add another redirect signout URI
16    `No`
17? Select the social providers you want to configure for your user pool:
18    `Sign in with Apple`
19? Enter your Services ID for your OAuth flow:
20    `<your Service ID>`
21? Enter your Team ID for your OAuth flow:
22    `<your Team ID>`
23? Enter your Key ID for your OAuth flow:
24    `<your Key ID>`
25? Enter your Private Key for your OAuth flow (entire key without line breaks):
26    `<the entire content -----BEGIN PRIVATE KEY----- <key> -----END PRIVATE KEY----- from your .p8 file in a single line>`

Run amplify push to publish your changes. Once finished, it will display an auto generated URL for your web UI. You can retrieve your user pool domain URL at anytime by running amplify status using the CLI.

You need to now inform your auth provider of this URL:

Sign In to your Facebook developer account with your Facebook credentials.
Choose My Apps from the top navigation bar, and on the Apps page, choose your App you created before.
On the left navigation bar, choose Products. Add Facebook Login if it isn't already added.
If already added, choose Settings under the Configure dropdown.
Under Valid OAuth Redirect URIs type your user pool domain with the /oauth2/idpresponse endpoint.

https://<your-user-pool-domain>/oauth2/idpresponse

Userpool domain is pasted into the text field with /oauth2/ endpoint.

Save changes.

Federated sign-in does not invoke any Custom authentication challenge Lambda triggers, Migrate user Lambda trigger, Custom message Lambda trigger, or Custom sender Lambda triggers in your user pool. For information on the supported Lambda triggers refer to the AWS documentation

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:

1<plist version="1.0">
2
3     <dict>
4     <!-- YOUR OTHER PLIST ENTRIES HERE -->
5
6     <!-- ADD AN ENTRY TO CFBundleURLTypes for Cognito Auth -->
7     <!-- IF YOU DO NOT HAVE CFBundleURLTypes, YOU CAN COPY THE WHOLE BLOCK BELOW -->
8     <key>CFBundleURLTypes</key>
9     <array>
10         <dict>
11             <key>CFBundleURLSchemes</key>
12             <array>
13                 <string>myapp</string>
14             </array>
15         </dict>
16     </array>
17
18     <!-- ... -->
19     </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.

Sweet! You're now ready to launch sign in with your social provider's web UI.

Invoke this api with whatever provider you're using (shown with Facebook below):

1func socialSignInWithWebUI() async {
2    do {
3        let signInResult = try await Amplify.Auth.signInWithWebUI(for: .facebook, presentationAnchor: self.view.window!)
4        if signInResult.isSignedIn {
5            print("Sign in succeeded")
6        }
7    } catch let error as AuthError {
8        print("Sign in failed \(error)")
9    } catch {
10        print("Unexpected error: \(error)")
11    }
12}

Enable guest access

Enable sign-out

Add social provider sign-in

Prerequisites

Setup Your Auth Provider

Configure Auth Category

Update Info.plist

Launch Social Web UI Sign In