User authentication not persisted in browser: not authenticated

Heads up Opening this issue because all related issues seem to be closed WITHOUT an answer or solution for browsers, but many people face this problem.

Related issues:

• https://github.com/aws-amplify/amplify-js/issues/5167
• https://github.com/aws-amplify/amplify-js/issues/812

Describe the bug

Authenticating the user in the browser and directly calling currentAuthenticatedUser results in an error. It looks like neither local storage nor cookie storage is being used to persist the session.

To Reproduce Steps to reproduce the behavior:

1. Run amplify init && amplify add auth in a project. Choose defaults.
2. Configure Amplify in _app.js in a Next.js app. (BUT I also just reproduced this with a regular CRA app).
3. Call Auth.signIn with valid credentials for a confirmed account. It returns a user correctly.
4. Call Auth.currentAuthenticatedUser. It throws an error not authenticated.

If you set Amplify.Logger.LOG_LEVEL = 'DEBUG'; this is the output:

Expected behavior

currentAuthenticatedUser should return the user correctly.

Code Snippet

// _app.js
import Auth from '@aws-amplify/auth';
import Amplify from '@aws-amplify/core';

import config from './aws-exports.js';

Amplify.configure(config);

// my-page.js
const signIn = async ({ email, password }) => await Auth.signIn(email, password);

async function refreshCurrentAuthenticatedUsersTokens() {
  const user = await Auth.currentAuthenticatedUser();
  console.log('user', user);
  const currentSession = user.signInUserSession;

  return new Promise((resolve, reject) => {
    user.refreshSession(currentSession.refreshToken, (error, data) => {
      if (error) {
        reject(error);
      }
      resolve(data);
    });
  });
}

async function handleClick() {
  try {
    const user = await signIn({ email: '[e-mail]', password: 'secret-stuff99' });
    console.log('user', user);
    const response = await refreshCurrentAuthenticatedUsersTokens();
    console.log('response', response);
  } catch (error) {
    console.log('error', error);
  }
}

Add this to a button’s onClick handler and click it. You get an error: 'not authenticated'

What is Configured?

Only authentication as described above.

{
  "userPoolId": "eu-west-2_ikgbLyfwt",
  "userPoolWebClientId": "XXX",
  "region": "eu-west-2",
  "identityPoolId": "eu-west-2:XXX",
  "identityPoolRegion": "eu-west-2",
  "mandatorySignIn": false,
  "aws_project_region": "eu-west-2",
  "aws_cognito_identity_pool_id": "eu-west-2:XXX",
  "aws_cognito_region": "eu-west-2",
  "aws_user_pools_id": "eu-west-2_ikgbLyfwt",
  "aws_user_pools_web_client_id": "XXX",
  "oauth": {}
}

Environment

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

  System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 398.82 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.0 - ~/.yarn/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Brave Browser: 84.1.11.101
    Chrome: 84.0.4147.105
    Safari: 13.1.2
  npmPackages:
    @aws-amplify/auth: 3.3.3 => 3.3.3 
    @aws-amplify/core: 3.4.4 => 3.4.4 
    @babel/core: 7.10.5 => 7.10.5 
    @babel/node: 7.10.5 => 7.10.5 
    @redux-saga/testing-utils: 1.1.3 => 1.1.3 
    @reduxjs/toolkit: 1.4.0 => 1.4.0 
    babel-plugin-module-name-mapper: 1.2.0 => 1.2.0 
    babel-plugin-module-resolver: 4.0.0 => 4.0.0 
    babel-plugin-ramda: 2.0.0 => 2.0.0 
    classnames: 2.2.6 => 2.2.6 
    eslint: 7.5.0 => 7.5.0 
    eslint-config-prettier: 6.11.0 => 6.11.0 
    eslint-plugin-import: 2.22.0 => 2.22.0 
    eslint-plugin-jsx-a11y: 6.3.1 => 6.3.1 
    eslint-plugin-prettier: 3.1.4 => 3.1.4 
    eslint-plugin-react: 7.20.4 => 7.20.4 
    eslint-plugin-react-hooks: 4.0.8 => 4.0.8 
    eslint-plugin-simple-import-sort: 5.0.3 => 5.0.3 
    formik: 2.1.5 => 2.1.5 
    husky: 4.2.5 => 4.2.5 
    jsonwebtoken: 8.5.1 => 8.5.1 
    jwk-to-pem: 2.0.4 => 2.0.4 
    next: 9.5.1 => 9.5.1 
    prettier: 2.0.5 => 2.0.5 
    ramda: 0.27.1 => 0.27.1 
    react: 16.13.1 => 16.13.1 
    react-dom: 16.13.1 => 16.13.1 
    react-redux: 7.2.1 => 7.2.1 
    redux-logger: 3.0.6 => 3.0.6 
    redux-saga: 1.1.3 => 1.1.3 
    riteway: 6.1.2 => 6.1.2 
    tap-nirvana: 1.1.0 => 1.1.0 
    watch: 1.0.2 => 1.0.2 
    yup: 0.29.2 => 0.29.2 
  npmGlobalPackages:
    @ionic/cli: 6.2.1
    cordova-res: 0.10.0
    elm-format: 0.8.3
    elm-live: 4.0.2
    elm-test: 0.19.1-revision2
    native-run: 0.3.0
    now: 17.0.4
    npm: 6.14.4

[beppek]

I solved this by adding the bypassCache param to the currentAuthenticatedUser call like so:

Auth.currentAuthenticatedUser({ bypassCache: true })

[sureshUngarala]

@ericclemmons @janhesters Had the same problem. Completing the flow with ui-react’s withAuthenticator on first time solved for me. In my case, user wasn’t confirmed and I was trying with Auth.signIn API to signin user with temp pwd following which Auth.currentAuthenticatedUser API wasn’t returning loggedIn user(cached/stored).

Would like to see this issue fixed with Auth.signIn rather than opting AmplifyAuthenticator with each new user.

Update: Calling Auth.completeNewPassword() after Auth.signIn() does solve this problem if signedIn with temp password initially.