Page updated Nov 8, 2023

Enable sign-in with web UI

Amplify Flutter v0 is now in Maintenance Mode until July 19th, 2024. This means that we will continue to include updates to ensure compatibility with backend services and security. No new features will be introduced in v0.

Please use the latest version (v1) of Amplify Flutter to get started.

If you are currently using v0, follow these instructions to upgrade to v1.

Prerequisites

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.

Configure Auth Category

This library's Cognito plugin currently supports the Authorization Code Grant OAuth Flow.

In terminal, navigate to your project, run amplify add auth (or if you've already added it, run amplify update 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>`
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 `<hit enter>`

Once finished, run amplify push to publish your changes.

How It Works

Sign-in with web UI will display the sign-in UI inside a webview. After the sign-in process is complete, the sign-in UI will redirect back to your app.

Platform Setup

Android

Add the following activity and queries tag to the AndroidManifest.xml file in your app's android/app/src/main directory, replacing myapp with your redirect URI prefix if necessary. Note that this differs from the amplify-flutter stable release, so you will need to make these changes even if you are transitioning an existing project.

<queries> <intent> <action android:name= "android.support.customtabs.action.CustomTabsService" /> </intent> </queries> <application> ... <activity android:name="com.amplifyframework.auth.cognito.activities.HostedUIRedirectActivity" android:exported="true"> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="myapp" /> </intent-filter> </activity> ... </application>
1<queries>
2 <intent>
3 <action android:name=
4 "android.support.customtabs.action.CustomTabsService" />
5 </intent>
6</queries>
7<application>
8 ...
9 <activity
10 android:name="com.amplifyframework.auth.cognito.activities.HostedUIRedirectActivity"
11 android:exported="true">
12 <intent-filter>
13 <action android:name="android.intent.action.VIEW" />
14 <category android:name="android.intent.category.DEFAULT" />
15 <category android:name="android.intent.category.BROWSABLE" />
16 <data android:scheme="myapp" />
17 </intent-filter>
18 </activity>
19 ...
20</application>

In order to use the <queries> element cited below, you may need to upgrade the Android gradle plugin version in your build.gradle file to one of the versions specified below:

Your plugin versionUpgrade version
4.1.x +N/A
4.0.x4.0.1
3.6.x3.6.4
3.5.x3.5.4
3.4.x3.4.3
3.3.x3.3.3

iOS

Add the following entry to the URL scheme in the Info.plist file in your app's ios/Runner directory. Replace myapp with the "redirect signin URI" you provided to the CLI:

<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>
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>

Launch Web UI Sign In

Sweet! You're now ready to launch sign in with web UI.

Future<void> signInWithWebUI() async { try { final result = await Amplify.Auth.signInWithWebUI(); print('Result: $result'); } on AuthException catch (e) { print(e.message); } }
1Future<void> signInWithWebUI() async {
2 try {
3 final result = await Amplify.Auth.signInWithWebUI();
4 print('Result: $result');
5 } on AuthException catch (e) {
6 print(e.message);
7 }
8}

You can also specify a provider with the provider attribute:

Future<void> signInWithWebUIProvider() async { try { final result = await Amplify.Auth.signInWithWebUI(provider: AuthProvider.google); print('Result: $result'); } on AuthException catch (e) { print(e.message); } }
1Future<void> signInWithWebUIProvider() async {
2 try {
3 final result = await Amplify.Auth.signInWithWebUI(provider: AuthProvider.google);
4 print('Result: $result');
5 } on AuthException catch (e) {
6 print(e.message);
7 }
8}

Amplify Flutter currently supports the following social sign-in providers:

  • Google
  • Facebook
  • Login With Amazon
  • Apple

Prefer private session during signIn on iOS.

Amplify Flutter uses the amplify-ios library on the iOS platform to facilitate Web UI sign in and other Auth functionality. See the amplify-ios Web UI documentation for details on how amplify-ios manages the interaction between the application and the Web UI.

As noted in the amplify-ios documentation, it is possible to use a private session when calling Auth.signInWithWebUI. This will bypass the permissions dialog that is displayed to the end user, although it will also prevent reuse of existing sessions from the user's browser. For example, if the user is logged into Google in their browser and try to sign in using Google in your app, they would now need to re-enter their credentials.

Future<void> signInWithWebUIAndPrivateSession() async { await Amplify.Auth.signInWithWebUI( options: const CognitoSignInWithWebUIOptions( isPreferPrivateSession: preferPrivateSession ) ); }
1Future<void> signInWithWebUIAndPrivateSession() async {
2 await Amplify.Auth.signInWithWebUI(
3 options: const CognitoSignInWithWebUIOptions(
4 isPreferPrivateSession: preferPrivateSession
5 )
6 );
7}