configuring oidc breaks authenricator component

[dataminion]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React, Angular

Which UI component?

Authenticator

How is your app built?

vit/webpack

What browsers are you seeing the problem on?

Chrome, Safari

Which region are you seeing the problem in?

us east 2

Please describe your bug.

I started with first the angular then switched to the react quickstart template repositories in an attempt to trouble shoot this issue. I would set up the basics then when I added the oidc provider to the backend everything deploys and succeeds but the page fails to render. The console then throws the following error:

Missing onError handler for invocation 'authenticator.setup.getConfig:invocation[0]', error was 'TypeError: undefined is not an object (evaluating 'provider.toString')'. Stacktrace was '@aws-amplify_ui-angular.js:12987:120'

I have narrowed the issue down to the authenticator component as when it alone is removed from the html the page loads as expected. I want to be very clear the oidc provider is properly configured on both ends.

I have been able to use the functions from the documentation:

await signInWithRedirect({
        provider: {
          custom: 'MicrosoftEntraID'
        }
});

const attr: any = await fetchUserAttributes();

await signOut();

to redirect to my provider then come back to the page, proving that the provider is properly configured. This puts me in the frustrating position of having to manually handle the auth state.

What's the expected behaviour?

Honestly it was pretty clear from the documentation that oidc isn't fully implemented in the UI so I don't expect my ideal behavior for example cognito auto generates the following login landing page

but my basic expectation was that the authenticator component would function as normal and that I would be able to add a login with sso button using the footer slot

Help us reproduce the bug!

1. Follow either the react or the angular quickstarts.
2. Stop after authentication has been activated added.
3. Commit code so that amplify deployments are occuring
4. Configure your OpenID compatible provider.
5. Add client-id and client-secret from your provider to amplify secrets manager through the console as well as through the amplify cli.
6. In Auth backend configure an oidc external provider.
7. Once the sandbox processes your changes successfully you should see the bug locally
8. You can commit and push the code to see the bug live in your production environment

Code Snippet

export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      oidc: [
        {
          name: 'MicrosoftEntraID',
          attributeRequestMethod:'GET',
          clientId: secret('client-id'),
          clientSecret: secret('client-secret'),
          identifiers: ['company.com'],
          issuerUrl: 'https://login.microsoftonline.com/<tenant>c/v2.0',
          scopes: ["openid", "email", "profile"],
        },
      ],
      logoutUrls: ['http://localhost:4200', 'https://app.productbycompany.com', 'https://dev.productbycompany.com'],
      callbackUrls: ['http://localhost:4200', 'https://app.productbycompany.com', 'https://dev.productbycompany.com'],
    },
  },
});

<amplify-authenticator>
    <ng-template amplifySlot="sign-in-footer">
        <div style="text-align: center">
          <button
            (click)="sso()"
            class="amplify-button amplify-field-group__control"
            data-fullwidth="false"
            data-size="small"
            data-variation="link"
            type="button"
            style="font-weight: normal"
          >
            Login With SSO
          </button>
        </div>
      </ng-template>
    <ng-template
      amplifySlot="authenticated"
      let-user="user"
      let-signOut="signOut"
    >
      <h1>Hello {{user?.signInDetails?.loginId}}'s todos</h1>
      <app-todos></app-todos>
      <button (click)="signOut()">Sign Out</button>
    </ng-template>
  </amplify-authenticator>

Console log output

Missing onError handler for invocation 'authenticator.setup.getConfig:invocation[0]', error was 'TypeError: undefined is not an object (evaluating 'provider.toString')'. Stacktrace was '@aws-amplify_ui-angular.js:12987:120'

Additional information and screenshots

no additional packages have been added outside of what exists in the tutorials for the amplify documentation

[reesscot]

@dataminion Can you please provide your amplify_outputs.json file with any sensitive values redacted?

[zchenwei]

Identify the root cause is that the Amplify.configure does not map the identity provider correctly and returns an undefined. Transfer the issue to JS team for further investigation.

[dataminion]

Looks like you guys don't need this anymore but here are the amplify_outputs

{
  "auth": {
    "user_pool_id": "us-east-2_*******",
    "aws_region": "us-east-2",
    "user_pool_client_id": "***********",
    "identity_pool_id": "us-east-2:****************",
    "standard_required_attributes": [
      "email"
    ],
    "username_attributes": [
      "email"
    ],
    "user_verification_types": [
      "email"
    ],
    "password_policy": {
      "min_length": 8,
      "require_numbers": true,
      "require_lowercase": true,
      "require_uppercase": true,
      "require_symbols": true
    },
    "oauth": {
      "identity_providers": [
        "****************"
      ],
      "redirect_sign_in_uri": [
        "http://localhost:4200",
        "********************",
        "********************"
      ],
      "redirect_sign_out_uri": [
        "http://localhost:4200",
        "*********************",
        "*********************"
      ],
      "response_type": "code",
      "scopes": [
        "phone",
        "email",
        "openid",
        "profile",
        "aws.cognito.signin.user.admin"
      ],
      "domain": "****************.auth.us-east-2.amazoncognito.com"
    },
    "unauthenticated_identities_enabled": true
  },
  "data": {
    "url": "https://************.appsync-api.us-east-2.amazonaws.com/graphql",
    "aws_region": "us-east-2",
    "default_authorization_type": "AMAZON_COGNITO_USER_POOLS",
    "authorization_types": [
      "AWS_IAM"
    ],
    "model_introspection": {
      "version": 1,
      "models": {
        "Todo": {
          "name": "Todo",
          "fields": {
            "id": {
              "name": "id",
              "isArray": false,
              "type": "ID",
              "isRequired": true,
              "attributes": []
            },
            "content": {
              "name": "content",
              "isArray": false,
              "type": "String",
              "isRequired": false,
              "attributes": []
            },
            "createdAt": {
              "name": "createdAt",
              "isArray": false,
              "type": "AWSDateTime",
              "isRequired": false,
              "attributes": [],
              "isReadOnly": true
            },
            "updatedAt": {
              "name": "updatedAt",
              "isArray": false,
              "type": "AWSDateTime",
              "isRequired": false,
              "attributes": [],
              "isReadOnly": true
            }
          },
          "syncable": true,
          "pluralName": "Todos",
          "attributes": [
            {
              "type": "model",
              "properties": {}
            },
            {
              "type": "auth",
              "properties": {
                "rules": [
                  {
                    "provider": "userPools",
                    "ownerField": "owner",
                    "allow": "owner",
                    "identityClaim": "cognito:username",
                    "operations": [
                      "create",
                      "update",
                      "delete",
                      "read"
                    ]
                  }
                ]
              }
            }
          ],
          "primaryKeyInfo": {
            "isCustomPrimaryKey": false,
            "primaryKeyFieldName": "id",
            "sortKeyFieldNames": []
          }
        }
      },
      "enums": {},
      "nonModels": {}
    }
  },
  "version": "1"
}

[ashika112]

@dataminion we are working on a fix for this one once the fix is merged in it should not cause any issues.

[ashika112]

Hi, Thanks for patience. We have made a fix in aws-amplify@6.3.6 (latest). Please update and let us know if there is any concerns.

[dataminion]

I have tested the fix and can confirm that it fixes the issue.