Client Side
removeUser tells the server side to look for the user with the specific ID. Then, remove that user from the database.
user/apiUser.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
export const removeUser = async (userId, token) => { console.log(`removeUser', '1) remove user for user id: ${userId} from the server` ) return await fetch(`http://localhost:8080/user/${userId}`, { method: "DELETE", mode: "cors", headers: { Accept : "application/json", "Content-Type": "application/json", Authorization: `Bearer ${token}`, 'Access-Control-Allow-Origin':'*' } }) .then(response => { console.log('removeUser', '3) response received') return response.json() }) .catch(err => { this.setState({ redirectToSignin: true }) return err }) } |
auth/index.js
SignOutUser first looks at the client’s local storage. It removes the jwt key/value.
Then it tells the server to clear the cookie for this client.
Cookies are stored per-user on the users machine. A cookie is usually just a bit of information. Cookies are usually used for simple user settings colours preferences ect.
Cookies can be cleared through the browser’s settings via a “clear cookie” button. A cookie file can also be opened by the user when they go through your temporary Internet files history and can locate your cookie there. They can then open it and look at the contents. Hence, No sensitive information should ever be stored in a cookie.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// next is just a callback export const SignOutUser = (next) => { console.log('SignOutUser - clear cookie for this client!') if (typeof window !== "undefined") localStorage.removeItem("jwt") next() // tells server to clear cookie return fetch("http://localhost:8080/signout", { method: "GET" }).then(response => { console.log('signout', response) return response.json() }).catch(err => console.log(err)) } |
We use server calls for removing the user and clearing the cookie in our DeleteUser functionality. After deleting is complete, we simply redirect the user to the home screen.
user/DeleteUser.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import React, { Component } from 'react'; import { IsAuthenticated } from '../auth'; import { removeUser } from './apiUser'; import { SignOutUser } from '../auth'; import { Redirect } from 'react-router-dom'; class DeleteUser extends Component { state = { redirect: false } deleteAccount = () => { console.log('delete this account!!!'); const token = IsAuthenticated().token; const userId = this.props.userId console.log(`deleting user ID ${userId} with token ${token}`) removeUser(userId, token) .then(data => { if (data.error) { console.log(data.error) } else { // signout user // we provide callback for next() in SignOutUser SignOutUser( () => console.log('User is deleted')) ; // redirect this.setState({ redirect: true }); } }) } deleteConfirm = () => { let answer = window.confirm("Are you sure you want to Delete your account?") if (answer) { this.deleteAccount(); } } render() { if (this.state.redirect) { return <Redirect to="/" /> } return ( <button onClick={this.deleteConfirm} className="btn btn-raised btn-danger"> Delete Profile </button> ); } } export default DeleteUser |
Server side
controllers/user.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
exports.deleteUser = (req, res, next) => { console.log(`controllers/user.js -- deleteUser -- `) let user = req.profile; user.remove((err, user) => { if (err) { return res.json({ error: err }) } console.log('deleteUser', 'no errors, going to delete' ); user.hashed_password = undefined user.salt = undefined res.json({message: `User ${user.name} deleted succesfully`}) }) } |