Incorrect documentation for Amplify.configure

ershovio commented 9 months ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] 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 System: OS: Linux 6.4 Debian GNU/Linux 11 (bullseye) 11 (bullseye) CPU: (10) arm64 unknown Memory: 9.17 GB / 15.61 GB Container: Yes Shell: 5.1.4 - /bin/bash Binaries: Node: 20.9.0 - /usr/bin/node npm: 10.2.4 - /usr/bin/npm npmPackages: @ampproject/toolbox-optimizer: undefined () @aws-amplify/auth: ^6.0.5 => 6.0.5 @aws-amplify/auth/cognito: undefined () @aws-amplify/auth/cognito/server: undefined () @aws-amplify/auth/server: undefined () @aws-amplify/core: ^6.0.5 => 6.0.5 @aws-amplify/core/internals/adapter-core: undefined () @aws-amplify/core/internals/aws-client-utils: undefined () @aws-amplify/core/internals/aws-client-utils/composers: undefined () @aws-amplify/core/internals/aws-clients/cognitoIdentity: undefined () @aws-amplify/core/internals/aws-clients/pinpoint: undefined () @aws-amplify/core/internals/providers/pinpoint: undefined () @aws-amplify/core/internals/utils: undefined () @aws-amplify/core/server: undefined () @aws-amplify/ui-react: ^6.0.3 => 6.0.3 @aws-amplify/ui-react-internal: undefined () @babel/core: undefined () @babel/runtime: 7.22.5 @edge-runtime/cookies: 4.0.2 @edge-runtime/ponyfill: 2.4.1 @edge-runtime/primitives: 4.0.2 @hapi/accept: undefined () @headlessui/react: ^1.7.17 => 1.7.17 @heroicons/react: ^2.0.18 => 2.0.18 @mswjs/interceptors: undefined () @napi-rs/triples: undefined () @next/bundle-analyzer: ^14.0.3 => 14.0.3 @next/font: undefined () @next/react-dev-overlay: undefined () @nextui-org/input: ^2.1.16 => 2.1.16 @nextui-org/react: ^2.2.9 => 2.2.9 @opentelemetry/api: undefined () @segment/ajv-human-errors: undefined () @tailwindcss/forms: ^0.5.7 => 0.5.7 @tailwindcss/typography: ^0.5.10 => 0.5.10 @types/dompurify: ^3.0.5 => 3.0.5 @types/micro-cors: ^0.1.5 => 0.1.5 @types/node: 20.10.0 => 20.10.0 @types/react: 18.2.39 => 18.2.39 @types/react-dom: 18.2.17 => 18.2.17 @types/valid-url: ^1.0.7 => 1.0.7 @vercel/nft: undefined () @vercel/og: 0.5.15 acorn: undefined () amphtml-validator: undefined () anser: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () autoprefixer: ^10.4.16 => 10.4.16 babel-packages: undefined () browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () ci-info: undefined () cli-select: undefined () client-only: 0.0.1 comment-json: undefined () compression: undefined () conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () cross-spawn: undefined () crypto-browserify: undefined () css.escape: undefined () cssnano: ^6.0.1 => 6.0.1 data-uri-to-buffer: undefined () debug: undefined () devalue: undefined () domain-browser: undefined () dompurify: ^3.0.6 => 3.0.6 edge-runtime: undefined () eslint: 8.54.0 => 8.54.0 eslint-config-next: 14.0.3 => 14.0.3 eslint-config-prettier: ^9.0.0 => 9.0.0 eslint-plugin-prettier: ^5.0.1 => 5.0.1 events: undefined () find-cache-dir: undefined () find-up: undefined () framer-motion: ^10.16.5 => 10.16.5 fresh: undefined () get-orientation: undefined () glob: undefined () gray-matter: ^4.0.3 => 4.0.3 gzip-size: undefined () http-proxy: undefined () http-proxy-agent: undefined () https-browserify: undefined () https-proxy-agent: 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-runner: 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: 14.0.3 => 14.0.3 node-fetch: undefined () node-html-parser: undefined () ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () platform: undefined () postcss: ^8.4.31 => 8.4.31 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 () process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: 18.2.0 => 18.2.0 react-builtin: undefined () react-dom: 18.2.0 => 18.2.0 react-dom-builtin: undefined () react-dom-experimental-builtin: undefined () react-experimental-builtin: undefined () react-is: 18.2.0 react-markdown: ^9.0.1 => 9.0.1 react-query: ^3.39.3 => 3.39.3 react-refresh: 0.12.0 react-server-dom-turbopack-builtin: undefined () react-server-dom-turbopack-experimental-builtin: undefined () react-server-dom-webpack-builtin: undefined () react-server-dom-webpack-experimental-builtin: undefined () regenerator-runtime: 0.13.4 remark-gfm: ^4.0.0 => 4.0.0 sass-loader: undefined () scheduler-builtin: undefined () scheduler-experimental-builtin: undefined () schema-utils: undefined () semver: undefined () send: undefined () server-only: 0.0.1 setimmediate: undefined () sharp: ^0.32.6 => 0.32.6 shell-quote: undefined () source-map: undefined () stacktrace-parser: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () superstruct: undefined () tailwindcss: ^3.3.5 => 3.3.5 tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () tty-browserify: undefined () typescript: 5.3.2 => 5.3.2 ua-parser-js: undefined () unistore: undefined () util: undefined () valid-url: ^1.0.9 => 1.0.9 vm-browserify: undefined () watchpack: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () ws: undefined () zod: undefined () npmGlobalPackages: corepack: 0.20.0 create-next-app: 13.1.2 depcheck: 1.4.7 eslint: 8.52.0 npm-check-updates: 16.14.6 npm: 10.2.4 ```

Describe the bug

I set up Amplify configuration as explained here for V6: https://docs.amplify.aws/javascript/tools/libraries/configure-categories/#general-configuration

Here is my configuration:

Amplify.configure({
  Auth: {
    identityPoolId: process.env.NEXT_PUBLIC_COGNITO_IDENTITY_POOL_ID ?? "",
    region: process.env.NEXT_PUBLIC_AWS_REGION ?? "",
    userPoolId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_ID ?? "",
    userPoolWebClientId:
      process.env.NEXT_PUBLIC_COGNITO_USER_POOL_WEB_CLIENT_ID,
  },
  oauth: {
    domain: domains.cognitoDomain,
    scope: ["phone", "email", "profile", "openid"],
    redirectSignIn: `${domains.textMarkUrl}/app`,
    redirectSignOut: domains.textMarkUrl,
    clientId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_WEB_CLIENT_ID,
    responseType: "code",
  },
});

Then I run npm run build and got

root ➜ /com.docker.devenvironments.code (dev ✗) $ npm run build

> app@0.1.0 build
> next build

   Linting and checking validity of types  ..Failed to compile.

./pages/_app.tsx:63:5
Type error: Object literal may only specify known properties, and 'identityPoolId' does not exist in type 'AuthConfig'.

  61 | Amplify.configure({
  62 |   Auth: {
> 63 |     identityPoolId: process.env.NEXT_PUBLIC_COGNITO_IDENTITY_POOL_ID ?? "",
     |     ^
  64 |     region: process.env.NEXT_PUBLIC_AWS_REGION ?? "",
  65 |     userPoolId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_ID ?? "",
  66 |     userPoolWebClientId:

Also, vs code warns:

  Type '{ identityPoolId: string; region: string; userPoolId: string; userPoolWebClientId: string | undefined; }' is not assignable to type 'AuthConfig | undefined'.
  Object literal may only specify known properties, and 'identityPoolId' does not exist in type 'AuthConfig'.ts(2322)

Expected behavior

It compiles and runs

Reproduction steps

Configure aws amplify auth as described in the provided docs and run npm run build

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

nadetastic commented 9 months ago

Hi @ershovio thank you for opening this issue. I'm currently working on updating this documentation and will provide an update soon. I'll go ahead and transfer this issue over to our documentation repo as well.

nadetastic commented 9 months ago

@ershovio this change has been published and is viewable at - https://docs.amplify.aws/javascript/tools/libraries/configure-categories/#general-configuration.

Marking this issue as closed, thank you!

aws-amplify / docs