Skip to content

Ability to logout from frontend #186

Closed
campb303 opened this issue Feb 9, 2021 · 5 comments
Closed

Ability to logout from frontend #186

campb303 opened this issue Feb 9, 2021 · 5 comments
Assignees
Labels
feature-request Request for functionality that has not already been implemented

Comments

@campb303
Copy link
Collaborator

campb303 commented Feb 9, 2021

Can't do it. Should be able to.

@campb303 campb303 added feature-request Request for functionality that has not already been implemented frontend labels Feb 9, 2021
@campb303 campb303 added this to the v2-production-ready-read-only milestone Feb 9, 2021
@campb303
Copy link
Collaborator Author

Logging out can be achieved by setting the isLoggedIn variable to false from the AuthProvider component.

@campb303 campb303 removed the frontend label Mar 17, 2021
@campb303 campb303 self-assigned this May 5, 2021
@campb303
Copy link
Collaborator Author

campb303 commented May 5, 2021

Depends on #49

@campb303 campb303 assigned wrigh393 and unassigned campb303 May 17, 2021
@campb303 campb303 added the high-priority Needs immediate extra focus label May 17, 2021
@wrigh393
Copy link
Collaborator

The PR for #49 has just been opened, but here is how logging out was implemented assuming that it will be merged in a similar way to how it functions now.

Because we have context providers toggling the login state required importing the useLoginSetter hook to set the value of that determines if the user is logged in to false

Because the access token is stored in a cookie, if a user logged out they would still be able to navigate to the AppView without having to log in again. In order to fix this problem the cookie that contains the access token that allows users to access the AppView needs to be deleted when a user logs out. This was easy to implement as react-cookie, the library that we are using to manage cookies provides functionality that can delete cookies.

Both of these were implemented in a function that is passed to the ItemAppBarActions component created in #49. Here is how that implementation works.

handleLogout function

	const setLogin = useLoginSetter();
	const setToken = useTokenSetter();
	const [cookies, removeCookie] = useCookies(["csrf_refresh_token"]);

	const handleLogout = () => {
		setLogin(false);
		removeCookie(["csrf_refresh_token"])
	}

ItemAppBarActions implementation

<ItemAppBarActions
tooltipTitle={"Logout"}
onClick={() => handleLogout()}
icon={<LogoutIcon />}
/>

@campb303 campb303 assigned campb303 and unassigned wrigh393 May 24, 2021
@campb303 campb303 removed the high-priority Needs immediate extra focus label Jul 6, 2021
@campb303 campb303 removed this from the production-ready-read-only milestone Jul 6, 2021
@wrigh393
Copy link
Collaborator

Now that actions are passable to the ItemTableAppbar logout functionality is available. It uses the same functions as before, which I will list again below.

handleLogout function

	const setLogin = useLoginSetter();
	const [cookies, removeCookie] = useCookies(["csrf_refresh_token"]);

	const handleLogout = () => {
		setLogin(false);
		removeCookie(["csrf_refresh_token"])
	}

This function does two things:

  1. It set the loggedIn state variable to false, thus sending the user back to the login screen.
  2. It removes the cookie that stores the user's refresh token. Without removing this cookie even if the user wasn't logged in they would still be able to navigate to the ItemTable.

These work together to make it so a user has to log back in after they click the logout button.

@wrigh393 wrigh393 linked a pull request Jul 16, 2021 that will close this issue
@campb303
Copy link
Collaborator Author

Closed in #226

Sign in to join this conversation on GitHub.
Labels
feature-request Request for functionality that has not already been implemented
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants