Build a logout button with HTML
Example: custom logout button
You can clone the example logout button on CodePen(opens new window) and make edits, or follow along below.
The example form has the Userfront Core JS library added to the document, as described in the next section.
Add the Userfront Core JS library
You can add the Userfront Core JS library by CDN or using npm.
You only need to do one of these.
Then import the library into your file(s)
Set up the button
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.
Call Userfront.logout() when clicked
The logout() method allows you to log out a user.
Userfront then does the following:
- Invalidates the user's current session
- Clears any Userfront-issued tokens from the browser
- Redirects the page to the After-logout path
Userfront.logout() will do nothing if the user is not logged in.
In the example code here, we do the following:
- Reference all the button with a variable
- Enable the button if the user is logged in by calling
Userfront.tokens.accessToken. If the user is logged in, this will return a value and the
ifstatement will evaluate to
- Add a
buttonLogout()function we can call to handle the button click
- Add an event listener to call
buttonLogout()when the form is submitted
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's HTML.
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
buttonEl.disabled = false. This removes the
disabled property from the button.
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.
Redirect after logout
Once the user's session has been invalidated and their tokens have been cleared from the browser, the browser is redirected to your workspace's After-logout path.
If the user is not logged in and
Userfront.logout() is called, the browser will not be redirected.