React: Delete cookie when user closes the browser

Question

I'm using the library react-cookie (https://www.npmjs.com/package/react-cookie) and I want to delete the user cookies when the browser or tab is closed. I used ComponentWillUnmount in my Approuter, but that doesn't work when the browser is closed. Anyone know how to achieve this?

import React from 'react';
import {Router, Route, Switch} from 'react-router-dom';
import history from '../data/history';
import { withCookies, Cookies } from 'react-cookie';
import { instanceOf } from 'prop-types';


class AppRouter extends React.Component{

static propTypes = {
    cookies: instanceOf(Cookies).isRequired
};


constructor(props){
    super(props)
}

componentWillMount(){
    const {cookies} = this.props;
    cookies.remove('userInfo');
}

render(){
    return(
        <Router history={history}>
            <div>
                <Header/>
                <div className="main-container">
                    <Switch>
                        //routes
                    </Switch>
                    <Footer/>
                </div> 
            </div>
        </Router>
    );
}
}

export default withCookies(AppRouter);

The router does receive the cookies so why can't I remove it with componentWillUnmount? And how do I remove them?

Wouldn't the cookie be deleted if you remove the expiration date? AFAIK a cookie without expiration date lasts only for that particular session. — Mirakurun, Nov 26 '18 at 11:59
Well, then it should expire by the end of the session. https://security.stackexchange.com/a/33748 — Mirakurun, Nov 26 '18 at 12:46
Sorry, my bad. Didn't see that you want to delete it also on tab close. This one won't work for that case, yes. — Mirakurun, Nov 26 '18 at 12:49
thanks very much bro...your code helped me a lot...to logout n remove cookies — Manu Panduu, May 04 '20 at 04:22

score 2 · Answer 1 · answered Nov 26 '18 at 12:00

2

When you create cookie. please set expires to 0. e.g

cookies.set('userInfo', name, { expires: 0 });

Then this cookie will be expired when browser closed.

answered Nov 26 '18 at 12:00

Julian

1,592
1
13
33

This works when the browser is completely is shut down, but not when the tab is closed. Any tips for that? – djamaile Nov 26 '18 at 12:18

João Faro · Answer 2 · 2023-04-12T18:56:27.463

0

Old post but today I was needing this and did some search and found nothing, until I came up with an easy solution. Posting here hoping it will help someone.

You just need to add the following to your 'index.js':

const handleBeforeUnload = () => {
  Cookies.remove('userinfo');
};
window.addEventListener('beforeunload', handleBeforeUnload);

edited Apr 12 '23 at 18:56

answered Apr 12 '23 at 18:54

João Faro

3
3

score -1 · Answer 3 · answered Nov 26 '18 at 11:56

-1

Not really React specific but you can use this :

window.addEventListener("beforeunload", (ev) => 
{  
    ev.preventDefault();
    cookies.remove('userInfo');
});

Maybe call it on mount so you can have access your class instance.

answered Nov 26 '18 at 11:56

Fawzi

359
2
12

score -1 · Answer 4 · answered Nov 26 '18 at 11:58

-1

This may help you...

componentDidMount(){
    window.addEventListener(
        "beforeunload",
        cookies.remove('userInfo')
    );
}

answered Nov 26 '18 at 11:58

onejeet

1,191
6
14

React: Delete cookie when user closes the browser

4 Answers4