Login With Amazon using AWS Amplify Auth

In this tutorial you will learn how use AWS Amplify authentication service to enable Login With Amazon in an Android application. The App experience will look like below

 

 

• Create a new Android Studio project using the Empty Activity template

• We are going to use MyAuthApplication for the name field

• Update build.gradle (Project: MyAuthApplication) as below

// Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript { repositories { google() jcenter() // ******* Add this line ******* mavenCentral() } dependencies { classpath "com.android.tools.build:gradle:4.0.1" // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files } } allprojects { repositories { google() jcenter() // ******* Add this line ******* mavenCentral() } } task clean(type: Delete) { delete rootProject.buildDir } 

• Update build.gradle (Module:app) as below

apply plugin: 'com.android.application' android { compileSdkVersion 29 defaultConfig { applicationId "com.offlineprogrammer.myauthapplication" minSdkVersion 23 targetSdkVersion 29 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' } } // ******* Add these lines ******* compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation 'androidx.appcompat:appcompat:1.1.0' implementation 'androidx.constraintlayout:constraintlayout:1.1.3' testImplementation 'junit:junit:4.12' androidTestImplementation 'androidx.test.ext:junit:1.1.1' androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0' // ******* Add these lines ******* implementation 'com.amplifyframework:core:1.1.1' implementation 'com.amplifyframework:aws-auth-cognito:1.1.1' } 

• Make sure to run Gradle Sync
• Run the command below on Android Studio Terminal

amplify init 

• You will prompted for few details as below

? Enter a name for the project MyAuthApplication ? Enter a name for the environment amplify ? Choose your default editor: None ? Choose the type of app that you're building android Please tell us about your project ? Where is your Res directory: app/src/main/res Using default provider awscloudformation For more information on AWS Profiles, see: <https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html> ? Do you want to use an AWS profile? Yes ? Please choose the profile you want to use default Adding backend environment amplify to AWS Amplify Console app: d2yvhmdiprhhlh 

• Once complete you will get the confirmation below

Your project has been successfully initialized and connected to the cloud!

• Create a new class and name it MyAuthApplication
• We will use this class to initialize Amplify as below - note how the class extends from Application

public class MyAuthApplication extends Application { private static final String TAG = "MyAuthApplication"; @Override public void onCreate() { super.onCreate(); try { Amplify.addPlugin(new AWSCognitoAuthPlugin()); Amplify.configure(getApplicationContext()); Log.i(TAG, "Initialized Amplify"); } catch (AmplifyException error) { Log.e(TAG, "Could not initialize Amplify", error); } } } 

• Update AndroidManifest.xml to add a android:name attribute with the value of .MyAuthApplication as below

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.offlineprogrammer.loginwithamazon"> <application android:name=".MyAuthApplication" ....

• Login here using your Amazon developer account to create a Security Profile

• Enter a Security Profile Name, a Security Profile Description, and a Consent Privacy Notice URL then click Save
• Take not of the client ID & Client secret

• Run the command below to configure the Auth Category

amplify add auth 

• Set the details below when prompted

Do you want to use the default authentication and security configuration? Default configuration with Social Provider (Federation) Warning: you will not be able to edit these selections. 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 do you want to use? myauthapplication7ae1f03e-7ae1f03e Enter your redirect signin URI: myauthapp://callback/ ? Do you want to add another redirect signin URI No Enter your redirect signout URI: myauthapp://signout/ ? Do you want to add another redirect signout URI No Select the social providers you want to configure for your user pool: Login With Amazon You've opted to allow users to authenticate via Amazon. If you haven't already, you'll need to create an Amazon App ID. Enter your Amazon App ID for your OAuth flow: amzn1.application-oa2-client.88a2ae52a05349d8a8027c93d9e5fc51 Enter your Amazon App Secret for your OAuth flow: b9f0fa476eea36200d8f1f304adc7711a63fa6422d22d515b50f729f33560a61 Successfully added resource myauthapplication7ae1f03e locally 

• Publish those changes by running the command below

amplify push

• Once complete it will display your UI endpoint Url as belwo

✔ All resources are updated in the cloud Hosted UI Endpoint: <https://myauthapplication7ae1f03e-7ae1f03e-amplify.auth.us-east-1.amazoncognito.com/> Test Your Hosted UI Endpoint: <https://myauthapplication7ae1f03e-7ae1f03e-amplify.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=5ig0u8445jd6v23ejt9db1ks3p&redirect_uri=myauthapp://callback/> 

• On Amazon developer portal, click on the security profile you created above and select the web Settings tab

• Choose Edit then Type your UI endpoint Url into Allowed Origins and type UI endpoint Url with the /oauth2/idpresponse endpoint into Allowed Return URLs.

• Update the AndroidManifest.xm to set the android:launchMode and intent-filter for the MainActivity as below

<activity android:name=".MainActivity" android:launchMode="singleInstance"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="myauthapp" /> </intent-filter> </activity>

• To capture the response from the sign in web UI add the method below to MainActivity

@Override protected void onNewIntent(Intent intent) { super.onNewIntent(intent); if(intent.getData() != null && "myauthapp".equals(intent.getData().getScheme())) { Amplify.Auth.handleWebUISignInResponse(intent); } } 

• Download the login button from here and add it to your Drawable folder. we are going to use both (btnlwa_gold_login.png) & (btnlwa_gold_login_pressed.png).
• Right click on Drawable folder and create a Drawable Resource File . Name it login_button_image_state.xml
• This file will define the selector for the login button as below

• Update the activity_main.xml to add the login button & progress bar as below

• Update the MainActivity.java to introduce a login method to be called when the user click on the signIn button. below is the final code of MainActivity.java

public class MainActivity extends AppCompatActivity { private static final String TAG = "MainActivity"; ImageButton login_with_amazon; TextView login_textView; ProgressBar log_in_progress; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); login_with_amazon = findViewById(R.id.login_with_amazon); login_textView = findViewById(R.id.login_textView); log_in_progress = findViewById(R.id.log_in_progress); login_with_amazon.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { log_in_progress.setVisibility(View.VISIBLE); login_with_amazon.setVisibility(View.GONE); login(); } }); } private void login() { Amplify.Auth.signInWithSocialWebUI( AuthProvider.amazon(), this, result -> { Log.i(TAG, "AuthQuickstart RESULT " + result.toString()); runOnUiThread(new Runnable() { @Override public void run() { login_textView.setText("Login is successfull"); login_with_amazon.setVisibility(View.GONE); log_in_progress.setVisibility(View.GONE); } }); }, error -> { Log.e(TAG, "AuthQuickstart ERROR " + error.toString()); } ); } @Override protected void onNewIntent(Intent intent) { super.onNewIntent(intent); if(intent.getData() != null && "myauthapp".equals(intent.getData().getScheme())) { Amplify.Auth.handleWebUISignInResponse(intent); } } } 

Check the full code on github and follow me on Twitter for more tips about #coding, #learning, #technology, #Java, #JavaScript, #Autism, #Parenting...etc.

Check my Apps on Google Play