How Amplify Auth and Cognito Hosted UI set cookie?

1

Hello, I was able to use Amplify Auth and Cognito Hosted UI and enforce cookie storage. However, I do not know which one set-cookie, or which one store the auth information into my web browser cookie?

A. Cognito Hosted UI (exchange response code then set-cookie via HTTP response header)

B. myweb.amplify.com (redirected url/?code=123xxx) web server exchange the response code and set-cookie via HTTP response header

C. Amplify Auth javascript from client side (my web browser) exchange the response code and set-cookie

Here is my Amplify Auth configuration and I used Cognito Hosted UI as well

Amplify.configure({
    Auth: {
            cookieStorage: {
      // - Cookie domain (only required if cookieStorage is provided)
      domain: '.yourdomain.com',
      // (optional) - Cookie path
      path: '/',
      // (optional) - Cookie expiration in days
      expires: 365,
      // (optional) - See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite
      sameSite: 'strict' | 'lax',
      // (optional) - Cookie secure flag
      // Either true or false, indicating if the cookie transmission requires a secure protocol (https).
      secure: true
    },
}
})
hai
asked a year ago5726 views
1 Answer
1

It appears that you are using Amazon Cognito Hosted UI to handle user authentication for your web application. When a user signs in to your application using Cognito Hosted UI, the following process occurs:

The user is redirected to the Cognito Hosted UI login page. The user enters their login credentials and submits the form. If the login is successful, Cognito Hosted UI exchanges the login response code for a set of access and refresh tokens. Cognito Hosted UI then sends a set-cookie header in the HTTP response with the access and refresh tokens as the cookie value. Therefore, the correct answer to your question is:

A. Cognito Hosted UI (exchange response code then set-cookie via HTTP response header)

The set-cookie header is sent by Cognito Hosted UI in the HTTP response after the user successfully signs in, and it is stored in the web browser's cookie storage by the web browser.

SeanSi
answered a year ago
  • Thank you for very clear explanation, I understand that flow. I am still confused because two things.

    1. After successfully logged in with the Cognito Hosted UI, I see the redirect_url with an appended code like: mydomain.amplify.com/?code=12345xxx => what does this mean? Does this mean mydomain.amplify.com will exchange the code for credentials (IdToken, AccessToken) and set credentials into my browser cookie?

    2. The amplify configuration below. My web is NextJS. Does this mean that the Amplify JS code living inside web browser exchange the code for credentials and set credentials to cookie? If I remove cookieStorage setting, then the credentials will be stored in LocalStorage instead.

    Amplify.configure({
        Auth: {
                cookieStorage: {
          // - Cookie domain (only required if cookieStorage is provided)
          domain: '.yourdomain.com',
          // (optional) - Cookie path
          path: '/',
          // (optional) - Cookie expiration in days
          expires: 365,
          // (optional) - See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite
          sameSite: 'strict' | 'lax',
          // (optional) - Cookie secure flag
          // Either true or false, indicating if the cookie transmission requires a secure protocol (https).
          secure: true
        },
    }
    })
    

    and client/browser call

      const user = await Auth.federatedSignIn({
                  provider: CognitoHostedUIIdentityProvider.Cognito
                })
    

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions