Customize drop-in UI from AWSMobileClient

[phantom-j]

Hi, My application is user has to sign-up and sign-in using my cognito userpool ,later i am giving s3 and aws services .I did initialization using awsconfiguration.json ,after i am trying to call signin-UI ,it's failing Which AWS Services are you utilizing? cognito userpools,federated identities,s3,iot Provide code snippets (if applicable) this is my main activity code

    public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Log.i("userState", "Code started");

        AWSMobileClient.getInstance().initialize(getApplicationContext(), new Callback<UserStateDetails>() {

                    @Override
                    public void onResult(UserStateDetails userStateDetails) {
                        Log.i("INIT", "onResult: " + userStateDetails.getUserState());
                       SignInUI signin = (SignInUI) AWSMobileClient.getInstance().getClient(MainActivity.this,SignInUI.class);
                        signin.login(MainActivity.this,MainActivity.class).execute();
                    }
                    @Override
                    public void onError(Exception e) {
                        Log.e("INIT", "Initialization error.", e);
                    }
                }
        );
    }
 }

activity layout is not changing ,showing helloworld only,this is the output i got

  2019-01-02 16:03:01.284 27920-27987/com.example.aura.app14 D/AWSMobileClient: Using the       SignInProviderConfig from `awsconfiguration.json`.
   2019-01-02 16:03:01.289 2936-2978/? I/ActivityManager: Start proc    27989:com.android.printspooler/u0a133 for service   com.android.printspooler/.model.PrintSpoolerService
2019-01-02 16:03:01.332 27920-28004/com.example.aura.app14 D/OpenGLRenderer: HWUI GL Pipeline
2019-01-02 16:03:01.390 27920-28004/com.example.aura.app14 I/Adreno: QUALCOMM build                   : 368094a, I26dffed9a4
    Build Date                       : 12/03/17
    OpenGL ES Shader Compiler Version: EV031.22.00.01
    Local Branch                     : 
    Remote Branch                    : quic/gfx-adreno.lnx.1.9.r3-rel
    Remote Branch                    : NONE
    Reconstruct Branch               : NOTHING
2019-01-02 16:03:01.406 27920-28004/com.example.aura.app14 I/Adreno: PFP: 0x005ff087, ME: 0x005ff063
2019-01-02 16:03:01.409 27920-28004/com.example.aura.app14 I/OpenGLRenderer: Initialized EGL, version 1.4
2019-01-02 16:03:01.410 27920-28004/com.example.aura.app14 D/OpenGLRenderer: Swap behavior 2
2019-01-02 16:03:01.449 27920-27987/com.example.aura.app14 D/CognitoCachingCredentialsProvider: Loading credentials from SharedPreferences
2019-01-02 16:03:01.450 27920-27987/com.example.aura.app14 D/CognitoCachingCredentialsProvider: No valid credentials found in SharedPreferences
2019-01-02 16:03:01.545 27920-27987/com.example.aura.app14 D/AWSMobileClient: Inspecting user state details
2019-01-02 16:03:01.545 27920-27987/com.example.aura.app14 I/INIT: onResult: SIGNED_OUT
2019-01-02 16:03:01.546 27920-27987/com.example.aura.app14 D/AWSMobileClient: Retrieving the client instance for class: class com.amazonaws.mobile.auth.ui.SignInUI
2019-01-02 16:03:01.548 27920-27987/com.example.aura.app14 D/SignInUI: Initializing SignInUI.
2019-01-02 16:03:01.548 27920-27987/com.example.aura.app14 D/AWSMobileClient: Created the new client: com.amazonaws.mobile.auth.ui.SignInUI@9d7ab8c
2019-01-02 16:03:01.551 27920-27987/com.example.aura.app14 D/SignInUI: Initiating the SignIn flow.
2019-01-02 16:03:01.554 27920-27987/com.example.aura.app14 E/SignInUI: Error occurred in sign-in 
    java.lang.NullPointerException: Attempt to invoke direct method 'com.amazonaws.auth.CognitoCachingCredentialsProvider com.amazonaws.mobile.auth.core.IdentityManager$AWSCredentialsProviderHolder.getUnderlyingProvider()' on a null object reference
        at com.amazonaws.mobile.auth.core.IdentityManager$AWSCredentialsProviderHolder.access$300(IdentityManager.java:82)
        at com.amazonaws.mobile.auth.core.IdentityManager.isUserSignedIn(IdentityManager.java:638)
        at com.amazonaws.mobile.auth.ui.SignInUI.loginWithBuilder(SignInUI.java:123)
        at com.amazonaws.mobile.auth.ui.SignInUI.access$400(SignInUI.java:36)
        at com.amazonaws.mobile.auth.ui.SignInUI$LoginBuilder.execute(SignInUI.java:181)
        at com.example.aura.app14.MainActivity$1.onResult(MainActivity.java:29)
        at com.example.aura.app14.MainActivity$1.onResult(MainActivity.java:22)
        at com.amazonaws.mobile.client.internal.InternalCallback.call(InternalCallback.java:75)
        at com.amazonaws.mobile.client.internal.InternalCallback.onResult(InternalCallback.java:62)
        at com.amazonaws.mobile.client.AWSMobileClient$2.run(AWSMobileClient.java:424)
        at com.amazonaws.mobile.client.internal.InternalCallback$1.run(InternalCallback.java:101)
        at java.lang.Thread.run(Thread.java:764)
  2019-01-02 16:03:01.574 25464-25583/? D/ClClient: Not sending keepalive.  Current connection   state=STOPPED

Environment(please complete the following information):

• SDK Version: 2.8

Device Information (please complete the following information):

• Device: moto g6
• Android Version: oreo

Do i have to create new activity for signin UI? Give me some latest code snippets.Examples are working but those are deprecated and documentation is also not good.

[minbi]

Hi @warlock-jay ,

We don't support mixing the AWSMobileClient usage with direct usage of SignInUI. To show the UI, please use AWSMobileClient.showSignIn()

        AWSMobileClient.getInstance().showSignIn(MainActivity.this, new Callback<UserStateDetails>() {
            @Override
            public void onResult(UserStateDetails userStateDetails) {
                Log.d(TAG, "onResult: signIn complete");
            }

            @Override
            public void onError(Exception e) {
                Log.e(TAG, "onError: ", e);
            }
        });

[phantom-j]

Hi @minbi Code is working but how to do customize it, 1)the UI showing fields my userpool dont have in Signup 2)it's showing phone number in signin,but my pool only supports username or email 3)email is must for my pool it's not showing error if it's empty 4)it's not showing pop up when password didn't match required format in forgot password

can we make changes or do i have to design own UI and UX?

[minbi]

1, 2, 3) We don't currently support customization of the signup screen. We will take your request into consideration and post here when we have a solution. 4) The password is mainly validated by the service. So, the operation should fail after submit. If not, check the Cognito console for password requirements.

At this point if you need to move forward, you may fork our SDK, or design your own UI/UX. The documentation shows how each of the calls are made, so you can initiate the operation through your own UI documentation here

[skc18]

Hey, I'm using Android to call showSignUp exactly like the code mentioned by @minbi. However, I keep on receiving a blank UI, nothing show up. A transition to a new activity does show up. Anyone know how to solve it?

[jcarta]

This worked for me...

// initialize login screen using AWS Drop-In Auth UI
    AWSMobileClient.getInstance().initialize(getApplicationContext(), new Callback<UserStateDetails>() {

        @Override
        public void onResult(UserStateDetails userStateDetails) {
            Log.i("INIT", "onResult: " + userStateDetails.getUserState());
            showSignIn();
        }

        @Override
        public void onError(Exception e) {
            Log.e("INIT", "Initialization error.", e);
        }
    });

Where, showSignIn() is the what minbi posted above.

[jeryini]

1, 2, 3) We don't currently support customization of the signup screen. We will take your request into consideration and post here when we have a solution. 4) The password is mainly validated by the service. So, the operation should fail after submit. If not, check the Cognito console for password requirements.

At this point if you need to move forward, you may fork our SDK, or design your own UI/UX. The documentation shows how each of the calls are made, so you can initiate the operation through your own UI documentation here

I have found section about Working with API, but otherwise I would like to point out that unable to customise signup screen makes it completely worthless imho.

[mattcreaser]

Amplify now offers an Authenticator connected component that includes customization of signup fields and other options. Using Authenticator with Amplify is the recommended way to get a drop-in UI for your Cognito authentication flow.