search

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.41k stars 2.11k forks source link

Federated Sign-in - App Sync list query Auth Error #13404

Closed khlling closed 3 months ago

khlling commented 3 months ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication, GraphQL API

Amplify Version

v6

Amplify Categories

No response

Backend

Amplify CLI

Environment information

``` System: OS: macOS 14.4.1 CPU: (10) arm64 Apple M1 Max Memory: 1.88 GB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.1.0 - /opt/homebrew/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 10.7.0 - /opt/homebrew/bin/npm Browsers: Chrome: 124.0.6367.208 Safari: 17.4.1 npmPackages: @ampproject/toolbox-optimizer: undefined () @aws-amplify/adapter-nextjs: ^1.1.8 => 1.1.8 @aws-amplify/adapter-nextjs/api: undefined () @aws-amplify/adapter-nextjs/data: undefined () @babel/core: undefined () @babel/plugin-proposal-private-property-in-object: ^7.21.11 => 7.21.11 @babel/runtime: 7.22.5 @edge-runtime/cookies: 4.1.1 @edge-runtime/ponyfill: 2.4.2 @edge-runtime/primitives: 4.1.0 @emotion/cache: ^11.11.0 => 11.11.0 @emotion/react: ^11.4.1 => 11.11.4 @emotion/server: ^11.11.0 => 11.11.0 @emotion/styled: ^11.3.0 => 11.11.5 @hapi/accept: undefined () @mswjs/interceptors: undefined () @mui/icons-material: ^5.0.3 => 5.15.18 @mui/material: ^5.0.3 => 5.15.18 @mui/material-nextjs: ^5.15.11 => 5.15.11 @mui/x-date-pickers: ^6.10.0 => 6.19.12 @napi-rs/triples: undefined () @next/font: undefined () @opentelemetry/api: undefined () @testing-library/jest-dom: ^5.11.4 => 5.17.0 @testing-library/react: ^11.1.0 => 11.2.7 @testing-library/user-event: ^12.1.10 => 12.8.3 @toggled-apps/today-types: ^0.11.40 => 0.11.40 @types/jest: ^27.0.2 => 27.5.2 (29.5.12) @types/mui-datatables: ^4.3.10 => 4.3.12 @types/node: ^16.10.3 => 16.18.97 (20.12.12) @types/react: ^18.2.38 => 18.3.2 @types/react-dom: ^18.2.17 => 18.3.0 @types/react-slick: ^0.23.13 => 0.23.13 @uiw/react-markdown-editor: ^5.13.1 => 5.13.1 @vercel/nft: undefined () @vercel/og: 0.6.2 acorn: undefined () amphtml-validator: undefined () anser: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: ^5.3.6 => 5.3.18 babel-packages: undefined () browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () ci-info: undefined () cli-select: undefined () client-only: 0.0.1 commander: 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 () css.escape: undefined () data-uri-to-buffer: undefined () dayjs: ^1.11.9 => 1.11.11 debug: undefined () devalue: undefined () domain-browser: undefined () edge-runtime: undefined () eslint: 8.57.0 => 8.57.0 eslint-config-next: ^14.2.3 => 14.2.3 events: undefined () find-cache-dir: undefined () find-up: undefined () firebase: ^9.6.0 => 9.23.0 firebase/analytics: undefined () firebase/app: undefined () firebase/app-check: undefined () firebase/auth: undefined () firebase/auth/cordova: undefined () firebase/auth/react-native: undefined () firebase/compat: undefined () firebase/compat/analytics: undefined () firebase/compat/app: undefined () firebase/compat/app-check: undefined () firebase/compat/auth: undefined () firebase/compat/database: undefined () firebase/compat/firestore: undefined () firebase/compat/functions: undefined () firebase/compat/installations: undefined () firebase/compat/messaging: undefined () firebase/compat/performance: undefined () firebase/compat/remote-config: undefined () firebase/compat/storage: undefined () firebase/database: undefined () firebase/firestore: undefined () firebase/firestore/lite: undefined () firebase/functions: undefined () firebase/installations: undefined () firebase/messaging: undefined () firebase/messaging/sw: undefined () firebase/performance: undefined () firebase/remote-config: undefined () firebase/storage: undefined () fresh: undefined () get-orientation: undefined () glob: undefined () 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 () jwt-decode: ^3.1.2 => 3.1.2 loader-runner: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () markdown-to-jsx: ^7.4.7 => 7.4.7 mini-css-extract-plugin: undefined () mui-datatables: ^4.3.0 => 4.3.0 nanoid: undefined () native-url: undefined () neo-async: undefined () next: ^14.2.3 => 14.2.3 node-fetch: undefined () node-html-parser: undefined () ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () picomatch: undefined () platform: undefined () 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.3.1 (17.0.2) react-builtin: undefined () react-dom: ^18.2.0 => 18.3.1 (17.0.2) react-dom-builtin: undefined () react-dom-experimental-builtin: undefined () react-dropzone: ^14.2.3 => 14.2.3 react-experimental-builtin: undefined () react-hook-form: ^7.49.3 => 7.51.4 react-is: 18.2.0 react-player: ^2.13.0 => 2.16.0 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 () react-slick: ^0.30.2 => 0.30.2 react-webcam: ^6.0.0 => 6.0.1 react-youtube: ^10.1.0 => 10.1.0 regenerator-runtime: 0.13.4 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.33.3 => 0.33.4 shell-quote: undefined () slick-carousel: ^1.8.1 => 1.8.1 source-map: undefined () source-map08: undefined () stacktrace-parser: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () superstruct: undefined () tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () tty-browserify: undefined () typescript: ^4.4.3 => 4.9.5 ua-parser-js: undefined () unistore: undefined () util: undefined () vm-browserify: undefined () watchpack: undefined () web-vitals: ^1.0.1 => 1.1.2 () webpack: undefined () webpack-sources: undefined () webvtt-parser: ^2.2.0 => 2.2.0 ws: undefined () yarn-audit-fix: ^10.0.7 => 10.0.7 zod: undefined () npmGlobalPackages: @aws-amplify/cli: 12.10.1 aws-es-kibana: 1.0.8 commitizen: 4.2.4 cz: 1.8.2 expo-cli: 5.0.3 express-generator: 4.16.1 firebase-tools: 11.29.1 http-server: 14.1.0 jetifier: 2.0.0 lerna: 4.0.0 local-web-server: 5.1.1 n: 9.0.1 npm: 10.7.0 release-it: 14.12.5 typescript: 4.6.3 yarn: 1.22.19 ```

Describe the bug

I can sign in via Federated sign-in e.g: https://docs.amplify.aws/gen1/react/prev/build-a-backend/auth/advanced-workflows/#google-sign-in-react

  const getAWSCredentials = async (credential: string) => {
    const token = jwt(credential) as any;
    const user = {
      email: token.email,
      name: token.name
    };
    await Auth.federatedSignIn(
      'google',
      { token: credential, expires_at: token.exp },
      user
    );
  }

I have setup SSR in the page.tsx as per: https://docs.amplify.aws/gen1/javascript/prev/build-a-backend/server-side-rendering/#enabling-ssr

import { Amplify } from 'aws-amplify';
import awsExports from '../src/aws-exports';

Amplify.configure({ ...awsExports, ssr: true });

I am using client-side code rendered in the browser as I am building out admin pages and don't require server-side rendering:

  React.useEffect(() => {
    const fetchDrafts = async () => {
      try {
        const result = await API.graphql<GraphQLQuery<ListLessonsQuery>>({
          query: listLessons,
          variables: {
            filter: {
              lessonId: { attributeExists: true },
            },
          },
          authMode: GRAPHQL_AUTH_MODE.OPENID_CONNECT,
        });
        console.log("result", result)
      } catch (error) {
        console.error("Error getting draft lessons", error);
      }
    };
    fetchDrafts();
  }, []);

I am getting and error when the above list query is being called:

You must specify a federated provider Error getting list of draft lessons Error: No current user

This only occurs when I've deployed the app to hosting. It returns fine locally.

Expected behavior

Get result from list query

Reproduction steps

  1. Setup Federated sign in: https://docs.amplify.aws/gen1/react/prev/build-a-backend/auth/advanced-workflows/#google-sign-in-react
  const getAWSCredentials = async (credential: string) => {
    const token = jwt(credential) as any;
    const user = {
      email: token.email,
      name: token.name
    };
    await Auth.federatedSignIn(
      'google',
      { token: credential, expires_at: token.exp },
      user
    );
  }
  1. Setup page.tsx file in app folder. Add amplify SSR config:

I have setup SSR in the page.tsx as per: https://docs.amplify.aws/gen1/javascript/prev/build-a-backend/server-side-rendering/#enabling-ssr

import { Amplify } from 'aws-amplify';
import awsExports from '../src/aws-exports';

Amplify.configure({ ...awsExports, ssr: true });
  1. Setup list query inside page:

I am using client-side code rendered in the browser as I am building out admin pages and don't require server-side rendering:

  React.useEffect(() => {
    const fetchDrafts = async () => {
      try {
        const result = await API.graphql<GraphQLQuery<ListLessonsQuery>>({
          query: listLessons,
          variables: {
            filter: {
              lessonId: { attributeExists: true },
            },
          },
          authMode: GRAPHQL_AUTH_MODE.OPENID_CONNECT,
        });
        console.log("result", result)
      } catch (error) {
        console.error("Error getting draft lessons", error);
      }
    };
    fetchDrafts();
  }, []);
  1. See error in logs

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

khlling commented 3 months ago

I've got this working.

I forgot that I had made environment variables for the identity provider and when switching from React to NextJS I had to change the environment variable name prefix from REACTAPP to NEXTPUBLIC

I've closed this issue

cwomack commented 3 months ago

@khlling, glad you were able to unblock yourself! Was there potentially any area in the documentation that could have been improved to clear this up?