clearing token and localstorage after logging out & conditionally hid…

…ing and showing signout button after authentication
pramit-marattha · Jan 13, 2021 · 37c9d6b · 37c9d6b
1 parent ff6e427
commit 37c9d6b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git a/client/actions/authentication.js b/client/actions/authentication.js
@@ -32,6 +32,18 @@ export const login = (user) => {
         .catch(error => console.log(error));
 };
 
+export const logout =(next) =>{
+    removeCookie('token')
+    removeLocalStorage('user')
+    next();
+
+    return fetch(`${API}/api/logout`,{
+        method: "GET"
+    }).then(response =>{
+        console.log("Successfully Logged Out")
+    }).catch(err=> console.log(err))
+}
+
 // setting the cookie
 export const setCookie = (key,value)=>{
     if(process.browser){
@@ -53,7 +65,7 @@ export const removeCookie = (key)=>{
 // getting the cookie
 export const getCookie = (key)=>{
     if(process.browser){
-        cookie.get(key);
+       return cookie.get(key);
     }
 };
 

diff --git a/client/components/Header.js b/client/components/Header.js
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import Link from "next/link";
 import {APP_NAME} from "../config.js";
+import {logout,isAuthenticated} from "../actions/authentication.js";
+import Router from "next/router";
 import {
   Collapse,
   Navbar,
@@ -30,20 +32,41 @@ const Header = (props) => {
         <NavbarToggler onClick={toggle} />
         <Collapse isOpen={isOpen} navbar>
           <Nav className="ml-auto" navbar>
+           {!isAuthenticated() && (
+             <>
+             <NavItem>
+             <button className="btn btn-success">
+                <Link href="/#">
+              <NavLink>
+                Login
+              </NavLink>
+                </Link>
+                </button>
+            </NavItem>
+
+                <button className="btn btn-info">
             <NavItem>
                 <Link href="/#">
               <NavLink>
                 Resgister
               </NavLink>
                 </Link>
             </NavItem>
-           <NavItem>
-                <Link href="/#">
-              <NavLink>
-                Login
+
+            </button>
+             </>
+           )}
+            {/* {JSON.stringify(isAuthenticated())} */}
+            {isAuthenticated() && (
+                <NavItem>
+                <button className="btn btn-danger">
+              <NavLink onClick={()=>logout(()=>Router.push(`/#`))}>
+                Logout
               </NavLink>
-                </Link>
+              </button>
             </NavItem>
+            )}
+
           </Nav>
         </Collapse>
       </Navbar>

diff --git a/client/components/authentication/#Auth.js b/client/components/authentication/#Auth.js
@@ -1,5 +1,5 @@
 import React,{useState} from 'react';
-import {login,authenticate,isAuthenticated} from "../../actions/authentication.js";
+import {login,authenticate} from "../../actions/authentication.js";
 import Router from "next/router";
 
 const LoginAuth = () => {