unable to authenticate after using the signIn API

[israx]

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

Next.js

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

CDK

Environment information

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

Describe the bug

I am unable to get authentication tokens on the cookies after the signIn API returns the DONE step.

Expected behavior

The app to authenticate

Reproduction steps

1. signIn
2. not getting auth tokens in the cookies

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

[israx]

Based on the information provided, it appears that you're experiencing issues with authentication tokens not being set in cookies after a successful sign-in using Amplify v6 with Next.js. To better understand and diagnose your issue, I need some additional information:

1. Can you provide the code snippet for your sign-in implementation, including how you're calling the signIn API and handling the response?

2. Have you configured Amplify to use cookies for token storage? If so, can you share your Amplify configuration, particularly the part related to Auth?

3. Are you testing this in a development environment or a production build? Some Next.js features behave differently in these environments.

4. After the sign-in process, have you checked the Application tab in your browser's developer tools to see if any cookies are being set at all?

These details will help me understand your setup better and provide a more accurate solution to your authentication token issue.

[israx]

1.

await signIn({username, password});

2. I am using Next JS

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

3. It is local mode

4. Yes I have checked. The tokens are rejected by the browser

[israx]

Thank you for providing additional information about your issue. Based on your responses, it seems that the browser is rejecting the authentication tokens when they're being set as cookies. This can happen due to various reasons, but one common cause in local development environments is related to cookie security settings. Here's a workaround you can try:

1. Modify your Amplify configuration to explicitly set the cookie options. Add the following to your configuration:

import { Amplify } from 'aws-amplify';

Amplify.configure({
  ...config,
  ssr: true,
  Auth: {
    ...config.Auth,
    cookieStorage: {
      domain: 'localhost',
      path: '/',
      expires: 365,
      sameSite: 'strict',
      secure: false
    }
  }
});

2. Make sure you're running your Next.js application with HTTPS, even in local mode. You can do this by creating a self-signed certificate and configuring Next.js to use it. Here's how:

   a. Generate a self-signed certificate:

   openssl req -x509 -out localhost.crt -keyout localhost.key \
    -newkey rsa:2048 -nodes -sha256 \
    -subj '/CN=localhost' -extensions EXT -config <( \
     printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

   b. Update your Next.js configuration (next.config.js):

   const fs = require('fs');
   const path = require('path');
   
   module.exports = {
    ...
    server: {
      https: {
        key: fs.readFileSync(path.join(process.cwd(), 'localhost.key')),
        cert: fs.readFileSync(path.join(process.cwd(), 'localhost.crt')),
      }
    }
   };

   c. Run your Next.js app with the HTTPS server:

   npm run dev -- --https

3. After making these changes, clear your browser cache and cookies, then try signing in again.

This workaround adjusts the cookie settings to be more permissive in a local development environment and ensures you're using HTTPS, which is often required for secure cookie storage. If you're still experiencing issues after trying this, please let me know, and we can explore other potential solutions.

[israx]

This suggestion is to use Amplify V5. What is the Amplify v6 version of it?

[israx]

I apologize for the confusion in my previous response. You're correct that the solution provided was for Amplify v5. Let me provide you with the correct approach for Amplify v6.

For Amplify v6, the configuration is slightly different. Here's how you can configure cookie storage for authentication in Amplify v6 with Next.js:

1. Update your Amplify configuration:

import { Amplify } from 'aws-amplify';
import { cognitoUserPoolsTokenProvider } from 'aws-amplify/auth/cognito';

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

cognitoUserPoolsTokenProvider.setKeyValueStorage({
  setItem: (key, value) => {
    document.cookie = `${key}=${value}; path=/; secure; max-age=3600; SameSite=Strict`;
  },
  getItem: (key) => {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
      const [name, value] = cookie.trim().split('=');
      if (name === key) return value;
    }
    return null;
  },
  removeItem: (key) => {
    document.cookie = `${key}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
  }
});

2. For local development, you might still need to run your Next.js app with HTTPS. You can use the same method as described in the previous response to set up a self-signed certificate.

3. If you're still experiencing issues with cookies being rejected, you can try modifying the cookie settings in the setItem function:

setItem: (key, value) => {
  document.cookie = `${key}=${value}; path=/; max-age=3600; SameSite=Lax`;
},

This sets the SameSite attribute to 'Lax' and removes the 'secure' flag, which might be necessary for local development without HTTPS.

Remember to adjust these settings appropriately for your production environment, ensuring proper security measures are in place.

If you're still encountering issues after implementing these changes, please let me know, and we can further investigate the problem.

[israx]

I was able to solve the issue. Thanks

[israx]

Thank you for raising this issue. If you have any questions or if this issue resurfaces, please don't hesitate to reopen it or create a new one.