Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated May 17, 2024

Sign-in

Amplify provides a client library that enables you to interact with backend resources such as Amplify Auth.

The quickest way to get started with Amplify Auth in your frontend application is with the Authenticator component, which provides a customizable UI and complete authentication flows.

Using the signIn API

Future<void> signInUser(String username, String password) async {
try {
final result = await Amplify.Auth.signIn(
username: username,
password: password,
);
await _handleSignInResult(result);
} on AuthException catch (e) {
safePrint('Error signing in: ${e.message}');
}
}

Depending on your configuration and how the user signed up, one or more confirmations will be necessary. Use the SignInResult returned from Amplify.Auth.signIn to check the next step for signing in. When the value is done, the user has successfully signed in.

Future<void> _handleSignInResult(SignInResult result) async {
switch (result.nextStep.signInStep) {
case AuthSignInStep.confirmSignInWithSmsMfaCode:
final codeDeliveryDetails = result.nextStep.codeDeliveryDetails!;
_handleCodeDelivery(codeDeliveryDetails);
break;
case AuthSignInStep.confirmSignInWithNewPassword:
safePrint('Enter a new password to continue signing in');
break;
case AuthSignInStep.confirmSignInWithCustomChallenge:
final parameters = result.nextStep.additionalInfo;
final prompt = parameters['prompt']!;
safePrint(prompt);
break;
case AuthSignInStep.resetPassword:
final resetResult = await Amplify.Auth.resetPassword(
username: username,
);
await _handleResetPasswordResult(resetResult);
break;
case AuthSignInStep.confirmSignUp:
// Resend the sign up code to the registered device.
final resendResult = await Amplify.Auth.resendSignUpCode(
username: username,
);
_handleCodeDelivery(resendResult.codeDeliveryDetails);
break;
case AuthSignInStep.done:
safePrint('Sign in is complete');
break;
}
}
void _handleCodeDelivery(AuthCodeDeliveryDetails codeDeliveryDetails) {
safePrint(
'A confirmation code has been sent to ${codeDeliveryDetails.destination}. '
'Please check your ${codeDeliveryDetails.deliveryMedium.name} for the code.',
);
}

The signIn API response will include a nextStep property, which can be used to determine if further action is required. It may return the following next steps:

  • CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED - The user was created with a temporary password and must set a new one. Complete the process with confirmSignIn.
  • CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE - The sign-in must be confirmed with a custom challenge response. Complete the process with confirmSignIn.
  • CONFIRM_SIGN_IN_WITH_TOTP_CODE - The sign-in must be confirmed with a TOTP code from the user. Complete the process with confirmSignIn.
  • CONTINUE_SIGN_IN_WITH_TOTP_SETUP - The TOTP setup process must be continued. Complete the process with confirmSignIn.
  • CONFIRM_SIGN_IN_WITH_SMS_CODE - The sign-in must be confirmed with a SMS code from the user. Complete the process with confirmSignIn.
  • CONTINUE_SIGN_IN_WITH_MFA_SELECTION - The user must select their mode of MFA verification before signing in. Complete the process with confirmSignIn.
  • RESET_PASSWORD - The user must reset their password via resetPassword.
  • CONFIRM_SIGN_UP - The user hasn't completed the sign-up flow fully and must be confirmed via confirmSignUp.
  • DONE - The sign in process has been completed.

For more information on handling the TOTP and MFA steps that may be returned, see multi-factor authentication.

Confirm sign-in

With multi-factor auth enabled

When multi-factor authentication (MFA) is required with SMS in your backend auth resource, you will need to pass the phone number during sign-up API call. If you are using the email or username as the primary sign-in mechanism, you will need to pass the phone_number attribute as a user attribute. This will change depending on if you enable SMS, TOTP, or both. Visit the multi-factor authentication documentation to learn more about enabling MFA on your backend auth resource.

You will then confirm sign-up, sign in, and receive a nextStep in the sign-in result of type CONFIRM_SIGN_IN_WITH_SMS_MFA_CODE. A confirmation code will also be texted to the phone number provided above. Pass the code you received to the confirmSignIn API:

Note: you must call confirmSignIn in the same app session as you call signIn. If you close the app, you will need to call signIn again. As a result, for testing purposes, you'll at least need an input field where you can enter the code sent via SMS and pass it to confirmSignIn.

Sign in with an external identity provider

To sign in using an external identity provider such as Google, use the signInWithRedirect function.

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

Web

To use Hosted UI in your Flutter web application locally, you must run the app with the --web-port=3000 argument (with the value being whichever port you assigned to localhost host when configuring your redirect URIs).

Android

Add the following queries element to the AndroidManifest.xml file in your app's android/app/src/main directory, as well as the following intent-filter to the MainActivity in the same file.

Replace myapp with your redirect URI scheme as necessary:

<queries>
<intent>
<action android:name=
"android.support.customtabs.action.CustomTabsService" />
</intent>
</queries>
<application>
...
<activity
android:name=".MainActivity" 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>

macOS

Open XCode and enable the App Sandbox capability and then select "Incoming Connections (Server)" under "Network".

Incoming Connections setting selected in the App Sandbox section of the runner signing and capabilities tab.

iOS, Windows and Linux

No specific platform configuration is required.

Launch Social Web UI Sign In

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

Future<void> socialSignIn() async {
try {
final result = await Amplify.Auth.signInWithWebUI(
provider: AuthProvider.google,
);
safePrint('Sign in result: $result');
} on AuthException catch (e) {
safePrint('Error signing in: ${e.message}');
}
}