aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.43k stars 2.13k forks source link

credentialsProvider not a recognized member of type AuthConfig #13446

Closed jmarshall9120 closed 5 months ago

jmarshall9120 commented 5 months ago

Before opening, please confirm:

JavaScript Framework

Vue

Amplify APIs

Authentication, DataStore

Amplify Version

v6

Amplify Categories

function

Backend

Amplify Gen 2 (Preview)

Environment information

``` # Put output below this line System: OS: Windows 11 10.0.22631 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 13.71 GB / 31.74 GB Binaries: Node: 20.12.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 125.0.6422.113 Edge: Chromium (123.0.2420.97) Internet Explorer: 11.0.22621.3527 npmPackages: %name%: 0.1.0 @aws-amplify/backend: ^1.0.2 => 1.0.2 @aws-amplify/backend-cli: ^1.0.3 => 1.0.3 @aws-sdk/client-cognito-identity-provider: ^3.577.0 => 3.577.0 @aws-sdk/client-sso-oidc: 3.575.0 => 3.575.0 (3.576.0, 3.577.0, 3.338.0) @aws-sdk/types: 3.575.0 => 3.575.0 (3.387.0, 3.398.0, 3.433.0, 3.338.0, 3.577.0) @mdi/font: ^7.4.47 => 7.4.47 @pinia/nuxt: ^0.5.1 => 0.5.1 @types/aws-lambda: ^8.10.138 => 8.10.138 (8.10.137) @unocss/reset: 0.60.2 => 0.60.2 aws-amplify: ^6.3.1 => 6.3.1 aws-amplify/adapter-core: undefined () aws-amplify/analytics: undefined () aws-amplify/analytics/kinesis: undefined () aws-amplify/analytics/kinesis-firehose: undefined () aws-amplify/analytics/personalize: undefined () aws-amplify/analytics/pinpoint: undefined () aws-amplify/api: undefined () aws-amplify/api/server: undefined () aws-amplify/auth: undefined () aws-amplify/auth/cognito: undefined () aws-amplify/auth/cognito/server: undefined () aws-amplify/auth/enable-oauth-listener: undefined () aws-amplify/auth/server: undefined () aws-amplify/data: undefined () aws-amplify/data/server: undefined () aws-amplify/datastore: undefined () aws-amplify/in-app-messaging: undefined () aws-amplify/in-app-messaging/pinpoint: undefined () aws-amplify/push-notifications: undefined () aws-amplify/push-notifications/pinpoint: undefined () aws-amplify/storage: undefined () aws-amplify/storage/s3: undefined () aws-amplify/storage/s3/server: undefined () aws-amplify/storage/server: undefined () aws-amplify/utils: undefined () aws-cdk: ^2.141.0 => 2.141.0 aws-cdk-lib: ^2.141.0 => 2.141.0 bin: 1.0.0 constructs: ^10.3.0 => 10.3.0 dist: 1.0.0 esbuild: ^0.21.2 => 0.21.2 (0.20.2) floating-vue: 5.2.2 => 5.2.2 nuxt: ^3.11.2 => 3.11.2 pinia: ^2.1.7 => 2.1.7 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 terser: 5.31.0 => 5.31.0 tsx: ^4.10.2 => 4.10.2 typescript: ^5.4.5 => 5.4.5 (4.4.4, 4.9.5) unocss: 0.60.2 => 0.60.2 vite-plugin-vuetify: ^2.0.3 => 2.0.3 vue: ^3.4.27 => 3.4.27 vue-router: ^4.3.2 => 4.3.2 vuetify: ^3.6.5 => 3.6.5 npmGlobalPackages: yarn: 1.22.22 ```

Describe the bug

Following example here: https://docs.amplify.aws/vue/build-a-backend/functions/examples/create-user-profile-record/

The below line raises a ts error: image

image

The inheritance scheme for AuthConfig is documented here: https://aws-amplify.github.io/amplify-js/api/types/aws_amplify.adapter_core._Reference_Types_.AuthConfig.html

The inheritance for member method getCredentialsAndIdentityId is here: https://aws-amplify.github.io/amplify-js/api/interfaces/aws_amplify.auth.CredentialsAndIdentityIdProvider.html#getCredentialsAndIdentityId

TLDR: It looks to me like the lambda function is set to look for a member variable credentialsProvider that has been monkey patched onto an AuthConfig object. Which of course breaks type script.

Here's a quick diagram of the inheritance scheme: image

Expected behavior

TS should compile just fine when following example.

Possible solutions:

  1. Add member credentialsProvider:CredentialsAndIdentityIdProvider to interface AuthIdentityPoolConfig
  2. Add member credentialsProvider:CredentialsAndIdentityIdProvider to interface AuthUserPoolConfig
  3. Add member credentialsProvider:CredentialsAndIdentityIdProvider to interface AuthUserPoolAndIdentityPoolConfig
  4. If none of those interfaces are for the correct auth strategy intended for 'iam' auth, then add a new type to CognitoProviderConfig that implements credentialsProvider:CredentialsAndIdentityIdProvider *https://aws-amplify.github.io/amplify-js/api/types/aws_amplify.adapter_core._Reference_Types_.CognitoProviderConfig.html

Reproduction steps

Implement example handler shown in the link in TS https://docs.amplify.aws/vue/build-a-backend/functions/examples/create-user-profile-record/

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

jmarshall9120 commented 5 months ago

Alright, this is not a bug. Somehow, when I was searching through the docs last night I didn't come up with interface, LibraryAuthOptions which holds a reference to interface CredentialsAndIdentityIdProvider.

There is a bit of a tricky wicket here, where Amplify.configure takes two arguments - resourceConfig and libraryOptions: image

ResourceConfig, and LibraryOptions contain pretty much the same structure, but their members have different structures.

This is further confused by the fact, that in an app you usually call Amplify.configure(amplify_outputs) which does not use the libraryOptions parameter. It's literally the difference between this:

{
    'API' : {...},
    'Auth' : {...}
}

and

{
    'API' : {...}
},{
    'Auth: {...}
}

Hopefully this ticket will at least help someone else, because I spent way to much time mucking this up! #skillissue ;)