Store Cognito Credentials in Cookies instead of LocalStorage in Amplify Auth

AWS Amplify is the trending tool when it comes to Server-Less Application or mobile application deployment on AWS. 

AWS Amplify is an amazing tool that makes developer life easy when it comes to full-stack apps in the front-end and the back-end on AWS with a few clicks by providing libraries, frameworks, CLI tools, and cloud services. 

Few most important configurations are out there that amplify do not provide by default. As a beginner developer, you are facing this problem, that is why you are here.

Before moving forward I would like to tell you that ask yourself 'Is cookie the best scenario for you need? or Local Storage is better in your case?  

If you want to understand more about when you should use cookies and Local Storage. Then read the below StackOverflow thread on cookies and local storage use cases.

https://stackoverflow.com/questions/3220660/local-storage-vs-cookies

 Store cognito credentials in cookies instead of local storage in amplify auth using below steps:-

Step-1: 

 In your main application file import aws_exports.js file which is by default create by AWS Amplify

import { Auth } from 'aws-amplify';
import {aws_exports } from './../aws_exports.js';

Auth.configure(aws_exports})

Step-2:

Now add the following line in your Amplify configuration. but make sure do not update aws_exports.js file. Each time you deploy your application on amplify aws_exports.js file regenerated

import { Auth } from 'aws-amplify';
import {aws_exports } from './../aws_exports.js';

aws_exports['cookieStorage'] = {
            domain: 'localhost',
            path: '/',
            expires: 365,
            sameSite: "strict" | "lax",
            secure: false
        }
Auth.configure(aws_exports})

CookieStorage Terminology Explanation in Amplify:

 domain:- Cookie domain (only required if cookieStorage is provided), while on producation change this option to the base URL of your application.

path:- The Path attribute indicates a URL path that must exist in the requested URL in order to send the Cookie header. The %x2F ("/") character is considered a directory separator, and subdirectories match as well.

expires:- Expires attribute simply represent the cookies life.

sameSite:- This provides some protection against cross-site request forgery attacks (CSRF). It takes three possible values: Strict, Lax, and None. 

secure:- Secure attribute decide weather your cookie will be accessible from HTTP or HTTPS. When you are on production server change this value to true.

So hey amplify beginner you have successfully set Cookies instead of Local Storage for storing cognito credentials in amplify auth.

If you are want to read any article related to JavaScript you can check these articles.

• Sort Table Data with ReactJS | Hacker Rank ReactJS (Basic) Certification Question  
• How to build a responsive filterable gallery using ReactJS
• Attractive Glassomorphic Calculator Design Using HTML CSS & JavaScript 
  

 I hop you may get your solution by reading this article. If you have any doubt related to this article or any AWS service you can comment down below or contact me via email.

Thanks for reading the complete Article.