V6 Cookie Storage not working as expected

[nadetastic]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] 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 Categories

No response

Environment information

``` # Put output below this line ```

Describe the bug

Opening on behalf of CX

My name is José, and I am currently in the process of migrating from aws-amplify@5 to aws-amplify@6, the JavaScript version that I use in React.

Despite thoroughly reviewing the provided documentation and making the necessary adjustments to align with version 6, it appears that the "cookieStorage" option is no longer functioning as expected.

Furthermore, I observed that employing the configuration object structure outlined in the documentation link attached above does not seamlessly integrate with my project. I have consulted an alternative documentation source tailored for React, but regrettably, the issue with the "cookieStorage" persists. This is due to the apparent absence of the "cookieStorage" option in that documentation Upon attempting to execute the getCurrentUser() method from 'aws-amplify/auth', I encountered the following error message: "User needs to be authenticated to call this API." It's essential to note that I am not leveraging the Amplify CLI; instead, I am working with existing sources.

I appreciate your time and expertise in addressing this matter. Any guidance or support you can provide would be immensely valuable.

Thank you for your attention to this request.

Expected behavior

Cookie Storage to work

Reproduction steps

Attempt to setup cookie storage

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

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

[nadetastic]

Following up here: cc @azide0x37

The documentation has been updated to reflect the proper way to configure cookie storage, and can be referenced here.

import { Amplify, type ResourcesConfig } from 'aws-amplify';
import { CookieStorage } from 'aws-amplify/utils';
import { cognitoUserPoolsTokenProvider } from 'aws-amplify/auth/cognito';

const authConfig: ResourcesConfig['Auth'] = {
  Cognito: {
    userPoolId: 'your_user_pool_id',
    userPoolClientId: 'your_user_pool_client_id'
  }
};

Amplify.configure({
  Auth: authConfig
});

cognitoUserPoolsTokenProvider.setKeyValueStorage(new CookieStorage());

[josemsb92]

That worked perfectly for me, thank you very much. Another question I have is, when using signOut from aws-amplify/auth, it doesn't delete the stored cookie called CognitoIdentityServiceProvider.**********.userData. Previously, this cookie used to be deleted using Auth.signOut().

[nadetastic]

@josemsb92 v6 of the library should not be setting CognitoIdentityServiceProvider.**********.userData (i've also tested and confirmed) so that may be a left over key from v5. Can you try to clear your cookies and check again?

[josemsb92]

@josemsb92 v6 of the library should not be setting CognitoIdentityServiceProvider.**********.userData (i've also tested and confirmed) so that may be a left over key from v5. Can you try to clear your cookies and check again?

Thanks! So, the deal was, I was using a Single Sign-On (SSO) app in a diferent local port to stash my credentials in cookies. Thing is, it was set up to vibe with an older aws-amplify version, and that's why the cookie was sticking around.

[nadetastic]

Ok great, glad to hear that his was resolved for you! Let me know if you have any other questions, otherwise i'll mark this as closed.

[josemsb92]

Just in case it helps someone in the future, I had an issue with CookieStorage where I needed to access Cognito cookies stored on one domain's website from another website within the same domain. The problem was that I wasn't passing the correct domain to the 'domain' parameter of this class, or as in the example above, it wouldn't work since no domain was provided.

It's crucial that subdomains share the same domain if you want to access cookies stored in both. Otherwise, methods like signOut might not work correctly.

So, following the example above, to share cookies between subdomains, it would be something like this:

cognitoUserPoolsTokenProvider.setKeyValueStorage(new CookieStorage({ domain: 'myDomain'}));

[nadetastic]

@josemsb92 thank you for the additional context! If you don't have any more questions related to this issue, I'll go ahead and mark it as closed. Thanks!

[mlombar3]

Just in case it helps someone in the future, I had an issue with CookieStorage where I needed to access Cognito cookies stored on one domain's website from another website within the same domain. The problem was that I wasn't passing the correct domain to the 'domain' parameter of this class, or as in the example above, it wouldn't work since no domain was provided.

It's crucial that subdomains share the same domain if you want to access cookies stored in both. Otherwise, methods like signOut might not work correctly.

So, following the example above, to share cookies between subdomains, it would be something like this:

cognitoUserPoolsTokenProvider.setKeyValueStorage(new CookieStorage({ domain: 'myDomain'}));

i try to apply this example but when i try to log in in answer this error: User needs to be authenticated to call this API.

[kevoj7]

This is extremely critical piece. I've been banging my head for a while on this one. I'm using nextjs with app router.

If not you won't be able to send ajax request to your api gateway:

const handleAPICall = async () => {
    const url = 'example.com';

    try {
        const response = await fetch(url, {
            method: 'GET',
            credentials: 'include',
        });

        const data = await response.json();
        setApiResponse(data);
    } catch (error) {
        console.error('Error making API call:', error);
    }
};

(Provider file) 'use client'; import {Amplify} from 'aws-amplify'; import {CookieStorage} from 'aws-amplify/utils'; import {cognitoUserPoolsTokenProvider} from 'aws-amplify/auth/cognito'; import config from '@/amplifyconfiguration.json';

Amplify.configure(config, {ssr: true});

cognitoUserPoolsTokenProvider.setKeyValueStorage(new CookieStorage({domain: 'example.com'}));

export default function ConfigureAmplifyClientSide() { return null; }