Build a logout button with React

In this section, we create a custom logout button that will:

• Show a disabled state when not logged in
• Clear the user's tokens
• Redirect after logout to your After-logout path

You can clone the example logout button on CodePen(opens new window) and make edits, or follow along below.

You can add the Userfront Core JS library by CDN or using npm.

You only need to do one of these.

Create your logout button with the elements you want to use.

In this case, we're using a custom-styled <button> element that is red when active and gray if the user is not logged in.

#Logout button React code

#constructor()

Here we set up our state variable disabled to determine whether to disable the button.

We also bind our handleClick function so that this.setState will update the state variables.

#handleClick()

When the button is clicked, this function will call Userfront.logout().

#render()

Adds the logout button and connects it to the handleClick() function.

The logout() method allows you to log out a user.

Userfront then does the following:

1. Invalidates the user's current session
2. Clears any Userfront-issued tokens from the browser
3. Redirects the page to the After-logout path

You are not required to show the button when the user is not logged in; usually the logout button is only shown on pages where the user must be logged in.

You can show a disabled state by adding the disabled property to the button.

If the user is logged in, Userfront.tokens.accessToken will return a value, so we can test against this and enable the button by setting state.disabled = !Userfront.tokens.accessToken.

We can then map the disabled state to the <button> element.

Whenever Userfront.logout() is called, the method makes an API call to Userfront to invalidate the user's current session and clear any refresh tokens.

The method then removes the access token and ID token cookies from the browser.

Once the user's session has been invalidated and their tokens have been cleared from the browser, the browser is redirected to your account's After-logout path.

If the user is not logged in and Userfront.logout() is called, the browser will not be redirected.