How to Create User Signout API and Implement Functionality in a MERN Stack App

How to Create User Signout API and Implement Functionality in a MERN Stack App

Here are The Steps –

Step 1 – Create a route –

router.post(‘/signout’, signOut)

Step 2 –  Create a signOut Controller –

export const signOut=(req, res, next)=>{
    try {
        res.clearCookie(‘access_token’).status(200).json(‘User has been Signout’)
    } catch (error) {
        next(error)
    }
}

Step 3 – Add onClick on SignOut Button –

<span className=‘ cursor-pointer’ onClick={handleSignout}>Sign Out</span>
 

Step 4 – Add signoutSuccess reducer –

signOutSuccess:(state)=>{
            state.currentUser=null;
            state.error=null;
            state.loading=false
        }
Step 5 – export reducer
export const {signOutSuccess} =userSlice.actions;
Step 6 – import reducer –
import {signOutSuccess} from ‘../redux/user/userSlice.js’

Step 7 –

const handleSignout=async()=>{
    try {
      const res=await fetch(‘/api/user/signout’, {
        method:‘POST’
      });
      const data=await res.json();
      if(!res.ok){
        console.log(data.message)
      }else{
        dispatch(signOutSuccess())
      }
    } catch (error) {
      console.log(error.message)
    }
  }
Video Tutorial: