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

[oemer-aran]

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: #6320

Expected behaviour

4. 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=my@email.de&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

[ar2pi]

+1

[arthur-gyulabyan1]

Also have the same scenario with confirmation after redirection from email. Would be great if autoSignIn is triggered in this case too.

[AdamFlan]

+1

[yanlin96]

+1

[cwomack]

Hey @oemer-sellwerk 👋 . I was able to reproduce the issue by signing up a user in one tab and then confirming their code in a different tab (which is likely what happens if you're sending an emailed link). This results in the "autoSignIn_failure" error being returned from Hub. I'm going to review this with the team and get back to you on next steps for this issue, but let me know if there's any additional context/updates that happen in the mean time.

[cwomack]

After discussing this with the team, we're going to label this as a feature request. Currently, it's not a default behavior for Cognito to utilize a redirect link in emails for a new user to sign up.

[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);

[masteruser20]

+1

[ARJUNSV01]

Any solutions on this issue?