@aws-amplify/auth signout not working

[mabreuortega]

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

React

Amplify APIs

Authentication, REST API, Storage, Interactions

Amplify Categories

auth, storage, api

Environment information

Details

# Put output below this line
npx: installed 1 in 2.171s

  System:
    OS: macOS 12.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 95.58 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 12.22.12 - ~/.nvm/versions/node/v12.22.12/bin/node
    npm: 6.14.16 - ~/.nvm/versions/node/v12.22.12/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 91.11.0
    Safari: 15.6
  npmPackages:
    @aws-amplify/api: ^4.0.44 => 4.0.48 
    @aws-amplify/auth: ^4.5.8 => 4.6.1 
    @aws-amplify/core: ^4.5.8 => 4.6.1 
    @aws-amplify/interactions: ^4.0.44 => 4.0.48 
    @aws-amplify/storage: ^4.4.27 => 4.5.1 
    @aws-amplify/ui-components: ^1.9.6 => 1.9.6 
    @aws-amplify/ui-react: ^1.2.26 => 1.2.26 
    @fortawesome/fontawesome-svg-core: ^1.2.30 => 1.2.30 
    @fortawesome/free-solid-svg-icons: ^5.14.0 => 5.14.0 
    @fortawesome/react-fontawesome: ^0.1.11 => 0.1.11 
    @hookform/resolvers: ^1.3.8 => 1.3.8 
    @reach/menu-button: ^0.11.0 => 0.11.0 
    @testing-library/jest-dom: ^5.11.4 => 5.16.4 
    @testing-library/react: ^10.4.9 => 10.4.9 
    @testing-library/user-event: ^12.1.4 => 12.8.3 
    @types/jest: ^24.0.0 => 24.0.0 
    @types/node: ^12.12.6 => 12.20.55 
    @types/papaparse: ^5.2.0 => 5.2.0 
    @types/react: ^16.9.0 => 16.9.0 
    @types/react-beautiful-dnd: ^13.1.2 => 13.1.2 
    @types/react-csv: ^1.1.2 => 1.1.2 
    @types/react-datepicker: ^3.1.8 => 3.1.8 
    @types/react-dom: ^16.9.0 => 16.9.0 
    @types/react-helmet: ^6.1.2 => 6.1.2 
    @types/react-modal: ^3.10.6 => 3.10.6 
    @types/react-router-dom: ^5.1.5 => 5.1.5 
    @types/react-router-hash-link: ^2.4.1 => 2.4.1 
    @types/react-table: ^7.0.26 => 7.0.26 
    @types/recharts: ^1.8.13 => 1.8.13 
    @types/uuid: ^8.0.0 => 8.0.0 
    amplify-ui-components-loader:  undefined ()
    aws-amplify: ^4.3.26 => 4.3.30 
    css-loader: ^6.5.1 => 6.5.1 (4.3.0)
    dayjs: ^1.8.36 => 1.8.36 
    i18next: ^19.8.4 => 19.8.8 
    joi:  1.0.0 
    mini-css-extract-plugin: ^2.4.4 => 2.4.4 (0.11.3)
    mutationobserver-shim: ^0.3.7 => 0.3.7 
    papaparse: ^5.3.0 => 5.3.0 
    react: ^16.14.0 => 16.14.0 
    react-beautiful-dnd: ^13.1.0 => 13.1.0 
    react-csv: ^2.0.3 => 2.0.3 
    react-datepicker: ^3.7.0 => 3.7.0 
    react-dom: ^16.14.0 => 16.14.0 
    react-excel-renderer: ^1.1.0 => 1.1.0 
    react-helmet: ^6.1.0 => 6.1.0 
    react-hook-form: ^6.3.1 => 6.3.1 
    react-horizontal-scrolling-menu: ^2.1.1 => 2.1.1 
    react-i18next: ^11.10.0 => 11.10.0 
    react-markdown: ^5.0.3 => 5.0.3 
    react-modal: ^3.11.2 => 3.11.2 
    react-router-dom: ^5.2.0 => 5.2.0 
    react-router-hash-link: ^2.4.3 => 2.4.3 
    react-scripts: ^4.0.3 => 4.0.3 
    react-table: ^7.6.2 => 7.6.2 
    react-tooltip: ^4.2.10 => 4.2.10 
    react-waypoint: ^10.1.0 => 10.1.0 
    recharts: 2.0.10 => 2.0.10 
    sass: ^1.49.0 => 1.49.0 
    sass-loader: ^12.3.0 => 12.3.0 (10.2.0)
    style-loader: ^3.3.1 => 3.3.1 (1.3.0)
    superstruct:  1.0.0 
    typescript: ~3.7.2 => 3.7.2 
    uswds: ^2.11.2 => 2.11.2 
    uuid: ^8.2.0 => 8.2.0 (3.4.0, 3.3.2, 8.3.2, 7.0.3)
    vest:  1.0.0 
    yup: ^0.32.11 => 0.32.11 (1.0.0)
    zod:  1.0.0 
  npmGlobalPackages:
    aws-cdk: 1.144.0
    npm: 6.14.16
    performance-dashboard-cdk: 1.5.0

Describe the bug

We have a signOut button defined as follows

import { Auth } from "@aws-amplify/auth";

onst signOut = async (event: React.MouseEvent) => {
    try {
      await Auth.signOut();  
    } catch (error) {
      console.log("error signing out: ", error);
      event.preventDefault();
    }
  };

When user clicks the button a request is sent to the server but returning a NS_BINDING_ABORTED which is causing the user not really being signed out and when redirect it lands in the same page not in the sign in page.

This started happening recently and can be reproduced in Firefox/Chrome (haven't tried Safari yet).

Expected behavior

User signed out and redirected to the login page.

Reproduction steps

1. Login in the system
2. Click on the sign out button
3. User is redirected to the landing page still authenticated

Code Snippet

// Put your code below this line.

Log output

Details

// Put your logs below this line

aws-exports.js

No response

Manual configuration

import EnvConfig from "./services/EnvConfig";

const config = {
  API: {
    endpoints: [
      {
        name: "BackendApi",
        endpoint: EnvConfig.backendApi,
      },
    ],
  },
  Auth: {
    region: EnvConfig.region,
    userPoolId: EnvConfig.userPoolId,
    userPoolWebClientId: EnvConfig.appClientId,
    identityPoolId: EnvConfig.identityPoolId,
  },
  Storage: {
    AWSS3: {
      bucket: EnvConfig.datasetsBucket,
      region: EnvConfig.region,
    },
  },
};

const oauthConfig = {
  domain: EnvConfig.cognitoDomain,
  scope: [
    "phone",
    "email",
    "openid",
    "profile",
    "aws.cognito.signin.user.admin",
  ],
  redirectSignIn: EnvConfig.frontendDomain,
  redirectSignOut: EnvConfig.frontendDomain,
  responseType: "code", // or token
  // optional, for Cognito hosted ui specified options
  options: {
    // Indicates if the data collection is enabled to support Cognito advanced security features. By default, this flag is set to true.
    AdvancedSecurityDataCollectionFlag: true,
  },
};

export const samlConfig = {
  oauthConfig: {
    customProvider: EnvConfig.samlProvider,
    label: EnvConfig.enterpriseLoginLabel,
  },
};

export function amplifyConfig(): {} {
  var configuration: { [k: string]: any } = config;

  if (EnvConfig.samlProvider) {
    configuration.oauth = oauthConfig;
  }
  return configuration;
}

export default config;

Additional configuration

{
    "UserPool": {
        "Id": "us-east-xxxx",
        "Name": "UserPool6BA7E5F2-xxxx",
        "Policies": {
            "PasswordPolicy": {
                "MinimumLength": 8,
                "RequireUppercase": true,
                "RequireLowercase": true,
                "RequireNumbers": true,
                "RequireSymbols": true,
                "TemporaryPasswordValidityDays": 7
            }
        },
        "LambdaConfig": {},
        "LastModifiedDate": "2021-10-19T14:57:35.795000-04:00",
        "CreationDate": "2021-10-19T14:57:35.795000-04:00",
        "SchemaAttributes": [
            {
                "Name": "sub",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": false,
                "Required": true,
                "StringAttributeConstraints": {
                    "MinLength": "1",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "given_name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "family_name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "middle_name",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "nickname",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "preferred_username",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "profile",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "picture",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "website",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "email",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "email_verified",
                "AttributeDataType": "Boolean",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false
            },
            {
                "Name": "gender",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "birthdate",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "10",
                    "MaxLength": "10"
                }
            },
            {
                "Name": "zoneinfo",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "locale",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "phone_number",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "phone_number_verified",
                "AttributeDataType": "Boolean",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false
            },
            {
                "Name": "address",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {
                    "MinLength": "0",
                    "MaxLength": "2048"
                }
            },
            {
                "Name": "updated_at",
                "AttributeDataType": "Number",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "NumberAttributeConstraints": {
                    "MinValue": "0"
                }
            },
            {
                "Name": "custom:roles",
                "AttributeDataType": "String",
                "DeveloperOnlyAttribute": false,
                "Mutable": true,
                "Required": false,
                "StringAttributeConstraints": {}
            }
        ],
        "SmsVerificationMessage": "The verification code to your new account is {####}",
        "EmailVerificationMessage": "The verification code to your new account is {####}",
        "EmailVerificationSubject": "Verify your new account",
        "VerificationMessageTemplate": {
            "SmsMessage": "The verification code to your new account is {####}",
            "EmailMessage": "The verification code to your new account is {####}",
            "EmailSubject": "Verify your new account",
            "DefaultEmailOption": "CONFIRM_WITH_CODE"
        },
        "MfaConfiguration": "OFF",
        "EstimatedNumberOfUsers": 8,
        "EmailConfiguration": {
            "EmailSendingAccount": "COGNITO_DEFAULT"
        },
        "UserPoolTags": {
            "app-id": "Performance Dashboard on AWS"
        },
        "AdminCreateUserConfig": {
            "AllowAdminCreateUserOnly": true,
            "UnusedAccountValidityDays": 7,
            "InviteMessageTemplate": {
                "EmailMessage": "<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;\"\n    />\n  </head>\n  <body\n    width=\"100%\"\n    style=\"\n      margin: 0;\n      padding: 0 !important;\n      background-color: #fff;\n      font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial,\n        sans-serif;\n    \"\n  >\n    <div\n      style=\"margin: 0 auto; max-width: 700px; background-color: #fff\"\n      align=\"center\"\n    >\n      <div\n        style=\"border: 1px solid; margin: 0 auto; max-width: 600px\"\n        align=\"left\"\n      >\n        <div style=\"padding: 20px;\">\n          <table>\n            <tr>\n              <td width=\"50\">\n                <img\n                  align=\"left\"\n                  style=\"\n                    border: none;\n                    border-radius: 0px;\n                    display: block;\n                    outline: none;\n                    text-decoration: none;\n                    width: 100%;\n                    height: auto;\n                  \"\n                  alt=\"Your Logo\"\n                  src=\"https://[your domain]/logo.png\"\n                />\n              </td>\n              <td style=\"padding: 5px; font-size: 16px; font-weight: bold\">\n                <p align=\"left\" style=\"margin-top: 10px; margin-bottom: 0\">\n                  [Organization] Performance Dashboard\n                </p>\n              </td>\n            </tr>\n          </table>\n\n          <p style=\"margin-top: 10px; margin-bottom: 0\">&nbsp;</p>\n          <h2\n            style=\"\n              margin-top: 20px;\n              margin-bottom: 0;\n              font-style: normal;\n              color: #000;\n              font-size: 28px;\n              line-height: 32px;\n            \"\n          >\n            You have been invited to the [Organization] Performance Dashboard on\n            AWS\n          </h2>\n          <p\n            style=\"\n              margin-top: 10px;\n              margin-bottom: 0;\n              font-size: 16px;\n              line-height: 24px;\n              color: #000;\n            \"\n          >\n            [Administrator] has invited you. If you believe that you have gotten\n            this invite in error, please disregard this message. If you are\n            unsure of the message’s authenticity, please reach out to the person\n            who invited you.\n          </p>\n          <p\n            style=\"\n              margin-top: 10px;\n              margin-bottom: 0;\n              font-size: 16px;\n              line-height: 24px;\n              color: #000;\n            \"\n          >\n            Your username is <b>{username}</b> and temporary password is \"<b>{####}</b>\". You\n            will have to change your password after you login.\n          </p>\n          <p style=\"margin-top: 20px; margin-bottom: 0\">&nbsp;</p>\n          <div style=\"margin-bottom: 20px\">\n            <a\n              style=\"\n                border-radius: 4px;\n                border-width: 2px;\n                border-color: #71767a;\n                font-size: 14px;\n                font-weight: bold;\n                line-height: 24px;\n                padding: 12px 24px 13px 24px;\n                text-decoration: none !important;\n                text-align: center;\n                color: #71767a !important;\n                background-color: #ffffff;\n              \"\n              href=\"https://[your domain]/admin\"\n              >Accept the invite</a\n            >\n          </div>\n          <a\n            style=\"font-size: 12px; line-height: 5px; color: #000\"\n            href=\"https://[your domain]/admin\"\n            >https://[your domain]/admin</a\n          >\n          <hr style=\"margin-top: 30px\" />\n          <p\n            style=\"\n              font-size: 10px;\n              line-height: 5px;\n              color: #000;\n              font-style: italic;\n            \"\n          >\n            Please do not reply to this message\n          </p>\n        </div>\n      </div>\n      <table style=\"font-size: 12px; line-height: 50px\">\n        <tr>\n          <td>\n            <a\n              style=\"color: #000\"\n              href=\"https://github.com/awslabs/performance-dashboard-on-aws\"\n              >About Performance Dashboard</a\n            >\n          </td>\n          <td>|</td>\n          <td>\n            <a style=\"color: #000\" href=\"[Replace]\">Privacy</a>\n          </td>\n        </tr>\n      </table>\n    </div>\n  </body>\n</html>\n",
                "EmailSubject": "You have been invited to the {Organization} Performance Dashboard on AWS."
            }
        },
        "Arn": "arn:aws:cognito-idp:us-east-1:558378773035:userpool/us-east-1_3vVMvROS8",
        "AccountRecoverySetting": {
            "RecoveryMechanisms": [
                {
                    "Priority": 1,
                    "Name": "verified_phone_number"
                },
                {
                    "Priority": 2,
                    "Name": "verified_email"
                }
            ]
        }
    }
}

Mobile Device

MacBook Pro (16-inch, 2019)

Mobile Operating System

macOS Monterrey

Mobile Browser

Firefox/Chrome

Mobile Browser Version

91.11.0esr (64-bit)/104.0.5112.79

Additional information and screenshots

No response

[mabreuortega]

I found a work around using setTimeout to call the api outside of the user event scope

   const signOut = async (event: React.MouseEvent) => {
    event.preventDefault();
    setTimeout(async () => {
      try {
        await Auth.signOut();
        window.location.href = "/admin";
      } catch (error) {
        console.log("error signing out: ", error);
        event.preventDefault();
      }
    });
  };

[nadetastic]

Hi @mabreuortega 👋,

Following up on this - glad you were able to find a work around for this. However, I have been unable to reproduce this issue. A few questions/confirmations:

It looks like you are signing out a federated user?
What is the reason for having event.preventDefault()? (Do you have the sign out button wrapped in a <form> element)
Did you use the Amplify CLI to generate the Auth resource, or do set up without Amplify? (Console, SDK etc)

I tested with both a Cognito user and Federated user (Google) and Auth.signOut() works as expected. Please let me know if you are still facing this issue without the workaround.

[jacobcwright]

I'm having the same issue... the client cookies are not being cleared using Auth.signOut() using the base email login mechanism.
And for whatever reason the setTimeout() workaround worked for me as well...

I used amplify cli to generate the auth resource, and my signOut is not wrapped in a form.

the event.preventDefault() is to cancel the page reload from window.location.href = "/admin"; I believe...

[elorzafe]

@mabreuortega @jacobcwright

How is this function connected with the UI button?

[nadetastic]

Hi @mabreuortega @jacobcwright - following up on this, any feedback to the question above? Also since i have been unable to reproduce this issue, let me know any additional context specific to your setup that can help in reproducing.

[mabreuortega]

If I remember correctly, the app I was fixing is using an anchor not a button

[mabreuortega]

In our use case we have a cognito user-pool with an I'd client connected to the pool

[mabreuortega]

Our project is open source, here is the entry point for auth on the application

https://github.com/aws-solutions/performance-dashboard-on-aws/blob/mainline/frontend/src/hooks/user-hooks.ts

https://github.com/aws-solutions/performance-dashboard-on-aws/blob/mainline/frontend/src/layouts/SAMLAuthenticator.tsx