Enable sign-in with web UI
Prerequisites
- An app setup according to the getting started walkthrough
Configure Auth Category
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:
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.
1<queries>2 <intent>3 <action android:name=4 "android.support.customtabs.action.CustomTabsService" />5 </intent>6</queries>7<application>8 ...9 <activity10 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 version | Upgrade version |
---|---|
4.1.x + | N/A |
4.0.x | 4.0.1 |
3.6.x | 3.6.4 |
3.5.x | 3.5.4 |
3.4.x | 3.4.3 |
3.3.x | 3.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:
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.
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:
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:
- 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.
1Future<void> signInWithWebUIAndPrivateSession() async {2 await Amplify.Auth.signInWithWebUI(3 options: const CognitoSignInWithWebUIOptions(4 isPreferPrivateSession: preferPrivateSession5 )6 );7}