amplify-js: Error when calling currentAuthenticatedUser()

Before opening, please confirm:

JavaScript Framework

React, Next.js

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line
  System:
    OS: macOS 11.3.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 80.92 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.7.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.4.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.106
    Safari: 14.1
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/ui-components: ^1.3.1 => 1.4.0 
    @aws-amplify/ui-react: ^1.2.0 => 1.2.2 
    @babel/core:  undefined ()
    @babel/eslint-parser: ^7.12.1 => 7.14.5 
    @babel/eslint-plugin: ^7.12.13 => 7.14.5 
    @babel/plugin-transform-react-jsx: ^7.10.4 => 7.14.5 
    @babel/preset-env: ^7.10.4 => 7.14.5 
    @babel/preset-react: ^7.10.4 => 7.14.5 
    @fullstory/babel-plugin-annotate-react: ^2.1.0 => 2.1.2 
    @fullstory/browser: ^1.4.9 => 1.4.9 
    @lambdatest/node-tunnel: ^3.0.0 => 3.0.1 
    @material-ui/core: ^4.11.0 => 4.11.4 
    @material-ui/icons: ^4.9.1 => 4.11.2 
    @material-ui/lab: ^4.0.0-alpha.56 => 4.0.0-alpha.58 
    @material-ui/pickers: ^4.0.0-alpha.12 => 4.0.0-alpha.12 (3.2.2)
    @material-ui/pickers-adapter-date-fns:  undefined ()
    @material-ui/pickers-adapter-dayjs:  undefined ()
    @material-ui/pickers-adapter-luxon:  undefined ()
    @material-ui/pickers-adapter-moment:  undefined ()
    @reduxjs/toolkit: ^1.6.0 => 1.6.0 
    @reduxjs/toolkit-query:  1.0.0 
    @reduxjs/toolkit-query-react:  1.0.0 
    @sentry/fullstory: ^1.1.5 => 1.1.5 
    @sentry/nextjs: ^6.7.0 => 6.7.1 
    @testing-library/jest-dom: 4.2.4 => 4.2.4 
    @testing-library/react: ^11.2.5 => 11.2.7 
    @testing-library/react-hooks: ^5.0.3 => 5.1.3 
    @types/jest: ^26.0.5 => 26.0.23 
    @types/material-ui: ^0.21.8 => 0.21.8 
    @types/node: ^14.14.33 => 14.17.3 (15.12.2, 11.15.54)
    @types/react: ^17.0.2 => 17.0.11 
    @types/react-dom: ^17.0.2 => 17.0.7 
    @typescript-eslint/eslint-plugin: ^4.14.2 => 4.27.0 
    @typescript-eslint/parser: ^4.14.2 => 4.27.0 
    @wojtekmaj/enzyme-adapter-react-17: ^0.4.1 => 0.4.1 
    amphtml-validator:  undefined ()
    amplify-ui-components-loader:  undefined ()
    arg:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    aws-amplify: ^4.0.2 => 4.1.0 
    axios: ^0.21.1 => 0.21.1 (0.19.2)
    babel-jest: ^26.1.0 => 26.6.3 
    bfj:  undefined ()
    cacache:  undefined ()
    chromedriver: ^85.0.1 => 85.0.1 
    ci-info:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    css-loader:  undefined ()
    date-fns: ^2.21.3 => 2.22.1 (2.0.0-alpha.27)
    debug:  undefined ()
    devalue:  undefined ()
    enzyme: ^3.11.0 => 3.11.0 
    escape-string-regexp:  undefined ()
    eslint: ^7.19.0 => 7.28.0 
    eslint-config-prettier: ^7.2.0 => 7.2.0 
    eslint-plugin-babel: ^5.3.1 => 5.3.1 
    eslint-plugin-i18next: ^5.0.0 => 5.1.1 
    eslint-plugin-jest: ^24.1.3 => 24.3.6 
    eslint-plugin-jsx-a11y: ^6.4.1 => 6.4.1 
    eslint-plugin-prettier: ^3.3.1 => 3.4.0 
    eslint-plugin-react: ^7.22.0 => 7.24.0 
    eslint-plugin-react-hooks: ^4.2.0 => 4.2.0 
    eslint-plugin-react-perf: ^3.3.0 => 3.3.0 
    eslint-plugin-sonarjs: ^0.5.0 => 0.5.0 
    eslint-plugin-unicorn: ^27.0.0 => 27.0.0 
    file-loader:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    fresh:  undefined ()
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    i18next: ^19.8.9 => 19.9.2 
    ignore-loader:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    isomorphic-fetch: ^3.0.0 => 3.0.0 
    jest: ^26.1.0 => 26.6.3 
    jest-cucumber: ^3.0.0 => 3.0.1 
    jest-junit: ^11.1.0 => 11.1.0 
    jest-sonar-reporter: ^2.0.0 => 2.0.0 
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    material-table: ^1.69.1 => 1.69.3 
    md5: ^2.3.0 => 2.3.0 
    mini-css-extract-plugin:  undefined ()
    moxios: ^0.4.0 => 0.4.0 
    nanoid:  undefined ()
    neo-async:  undefined ()
    next: ^10.2.1 => 10.2.3 
    next-redux-wrapper: ^7.0.2 => 7.0.2 
    ora:  undefined ()
    postcss-flexbugs-fixes:  undefined ()
    postcss-loader:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-scss:  undefined ()
    prettier: ^2.2.1 => 2.3.1 
    prop-types: ^15.7.2 => 15.7.2 (15.6.2)
    react: ^17.0.1 => 17.0.2 
    react-dom: ^17.0.1 => 17.0.2 
    react-dropzone: ^11.3.1 => 11.3.2 
    react-feather: ^2.0.8 => 2.0.9 
    react-i18next: ^11.8.9 => 11.11.0 
    react-image: ^4.0.2 => 4.0.3 
    react-redux: ^7.2.4 => 7.2.4 
    react-test-renderer: ^16.14.0 => 16.14.0 (17.0.2)
    react-vis: ^1.11.7 => 1.11.7 
    recast:  undefined ()
    redux-devtools-extension: ^2.13.9 => 2.13.9 
    redux-saga: ^1.1.3 => 1.1.3 
    redux-saga/effects:  undefined ()
    resolve-url-loader:  undefined ()
    sass-loader:  undefined ()
    schema-utils:  undefined ()
    selenium-webdriver: ^4.0.0-alpha.7 => 4.0.0-beta.4 
    semver:  undefined ()
    send:  undefined ()
    source-map:  undefined ()
    string-hash:  undefined ()
    strip-ansi:  undefined ()
    styled-components: ^5.3.0 => 5.3.0 
    styled-components/macro:  undefined ()
    styled-components/native:  undefined ()
    styled-components/primitives:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    ts-node: ^9.1.1 => 9.1.1 
    typescript: ^4.2.3 => 4.3.3 
    unistore:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    with-typescript:  undefined ()
  npmGlobalPackages:
    @aws-amplify/cli: 4.51.2
    npm: 7.4.3

Describe the bug

AWS Support asked me to raise this here as they can’t find a solution and will escalate to you.

I am building a Typescript/Next.js/React/Redux app and I am trying to pass the user object via the props from the _app.tsx page

I get a The user is not authenticated error when calling currentAuthenticatedUser(). I am not using federated login.

Expected behavior

The user object is returned with the logged in user.

Reproduction steps

It happens as soon as you navigate to the base URL of the app.

Code Snippet

// Put your code below this line.
import React from "react"
import App, { AppInitialProps, AppContext } from "next/app"
import Amplify, { Auth, withSSRContext } from "aws-amplify"
import { CognitoUserInterface } from "@aws-amplify/ui-components"
import { AmplifyAuthenticator, AmplifySignIn } from "@aws-amplify/ui-react"
import { CssBaseline, ThemeProvider } from "@material-ui/core/"

import { config } from "../amplify.config"
import RadiateTheme from "../components/RadiateTheme"
import { wrapper } from "../state/store"

Amplify.configure({ ...config, ssr: true })

class Aura extends App<AppInitialProps> {
    public static getInitialProps = wrapper.getInitialAppProps(
        (store) =>
            async ({ Component, ctx }: AppContext) => {
                const auth = withSSRContext(ctx).Auth as typeof Auth
                const user: CognitoUserInterface =
                    await auth.currentAuthenticatedUser()
                store.dispatch({ type: "SETUSER", payload: user })
                return {
                    pageProps: {
                        ...(Component.getInitialProps
                            ? await Component.getInitialProps({
                                  ...ctx,
                                  store,
                              })
                            : {}),
                    },
                }
            }
    )
    public render() {
        const { Component, pageProps } = this.props

        return (
            <ThemeProvider theme={RadiateTheme}>
                <CssBaseline />
                <AmplifyAuthenticator>
                    <AmplifySignIn
                        hideSignUp
                        usernameAlias="email"
                        slot="sign-in"
                    />
                    <Component {...pageProps} />
                </AmplifyAuthenticator>
            </ThemeProvider>
        )
    }
}

export default wrapper.withRedux(Aura)

Log output

// Put your logs below this line

aws-exports.js

export const config = {
    aws_project_region: "eu-west-1",
    aws_cognito_identity_pool_id:
        "eu-west-1:xxx",
    aws_cognito_region: "eu-west-1",
    aws_user_pools_id: "eu-west-1_xxx",
    aws_user_pools_web_client_id: "xxx",
    oauth: {},
}

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

  1. AWS technical support couldn’t solve and I still have a ticket open with them
  2. If you hard code the user object the code works as expected

Package.json is the following

"dependencies": {
        "@aws-amplify/ui-components": "^1.3.1",
        "@aws-amplify/ui-react": "^1.2.0",
        "@fullstory/browser": "^1.4.9",
        "@material-ui/core": "^4.11.0",
        "@material-ui/icons": "^4.9.1",
        "@material-ui/lab": "^4.0.0-alpha.56",
        "@material-ui/pickers": "^4.0.0-alpha.12",
        "@reduxjs/toolkit": "^1.6.0",
        "@sentry/fullstory": "^1.1.5",
        "@sentry/nextjs": "^6.7.0",
        "@types/material-ui": "^0.21.8",
        "@types/node": "^14.14.33",
        "@types/react": "^17.0.2",
        "@types/react-dom": "^17.0.2",
        "aws-amplify": "^4.0.2",
        "axios": "^0.21.1",
        "date-fns": "^2.21.3",
        "i18next": "^19.8.9",
        "material-table": "^1.69.1",
        "md5": "^2.3.0",
        "next": "^10.2.1",
        "next-redux-wrapper": "^7.0.2",
        "prop-types": "^15.7.2",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-dropzone": "^11.3.1",
        "react-feather": "^2.0.8",
        "react-i18next": "^11.8.9",
        "react-image": "^4.0.2",
        "react-redux": "^7.2.4",
        "react-vis": "^1.11.7",
        "redux-devtools-extension": "^2.13.9",
        "redux-saga": "^1.1.3",
        "styled-components": "^5.3.0"
    },
    "devDependencies": {
        "@babel/eslint-parser": "^7.12.1",
        "@babel/eslint-plugin": "^7.12.13",
        "@babel/plugin-transform-react-jsx": "^7.10.4",
        "@babel/preset-env": "^7.10.4",
        "@babel/preset-react": "^7.10.4",
        "@fullstory/babel-plugin-annotate-react": "^2.1.0",
        "@lambdatest/node-tunnel": "^3.0.0",
        "@testing-library/jest-dom": "4.2.4",
        "@testing-library/react": "^11.2.5",
        "@testing-library/react-hooks": "^5.0.3",
        "@types/jest": "^26.0.5",
        "@typescript-eslint/eslint-plugin": "^4.14.2",
        "@typescript-eslint/parser": "^4.14.2",
        "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
        "babel-jest": "^26.1.0",
        "chromedriver": "^85.0.1",
        "enzyme": "^3.11.0",
        "eslint": "^7.19.0",
        "eslint-config-prettier": "^7.2.0",
        "eslint-plugin-babel": "^5.3.1",
        "eslint-plugin-i18next": "^5.0.0",
        "eslint-plugin-jest": "^24.1.3",
        "eslint-plugin-jsx-a11y": "^6.4.1",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-react": "^7.22.0",
        "eslint-plugin-react-hooks": "^4.2.0",
        "eslint-plugin-react-perf": "^3.3.0",
        "eslint-plugin-sonarjs": "^0.5.0",
        "eslint-plugin-unicorn": "^27.0.0",
        "isomorphic-fetch": "^3.0.0",
        "jest": "^26.1.0",
        "jest-cucumber": "^3.0.0",
        "jest-junit": "^11.1.0",
        "jest-sonar-reporter": "^2.0.0",
        "moxios": "^0.4.0",
        "prettier": "^2.2.1",
        "react-test-renderer": "^16.14.0",
        "selenium-webdriver": "^4.0.0-alpha.7",
        "ts-node": "^9.1.1",
        "typescript": "^4.2.3"
    },

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 31 (15 by maintainers)

Most upvoted comments

I’m on the East Coast of the U.S., so EST. I think you might have to go through the internal ticket you opened and set up a meeting through there or we could probably set something up faster if you want to email me at christopher.bonifacio@gmail.com 😄

+1
chrisbonifacio on Jul 13, 2021

Thanks will try this out.

I am not clear where the misconfiguration was introduced, for example, did it happen when I moved to the scoped packages.

I did get the code working in the index.tsx, returning a user, so now I’ll try and get it working in _app.tsx

This is the call that is now working in index.tsx

        const getUser = async () =>
            await Auth.currentAuthenticatedUser()
                .then((user: CognitoUserInterface) => {
                    dispatch({ type: "SETUSER", payload: user })
                })
                .catch((error) => {
                    console.log("***** ERROR *****:", error)
                })
        getUser()
+1
pgbradbury on Jul 8, 2021

@pgbradbury Apologies. My intention was not for this to be auto-closed, it would take a week of no response for the stale bot to do so. I labeled it as such more for the notification I get on my project board because I can tell just by looking at the board another comment was made on the issue since the bot removed the label. I prefer it over the email notification because I get so many from github already and I spend most of my time on here anyway.

I agree that the issue must’ve been occurring even before Redux if you were already getting that Auth has not been configured correctly error. However, I set up my reproduction app with the same Auth configuration you have, basically just used the amplify.config file you provided and everything seemed to work both client and server side.

Unless I could take a look at your project repository, it’s not obvious to me where the configuration might need to be corrected. I’ve seen some have issues with the way Amplify.configure or Auth.configure is being called and the properties set. Maybe that could be part of the problem?

This is the way I did it in _app.js

import { Amplify, Hub, withSSRContext } from "aws-amplify";
import { config } from "../amplify.config";

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

Here’s my reproduction app which has no Redux code, just the use of withSSRContext to pass each page the currently authenticated user as a prop. You just need to add the amplify.config file you shared before for it to work. I added two other pages that logs the user from props and shows whether it got the user from the client or the server.

So, the way I saw the problem was that if you’re using the Amplify sign in component, you don’t get redirected to the next view so you’re still on the same page. No request to the server was made for the user that just logged in and we’re not storing this data anywhere. What I did was use the Hub to listen for the “signIn” event and set the user locally first just so I can keep the amplify sign in component and still get my user while remaining on the same page. This only happens once. If using a custom sign in form, you could simply redirect to the next page and your server side code should get the user and pass it through pageProps. My getInitialProps function is still getting the user on the server side any time the user navigates to another page after the sign in form has been used.

Let me know if this helps and I apologize again for making it seem like this would be auto-closed.

+1
chrisbonifacio on Jul 8, 2021

I have upgraded to the latest versions which has removed the duplicates and I am rebuilding to see if that makes a difference.

+1
pgbradbury on Jul 6, 2021

Hi @pgbradbury I can’t confidently say that this is an issue with Amplify as I don’t have any issues using withSSRContext outside of a redux project. I’ve cloned the with-redux-wrapper example from the links you shared before and have been messing around with it a bit and while I can get my server side code to log the authenticated user, I haven’t figured out how to properly store that data in my redux store and/or get it from the store in my components. So, I’m still trying to figure out how to use Amplify and Next-Redux-Wrapper in tandem myself.

+1
chrisbonifacio on Jun 30, 2021

OK, so I have tested this a few different ways. It seems to boil down to this at the moment.

On the first instance of a login the try and catch works, but no user is set, so the app breaks or you catch no user and do something.

If I refresh the app works. I assume this is all tied to amplify SSR logic and figuring out an authenticated user.

A hack would be to force a refresh on catching no user, but that is really bad. I thought the whole point of withSSRContext was to make this work. This is what I have put in place and it works, but its not good code.

Any ideas?

P.S. I upgraded aws-amplify to 4.1.1, it made no difference.

+1
pgbradbury on Jun 22, 2021

I started there but ended up using a library to help with the redux-nextjs integration

https://github.com/kirill-konshin/next-redux-wrapper

https://github.com/vercel/next.js/tree/canary/examples/with-redux-wrapper

+1
pgbradbury on Jun 22, 2021

Not exactly, I am building this in a docker container. So I have previously logged in and it’s dropped a cookie. I have then rebuilt the container, so the user still persists in the cookie but is dropped from the server. I have tweaked a couple of things (it was throwing an error after this due to no state, I moved that) and it seems to now work with the try-catch solution. I will try some more scenarios, but I think this has fixed it.

+1
pgbradbury on Jun 22, 2021
Read more comments on GitHub
← amplify-js: Error when building with AOT enabled when using Angular
amplify-js: Expected identifier but found "=", unable to publish app →