Customizing authenticator

[vipinkashyap]

I have email and phone login setup on my cognito group. The authenticator widget shows both ways of logging in email and phone.

I only want to show phone login and signup . How do i do this ? How do i customize the authenticator? This is a common use case how would you suggest i go about this ?

I dont want to disturb any cognito settings . Im mostly looking for a way to do this on the front end. Because it looks like i cant edit the aws cognito config to only allow for phone auth.

[ekjotmultani]

Hi @vipinkashyap, thank you for your question. Have you set up phone as the main log in property in the Amplify backend?. For further reference on UI customization for Authenticator, please see here.

[vipinkashyap]

Hi @ekjotmultani

This is the aws cognito config. Ive already read the documentation on authenticator and it seems like either this use case is not discussed or missed. Let me know what other information you need.

For verifying

For signup

[ekjotmultani]

Hi @vipinkashyap, thank you for the added information. Could you share your backend.ts file from your amplify app?

[vipinkashyap]

Im not using amplify for my backend this is a amplify gen1 flutter app using a custom backend. I can share my awsconfiguration with you if youd like with pii hidden.

[ekjotmultani]

Hi @vipinkashyap, I would appreciate that, it will help us investigate the issue and try to find a solution

[vipinkashyap]

Heres the config @ekjotmultani

{
  "UserAgent": "aws-amplify-cli/2.0",
  "Version": "1.0",
  "storage": {
    "plugins": {
      "awsS3StoragePlugin": {
        "bucket": "test-bucket-name",
        "region": "us-west-2"
      }
    }
  },
  "auth": {
    "plugins": {
      "awsCognitoAuthPlugin": {
        "UserAgent": "aws-amplify-cli/0.1.0",
        "Version": "0.1.0",
        "IdentityManager": {
          "Default": {}
        },
        "CredentialsProvider": {
          "CognitoIdentity": {
            "Default": {
              "PoolId": "us-west-2:*****-****-***-****-*********",
              "Region": "us-west-2"
            }
          }
        },
        "CognitoUserPool": {
          "Default": {
            "PoolId": "us-west-2_******",
            "AppClientId": "********",
            "AppClientSecret": "********",
            "Region": "us-west-2"
          }
        },
        "Auth": {
          "Default": {
            "authenticationFlowType": "USER_SRP_AUTH",
            "socialProviders": [],
            "usernameAttributes": [
              "username",
              "email",
              "phone_number"
            ],
            "signupAttributes": [
              "username",
              "name",
              "middle_name",
              "family_name",
              "email",
              "phone_number"
            ],
            "passwordProtectionSettings": {
              "passwordPolicyMinLength": 8,
              "passwordPolicyCharacters": []
            },
            "mfaConfiguration": "OPTIONAL",
            "mfaTypes": [
              "SMS",
              "TOTP"
            ],
            "verificationMechanisms": [
              "EMAIL"
            ]
          }
        },
        "S3TransferUtility": {
          "Default": {
            "Bucket": "test-bucket-name",
            "Region": "us-west-2"
          }
        }
      }
    }
  },
  "analytics": {
    "plugins": {
      "awsPinpointAnalyticsPlugin": {
        "pinpointAnalytics": {
          "appId": "**********",
          "region": "us-west-2"
        },
        "pinpointTargeting": {
          "region": "us-west-2"
        }
      }
    }
  },
  "api": {
    "plugins": {
      "awsAPIPlugin": {
        "Test API": {
          "endpointType": "GraphQL",
          "endpoint": "https://*************.appsync-api.us-west-2.amazonaws.com/graphql",
          "region": "us-west-2",
          "authorizationType": "AMAZON_COGNITO_USER_POOLS"
        }
      }
    }
  }
}

[vipinkashyap]

Hi, we need some kind of solution to this. Please let me know if this config allows for authenticator customization as needed(only restrict to phone login)

[ekjotmultani]

Hi @vipinkashyap, sorry for the delayed response, we actually did investigate this and find that there is no easy way to make this change solely on the UI side for the plug and play Authenticator component without changing the Cognito user attribute field, which as you say should not be disturbed once already set.

I will mark this as a feature request to allow for custom sign in fields on Authenticator, as we have custom sign up fields but not for sign in. If you would like to take a stab at implementing your own class for this it would be an extension of SignInFormField, however since I've already tracked this it may be better to wait for our official release of it.

If phone sign in only is a hard requirement then it may be better to implement a custom UI flow using the calls outlined here. I apologize for the disappointing answer but hopefully I can get a pr in for this feature relatively soon. Please let me know if I can help with anything else!

[vipinkashyap]

Hi @ekjotmultani ,

I think there is a provision to do this . I figured it out by mistake but it would be great if you could add it as part of documentation on customizing authenticator

You could edit the amplifyconfiguration.dart file

Post removing attributes => Authenticator updates the UI itself

Pre removing attributes

Do you think this is an acceptable solution ?

[ekjotmultani]

Hi @vipinkashyap, this does work although we don't generally recommend it since we don't want users to edit the generated files from Amplify in case it causes other errors. However, I am happy that it seems to have worked out in this case, I will still keep the feature request for customizing sign in more robustly through Authenticator UI as a result of this issue but for now this is a working solution as long as sign in is working as intended!