Sign-in

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

Using the signIn API

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:

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.

Sign in with an external identity provider

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

import { signInWithRedirect } from "aws-amplify/auth"

signInWithRedirect({ provider: "Google" })

Alternatively if you have configured OIDC or SAML-based identity providers in your auth resource, you can specify a "custom" provider in signInWithRedirect:

import { signInWithRedirect } from "aws-amplify/auth"

signInWithRedirect({ provider: {
  custom: "MyOidcProvider"
}})

Install native module

signInWithRedirect displays the sign-in UI inside a platform-dependent webview. On iOS devices, an ASWebAuthenticationSession will be launched and, on Android, a Custom Tab. After the sign-in process is complete, the sign-in UI will redirect back to your app.

To enable this capability, an additional dependency must be installed.

npm add @aws-amplify/rtn-web-browser

Platform Setup

On iOS, there are no additional setup steps.

Android

After a successful sign-in, the sign-in UI will attempt to redirect back to your application. To register the redirect URI scheme you configured above with the device, an intent-filter must be added to your application's AndroidManifest.xml file which should be located in your React Native app's android/app/src/main directory.

Add the intent-filter to your application's main activity, replacing myapp with your redirect URI scheme as necessary.

<application ...>
    <activity android:name=".MainActivity" ...>
        ...
        <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>