question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AmplifyAuthenticator UI Component automatically displays "Sign in with AWS" button after configuring federated sign in

See original GitHub issue

Describe the bug Configuring federated sign in using the amplify cli makes the AmplifyAuthenticator UI Component automatically display a “Sign in with AWS” button in the UI.

To Reproduce

  1. Configure federated sign in using the amplify cli.
  2. Use the AmplifyAuthenticator UI Component.

Expected behavior The ability to remove or toggle the “Sign in with AWS” button from being displayed. Personally, I would prefer it not to appear by default.

Code Snippet

<AmplifyAuthenticator usernameAlias="email" style={{ textAlign: 'center' }}>
            <AmplifyForgotPassword
              usernameAlias="email"
              slot="forgot-password"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
              ]}></AmplifyForgotPassword>
            <AmplifySignIn
              usernameAlias="email"
              slot="sign-in"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
                {
                  type: "password",
                  required: true,
                }
              ]}></AmplifySignIn>
            <AmplifySignUp
              usernameAlias="email"
              slot="sign-up"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
                {
                  type: "password",
                  required: true,
                },
                {
                  type: "phone_number",
                  required: false,
                },
                {
                  type: "locale",
                  value: this.state.lang,
                  inputProps: {
                    type: 'hidden',
                  }
                }
              ]}></AmplifySignUp>
            <div>
              {I18n.get("WAIT_REDIRECTION")}
              <AmplifySignOut />
            </div>
          </AmplifyAuthenticator>

Screenshots The “Sign in with AWS” button appears automatically. It redirects to the hosted UI. image

What is Configured?

  • Which resources do you have configured?
const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_xXGwNABGT",
    "aws_user_pools_web_client_id": "7p0ujr64uoflelsulef9tjhrmo",
    "oauth": {
        "domain": "liamidp-liamidp.auth.us-east-1.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "https://d2xgofpejqjfcr.cloudfront.net/",
        "redirectSignOut": "https://d2xgofpejqjfcr.cloudfront.net/logout",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS",
    "aws_content_delivery_bucket": "broker-20200504180301-hostingbucket-liamidp",
    "aws_content_delivery_bucket_region": "us-east-1",
    "aws_content_delivery_url": "https://d2xgofpejqjfcr.cloudfront.net",
    "aws_cloud_logic_custom": [
        {
            "name": "amplifyIdentityBrokerApi",
            "endpoint": "https://80gdodby7c.execute-api.us-east-1.amazonaws.com/liamidp",
            "region": "us-east-1"
        }
    ],
    "aws_dynamodb_all_tables_region": "us-east-1",
    "aws_dynamodb_table_schemas": [
        {
            "tableName": "amplifyIdentityBrokerCodes-liamidp",
            "region": "us-east-1"
        },
        {
            "tableName": "amplifyIdentityBrokerClients-liamidp",
            "region": "us-east-1"
        }
    ]
};
Environment
  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 71.31 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.18.0 - /usr/local/bin/node
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Firefox: 68.8.0
    Safari: 13.1.2
  npmPackages:
    @aws-amplify/ui-react: ^0.2.15 => 0.2.13 
    @testing-library/jest-dom: ^5.11.3 => 5.11.0 
    @testing-library/react: ^10.4.8 => 10.4.6 
    @testing-library/user-event: ^12.1.1 => 12.0.11 
    aws-amplify: ^3.0.24 => 3.0.22 
    axios: ^0.19.2 => 0.19.2 
    jwt-decode: ^2.2.0 => 2.2.0 
    react: ^16.13.1 => 16.13.1 
    react-app-rewired: ^2.1.6 => 2.1.6 
    react-dom: ^16.13.1 => 16.13.1 
    react-router-dom: ^5.2.0 => 5.2.0 
    react-scripts: 3.4.3 => 3.4.1 
  npmGlobalPackages:
    @aws-amplify/cli: 4.27.2
    ask-cli: 2.13.0
    nodemon: 2.0.4
    npm: 6.14.8
    serve: 11.3.2
    serverless: 1.73.1

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:5
  • Comments:13 (2 by maintainers)

github_iconTop GitHub Comments

8reactions
xavierraffincommented, Sep 23, 2020

It works. This remove the label:

<AmplifySignIn slot="sign-in">
  <div slot="federated-buttons"></div>
</AmplifySignIn>

This issue can be closed

2reactions
andriworldcommented, Sep 8, 2020

Along the lines of @xavierraffin’s suggestion, since you’re adding slots, I would like to be able to add HTML text: “By creating an account, I agree to the Terms and Conditions” with hyperlink.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Authenticator - React Native - AWS Amplify Docs
Authenticator UI component - React Native - AWS Amplify Docs. ... section on top of your app, and a sign-out button is displayed...
Read more >
Amplify UI's new Authenticator component makes it easy to ...
For this post, we are going to set up login mechanisms to be Email, ... UI automatically detects your deployed authentication settings and ......
Read more >
The Complete Guide to User Authentication with ...
federatedSignIn () method from the Auth class from AWS Amplify. This function will render the Hosted UI that will give users the option...
Read more >
Authentication in React with AWS Cognito and Amplify
Amplify CLI setup; React app setup; A demo of AWS Cognito and Amplify ... This component contains the logic needed to sign up...
Read more >
amplify-js
Sigv4 signing and AWS auth for API Gateway and other REST endpoints. GraphQL API · AWS AppSync, Interact with your GraphQL or AWS...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found