Authentication Cookie Storage Workflow not working

[sameer-dudeja]

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

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

System:
    OS: Windows 11 10.0.22631
    CPU: (4) x64 11th Gen Intel(R) Core(TM) i3-1115G4 @ 3.00GHz
    Memory: 1.64 GB / 15.74 GB
  Binaries:
    Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - D:\Client\SH_WebApp_Accounts_v2\node_modules\.bin\yarn.CMD
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.28 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (131.0.2903.70)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @aws-amplify/auth: ^6.9.0 => 6.9.1 (6.5.3)
    @aws-amplify/auth/cognito:  undefined ()
    @aws-amplify/auth/cognito/server:  undefined ()
    @aws-amplify/auth/enable-oauth-listener:  undefined ()
    @aws-amplify/auth/server:  undefined ()
    @aws-amplify/core: ^6.8.0 => 6.9.0 (6.4.6)
    @aws-amplify/core/internals/adapter-core:  undefined ()
    @aws-amplify/core/internals/aws-client-utils:  undefined ()
    @aws-amplify/core/internals/aws-client-utils/composers:  undefined ()
    @aws-amplify/core/internals/aws-clients/cognitoIdentity:  undefined ()
    @aws-amplify/core/internals/aws-clients/pinpoint:  undefined ()
    @aws-amplify/core/internals/providers/pinpoint:  undefined ()
    @aws-amplify/core/internals/utils:  undefined ()
    @aws-amplify/core/server:  undefined ()
    @babel/plugin-proposal-private-property-in-object: ^7.21.11 => 7.21.11 (7.21.0-placeholder-for-preset-env.2)
    @emotion/react: ^11.7.1 => 11.13.3
    @emotion/styled: ^11.6.0 => 11.13.0
    @loadable/component: ^5.15.2 => 5.16.4
    @mui/icons-material: ^5.2.4 => 5.16.7
    @mui/lab: ^5.0.0-alpha.74 => 5.0.0-alpha.173
    @mui/material: ^5.2.4 => 5.16.7
    @react-oauth/google: ^0.8.0 => 0.8.1
    @testing-library/jest-dom: ^5.14.1 => 5.17.0
    @testing-library/react: ^12.0.0 => 12.1.5
    @testing-library/user-event: ^13.2.1 => 13.5.0
    aws-amplify: ^6.4.3 => 6.6.6
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    axios: ^0.24.0 => 0.24.0
    date-fns: ^2.28.0 => 2.30.0
    husky: ^7.0.4 => 7.0.4
    lint-staged: ^12.1.2 => 12.5.0
    prettier: ^2.5.1 => 2.8.8
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-multi-carousel: ^2.8.0 => 2.8.5
    react-query: ^3.34.3 => 3.39.3
    react-router-dom: ^6.1.1 => 6.27.0
    react-scripts: 5.0.0 => 5.0.0
    web-vitals: ^2.1.0 => 2.1.4
    yarn: ^1.22.19 => 1.22.22
  npmGlobalPackages:
    meteor: 2.14.0
    npm: 9.3.1
    wscat: 6.0.1
    yarn: 1.22.22

Describe the bug

I am configuring an Auth application in React using Amplify v6, while configuring the cookie storage as token storage, in my local system it works but when I deploy, It stops working and reverts back localStorage. I am attaching the screenshots, I was asked by AWS Amplify support to raise this issue as they couldn't figure it out as well.
There aren't any console/ api errors that we see when deploying to a hosted website.

In the local environment, it works. I am attaching the screenshot where the token are stored in cookies and also attaching the file for config reference

This is what i am using for localhost and it stores the token
cognitoUserPoolsTokenProvider.setKeyValueStorage(new CookieStorage({ domain: 'localhost', path: '/', secure: true, expires: 360 }));

and use the similar setting for deployed website which I am fine making public i.e. abs-login-testing.simulationhub.com which is a subdomain so updated the config and deployed this website.
cognitoUserPoolsTokenProvider.setKeyValueStorage(new CookieStorage({ domain: '.simulationhub.com', path: '/', secure: true, expires: 360 }));
but unfortunately it keeps reverting to localstorage not sure why.

Just as an update since we are the application, we have reverted the changes in the deployed website and implemented a manually implementation to store tokens but the internal functions should also work.

Expected behavior

When I am setting the storage to cookies. it should work no matter if it is deployed or on local.

Reproduction steps

1. Install AWS Amplify
2. Configure Amplify
3. Add Storage config
4. Perform a login

Code Snippet

cognitoUserPoolsTokenProvider.setKeyValueStorage(new CookieStorage({ domain: 'localhost', path: '/', secure: true, expires: 360 }));

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

Amplify.configure({
	Auth: {
		Cognito: {
			userPoolId: process.env.REACT_APP_COGNITO_USERPOOL_ID,
			userPoolClientId: process.env.REACT_APP_COGNITO_CLIENT_ID,
			loginWith: {
				email: true,
			},
		}
	}
})

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

[jjarvisp]

Hey @sameer-dudeja, thanks for opening this issue! Can you share your package.json file? Looking at your environment information, it looks like you may have multiple competing amplify installations.

[sameer-dudeja]

Hi I am attaching the package.json. I tried upgrading the amplify version to 6.12.0 also. I didn't work and sometimes locally also it is failing.

{
"name": "sh_webapp_accounts",
"version": "3.0.0",
"private": true,
"dependencies": {
"@aws-amplify/auth": "^6.9.0",
"@aws-amplify/core": "^6.8.0",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@loadable/component": "^5.15.2",
"@mui/icons-material": "^5.2.4",
"@mui/lab": "^5.0.0-alpha.74",
"@mui/material": "^5.2.4",
"@react-oauth/google": "^0.8.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.2.1",
"aws-amplify": "^6.4.3",
"axios": "^0.24.0",
"date-fns": "^2.28.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-multi-carousel": "^2.8.0",
"react-query": "^3.34.3",
"react-router-dom": "^6.1.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.0",
"yarn": "^1.22.19"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:testing": "sh -ac '. ./.env.testing; npm run build'",
"build:production": "sh -ac '. ./.env.production; npm run build'",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
},
"devDependencies": {
"husky": "^7.0.4",
"lint-staged": "^12.1.2",
"prettier": "^2.5.1"
}
}

[HuiSF]

Thanks for the follow up @sameer-dudeja I noticed that you are listing @aws-amplify namespaced package as direct dependencies, this will cause duplicate dependencies in your project, so your configuration may be messed up. Please remove them, list only aws-amplify as the dependency and try again.

[sameer-dudeja]

I tried that, now even in local, it is going directly to localStorage. I haven't changed any of the code. I am not sure whats happening. Should there be an error that logs from amplify side if the cookieStorage config is having some issues?