storing user information and token keys inside cookie and localStorage

Author: pramit-marattha

client/actions/authentication.js

@@ -1,5 +1,6 @@
 import fetch from "isomorphic-fetch";
 import {API} from "../config.js";
+import cookie from "js-cookie";
 
 export const signup = (user) => {
     return fetch(`${API}/api/signup`, {
@@ -29,4 +30,64 @@ export const login = (user) => {
             return response.json();
         })
         .catch(error => console.log(error));
-};
+};
+
+// setting the cookie
+export const setCookie = (key,value)=>{
+    if(process.browser){
+        cookie.set(key,value,{
+            expires:365
+        });
+    }
+};
+
+// removing the cookie
+export const removeCookie = (key)=>{
+    if(process.browser){
+        cookie.remove(key,{
+            expires:365
+        });
+    }
+};
+
+// getting the cookie
+export const getCookie = (key)=>{
+    if(process.browser){
+        cookie.get(key);
+    }
+};
+
+// setting up localstorage
+export const setLocalStorage = (key,value) =>{
+    if(process.browser){
+        localStorage.setItem(key,JSON.stringify(value))
+    }
+};
+
+// removing localstorage
+export const removeLocalStorage = (key) =>{
+    if(process.browser){
+        localStorage.removeItem(key)
+    }
+};
+
+// authentication of user by passing data to cookie as well as localstorage
+export const authenticate = (data,next)=>{     // takes two argument one is data and another one is call back argument
+    setCookie('token',data.token);
+    setLocalStorage('user',data.user);
+    next();
+}
+
+// if user is authenticated 
+export const isAuthenticated =()=>{
+    if(process.browser){
+        const checkingCookie = getCookie('token')
+        if (checkingCookie){
+            if(localStorage.getItem('user')){
+                return JSON.parse(localStorage.getItem('user'))
+            } else {
+                return false;
+            }
+        }
+    }
+}

client/components/authentication/LoginAuth.js

@@ -1,5 +1,5 @@
 import React,{useState} from 'react';
-import {login} from "../../actions/authentication.js";
+import {login,authenticate,isAuthenticated} from "../../actions/authentication.js";
 import Router from "next/router";
 
 const LoginAuth = () => {
@@ -24,7 +24,10 @@ const LoginAuth = () => {
                 // user token to cookie
                 // user information to localstorage
                 // authenticate the user
-                Router.push(`/`)
+                authenticate(data,()=>{
+                    Router.push(`/`) 
+                })
+                
             }
         });
     };

client/package-lock.json

@@ -12,6 +12,7 @@
   "license": "ISC",
   "dependencies": {
     "isomorphic-fetch": "^3.0.0",
+    "js-cookie": "^2.2.1",
     "next": "^10.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",