Guest mode

Custom HTML forms

Additional resources

Example on GitHub @userfront/core on npm HTML example docs HTML quickstart guide UI Toolkit prebuilt HTML forms

Signup form Login form Password reset form Logout button

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

#Example: custom logout button

You can clone the example logout button on CodePen and make edits, or follow along below.

Note

The example form has the Userfront Core JS library added to the document, as described in the next section.

See the Pen by userfront (@userfront) on CodePen.

#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.

#CDN

html

<script src="https://cdn.userfront.com/@userfront/core@latest/build/userfront-core.umd.js"></script>

#NPM

shell

npm install @userfront/core

Then import the library into your file(s)

import Userfront from "@userfront/core";

#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.

html

<button id="logout-button" disabled>
  Logout
</button>

css

#logout-button {
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
}

#logout-button[disabled] {
  background-color: lightgray;
  color: gray;
}

#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

// Sample: how to use Userfront.logout()
Userfront.init("demo1234");
Userfront.logout();

Note

Userfront.logout() will do nothing if the user is not logged in.

#Example JavaScript

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 if statement will evaluate to true.
Add a buttonLogout() function we can call to handle the button click
Add an event listener to call buttonLogout() when the form is submitted

// Initialize Userfront
Userfront.init("demo1234");

// 1. Reference the button
var buttonEl = document.getElementById("logout-button");

// 2. Enable the button if the user is logged in
if (Userfront.tokens.accessToken) {
  buttonEl.disabled = false;
}

// 3. Log out the user
function logout(e) {
  // Prevent the form's default behavior
  e.preventDefault();
  // Call Userfront.logout()
  Userfront.logout();
}

// 4. Add an event listener for the button click
buttonEl.addEventListener("click", logout);

#Disabled state

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.

html

<button class="logout-button" disabled>
  Logout
</button>

var buttonEl = document.getElementById("logout-button");

if (Userfront.tokens.accessToken) {
  buttonEl.disabled = false;
}

#Clearing tokens

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.

#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.