autoSignIn doesn't work if Auth.confirmSignUp was called in a different session than Auth.signUp

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

Vue

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

System:
    OS: macOS 12.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 112.89 MB / 16.00 GB
    Shell: 5.1.8 - /usr/local/bin/bash
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 3.2.1 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Edge: 92.0.902.84
    Firefox: 102.0.1
    Safari: 15.5
  npmPackages:
    @sde/js-config: * => 1.0.0 
    @types/node: ^14.14.0 => 14.18.12 
    @types/source-map-support: ^0.5.3 => 0.5.3 
    @typescript-eslint/eslint-plugin: ^4.5.0 => 4.5.0 
    @typescript-eslint/parser: ^4.5.0 => 4.5.0 
    DockerImageFunctionConstruct:  0.1.0 
    aws-cdk: 2.22.0 => 2.22.0 
    aws-sdk: ^2.774.0 => 2.1111.0 
    cdk-assets: 2.22.0 => 2.22.0 
    esbuild: ^0.8.21 => 0.8.21 
    eslint: ^7.11.0 => 7.32.0 
    eslint-config-prettier: ^6.13.0 => 6.15.0 
    eslint-import-resolver-typescript: ^2.3.0 => 2.3.0 
    eslint-plugin-deprecation: ^1.1.0 => 1.1.0 
    eslint-plugin-import: ^2.22.1 => 2.22.1 
    eslint-plugin-jest: ^24.1.0 => 24.1.0 
    eslint-plugin-markdown: ^2.2.1 => 2.2.1 
    eslint-plugin-prettier: ^3.1.4 => 3.4.1 
    eslint-plugin-vue: ^7.1.0 => 7.1.0 
    hello_world:  1.0.0 
    husky: ^4.3.0 => 4.3.8 
    lerna: ^4.0.0 => 4.0.0 
    lint-staged: ^10.4.2 => 10.4.2 
    markdownlint-cli: ^0.24.0 => 0.24.0 
    memo-parser:  0.2.1 
    node-gyp: ^8.4.1 => 8.4.1 (7.1.2, 5.1.1)
    prettier: ^2.1.2 => 2.6.0 
    shx: ^0.3.4 => 0.3.4 
    ts-node: ^9.0.0 => 9.0.0 
    typescript: 4.0.3 => 4.0.3 
  npmGlobalPackages:
    npm: 6.14.13
    yarn: 1.22.18

Describe the bug

Using the autoSignIn option with Auth.signUp only works, when Auth.confirmSignUp is called in the same tab/session. This can lead to very bad UX during the registration process. An example where this can happen is when you have a confirmation email. The email can have a button which redirects the user to the confirmation page to enter the confirmation code. The page will be loaded in a new session/tab, which will make autoSignIn fail.

If the user remains in the same tab/session after calling Auth.signUp and calls Auth.confirmSignUp it works as expected

I took a look into the code already, and the way it’s implemented it also makes sense. handleAutoSign is called in the Auth.signUp function. This functions sets autoSignInInitiated to true. However, since Auth is loaded from scratch if you click on the email link/open a new session, autoSignInInitiated is obviously still false. If autoSignInitiated is false, when Auth.confirmSignUp is called, the Hub returns the error: autoSignIn_failure.

Suggestion, if technically possible: Logically it makes more sense to me to put the autoSignIn option in the Auth.confirmSignUp function (and not Auth.signUp). The response can then contain the user and a Hub event wouldn’t be required anymore.

P.S.: Not sure if this is a bug or intended. But since the autoSignIn feature has very little benefit and inconsistent behaviour as it is right now, I sort it more bug category.

This is a follow up to: https://github.com/aws-amplify/amplify-js/issues/6320

Expected behaviour

1. Hub returns success with the autoSignIn event.

Reproduction steps

1. User signs up with Auth.signUp and autoSignIn: { enabled: true } (e.g. on /register page)
2. User receives email with link to e.g.: /register/confirm?username=[e-mail]&code=492994
3. User confirms registration with Auth.confirmSignUp using the URL params from 2.
4. Hub returns autoSignIn_failure

Code Snippet

// simplified, as in the official docs
// https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js/#auto-sign-in-after-sign-up
import { Hub } from 'aws-amplify';

function listenToAutoSignInEvent() {
    Hub.listen('auth', ({ payload }) => {
        const { event } = payload;
        if (event === 'autoSignIn') {
            const user = payload.data;
            // assign user
        } else if (event === 'autoSignIn_failure') {
            // redirect to sign in page
        }
    })
}

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

import Amplify from "aws-amplify"

Amplify.configure({
    ssr: true,
    aws_project_region: "XXXX",
    aws_cognito_region: "XXXX",
    aws_user_pools_id: "XXXX",
    aws_user_pools_web_client_id: "XXXX"
  })
}

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

[chrisbonifacio]

A potential workaround to autoSignIn on another tab might be to setup a storage event listener that checks if the cognito access, id, and/or refresh tokens have been stored locally. The storage event listener will trigger if localStrage has changed from another page on the same domain, so the other tab will reload or redirect, whatever you need it to do to update state and login/logout.

something similar to this

    const storageListener = (event) => {
      console.log(event);

      if (
        event.key?.includes("CognitoIdentityServiceProvider") &&
        event.oldValue === null &&
        event.newValue !== null
      ) {
      // handle tokens being added (login) or removed (logout)
        window.location.reload();
      }
    };

    window.addEventListener("storage", storageListener);
    
    // cleanup
    window.removeEventListener("storage", storageListener);

[ARJUNSV01]

I have made a Phonenumber,OTP signup and signIn in my app. In the signup page, when the user enter the phonenumber and clicks the signup button, an OTP will be sent to their phone and the field to enter OTP will appear on the screen. If the user enters the otp and submit it , he would be signedUp and also gets automatically signedIn as I have enabled the autosignIn. But , if he doesnt enter the OTP and reloads the Page, then he have to enter the phonenumber again and OTP will be sent to his phone and he will be prompted to enter the OTP. If the user enters the OTP , this time the autosignIn is not working.

Is there any solution to this issue?