TypeScript definition not matching: Property 'attributes' does not exist on type 'CognitoUser'

[mcanvar]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line
git:main ❯ npx envinfo --system --binaries --browsers --npmPackages --duplicates --npmGlobalPackages                                                                                              ✹

  System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
    Memory: 86.09 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 17.7.2 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.5.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0.2
    Safari: 15.5
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/ui-react: ^1.2.26 => 1.2.26
    @babel/core:  undefined ()
    @babel/runtime:  7.15.4
    @hapi/accept:  undefined ()
    @napi-rs/triples:  undefined ()
    @next/react-dev-overlay:  undefined ()
    @next/react-refresh-utils:  12.1.6
    @peculiar/webcrypto:  undefined ()
    @types/node: 17.0.34 => 17.0.34
    @types/react: 18.0.9 => 18.0.9
    @types/react-dom: 18.0.4 => 18.0.4
    @vercel/nft:  undefined ()
    abort-controller:  undefined ()
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: ^10.4.7 => 10.4.7
    aws-amplify: ^4.3.22 => 4.3.22
    babel-packages:  undefined ()
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    chalk:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    cssnano-simple:  undefined ()
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    eslint: 8.15.0 => 8.15.0
    eslint-config-next: 12.1.6 => 12.1.6
    eslint-config-prettier: ^8.5.0 => 8.5.0
    etag:  undefined ()
    events:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    formdata-node:  undefined ()
    fresh:  undefined ()
    get-orientation:  undefined ()
    glob:  undefined ()
    graphql-tag: ^2.12.6 => 2.12.6
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    https-browserify:  undefined ()
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    micromatch:  undefined ()
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: 12.1.6 => 12.1.6
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    path-browserify:  undefined ()
    postcss: ^8.4.14 => 8.4.14 (8.4.5)
    postcss-flexbugs-fixes:  undefined ()
    postcss-modules-extract-imports:  undefined ()
    postcss-modules-local-by-default:  undefined ()
    postcss-modules-scope:  undefined ()
    postcss-modules-values:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-safe-parser:  undefined ()
    postcss-scss:  undefined ()
    postcss-value-parser:  undefined ()
    prettier: 2.6.2 => 2.6.2
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: 18.1.0 => 18.1.0 (17.0.2)
    react-dom: 18.1.0 => 18.1.0
    react-hook-form: ^7.31.2 => 7.31.2
    react-is:  17.0.2
    react-refresh:  0.12.0
    react-server-dom-webpack:  undefined ()
    regenerator-runtime:  0.13.4
    sass-loader:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    setimmediate:  undefined ()
    source-map:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    tailwindcss: ^3.0.24 => 3.0.24
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    typescript: 4.6.4 => 4.6.4
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    use-subscription:  undefined ()
    util:  undefined ()
    uuid:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-streams-polyfill:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
  npmGlobalPackages:
    @aws-amplify/cli: 8.2.0
    npm-check-updates: 12.1.0
    npm: 8.5.2
    serverless: 3.14.0

Describe the bug

@abdallahshaban557 asked me to open a new issube because the old one(#4927) closed I guess.

For example we set the signed in user from a context by using Auth.currentAuthenticatedUser() and then set the user on context state, when we get the user on a next page like so:

const { user } = useAuth() // The custom context which returns an object contains type CognitoUser for user

Unfortunatelly TS turns red under attributes:

<h1 className="text-3xl font-bold">
      Hello {user ? user.attribute.email : "world!"}!
</h1>

TS2339: Property 'attributes' does not exist on type 'CognitoUser'.

Expected behavior

TS shouldn't throw error, type should be corrected

Reproduction steps

Code Snippet

// Put your code below this line.
// My AuthContext custom context file

interface AuthContextType {
  user: CognitoUser | null
  setUser: Dispatch<SetStateAction<CognitoUser | null>>
}
const AuthContext = createContext<AuthContextType>({} as AuthContextType)

const AuthContextProvider: Function = ({ children }: Props): ReactElement => {
  const [user, setUser] = useState<CognitoUser | null>(null)

  const checkUser = async () => {
    try {
      const amplifyUser = await Auth.currentAuthenticatedUser()

      if (amplifyUser) setUser(amplifyUser)
    } catch (e) {
      setUser(null)
      console.error("No signed in user: ", e)
    }
  }

// ...

Log output

// Put your logs below this line

/Users/mca/repos/work/my-blog/src/pages/index.tsx
Error:(17, 30) TS2339: Property 'attributes' does not exist on type 'CognitoUser'.

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

[abdallahshaban557]

Hi @mcanvar , appreciate you submitting this issue, with the great level of details to relocate it. Our team will investigate this and get back to you!

[mcanvar]

Thank you for your help @abdallahshaban557

[elorzafe]

@mcanvar

This way you can have type support when reading user attributes, Auth.userAttributes(...) returns an Array of CognitoUserAttribute

async function showUserInfo() {
    const user = await Auth.currentAuthenticatedUser();
    const userAttributes = await Auth.userAttributes(user); // CognitoUserAttribute[] type
  }

[mcanvar]

Thanks @elorzafe, I know the userAttributes method, but as you can see from the mentined old task the possible problem here is not lock of getting them.

[elorzafe]

@mcanvar I didnt follow, you mean getting those statically without a method (async)

[soruban]

@elorzafe Facing a similar problem, the issue is that from the linked thread:
#4927

"currentAuthenticatedUser" returns a "CognitoUser" which is missing the public field "attributes" in its type definition, the following should be valid:

 const user = await Auth.currentAuthenticatedUser();
 console.log(user.attributes)

[TheTimeWalker]

Maybe something to note: As I have noticed, when any of the signIn or confirmSignIn functions is used, the object returned from the response is one without attributes. Only if you use currentAuthenticatedUser you get an object with attributes.

While I'm not sure if this is intentional or not, it could explain why the typing is missing the attributes as it isn't always included in successful responses.

[olsommer]

My workaround for username + attributes is:
import { AmplifyUser } from '@aws-amplify/ui';

[cbou]

I have another workaround. I'm not sure if it's a good Idea ...

import { CognitoUser } from "amazon-cognito-identity-js";
export type LabCampusUser = CognitoUser & {
  attributes: { [key: string]: string };
};

[jimblanc]

We have published an RFC on our plan for improving TypeScript support in Amplify JS & would love to get your feedback & suggestions!

RFC: Amplify JS TypeScript Improvements

[cwomack]

The developer preview for v6 of Amplify has officially been released with improvements to TypeScript support and much more! Please check out our announcement and updated documentation to see what has changed.

This issue should be resolved within the dev preview and upcoming General Availability for Amplify v6, but let us know with a comment if there are further issues.

[cwomack]

With the release of the latest major version of Amplify (aws-amplify@>6), this issue should now be resolved and we highly recommend updating to the most recent version. Please refer to our release announcement, migration guide, and documentation for more information.