Log Out User | Webflow User Accounts / Memberships

Published

July 17, 2023

Updated

July 17, 2023

VIEW THE LESSON

How Log Out the Current User

What if you want to automatically log out the current user?

Use cases

Log out a user based on a specific situation ( logging in to another location )
Log out a user based on a certain amount of inactivity

Logout approaches

The ideal way to trigger a logout would be through the webflow.js API directly however there is no published method for doing this.

The second most ideal way you be to delete the login cookie however the cookie governing session validity is _{wf_sid} which is an HttpOnly cookie and we cannot delete it using client-side script.

The only remaining way is to trigger a logout using Webflow's login / logout control, but from script.

The element HTML looks like this;

_{<button class="login-in-menu" data-wf-user-logout="Log out" data-wf-user-login="Log in" type="button">Log out</button>}

Important;

Clicking this button initiates a login / logout. Therefore, you need to determine if the user is logged in before clicking this button.
> Use Sygnal's User Info lib to detect login state
> Or you can compare the _{data-wf-user-logout} attribute value here with its inner text. If they're the same, than the user is logged in, and the button reads something like "Log out".
> This would fail if you've given your button the same text for login and logout states.
This button must be on whatever page your logout code executes on. Putting it in your sitewide nav is best.

Inactivity Timer

An example of the code for an inactivity timer ( 15 mins );

let timeout;

// Start a timeout when the page loads
resetTimeout();

// Reset the timeout whenever the user interacts with the page
window.addEventListener('mousemove', resetTimeout);
window.addEventListener('mousedown', resetTimeout);
window.addEventListener('keypress', resetTimeout);
window.addEventListener('scroll', resetTimeout);
window.addEventListener('touchmove', resetTimeout);

function resetTimeout() {
  // Clear the existing timeout
  clearTimeout(timeout);

  // Start a new timeout
  timeout = setTimeout(logout, 15 * 60 * 1000); // 15 minutes
}

function logout() {
  // Log the user out (or whatever you want to do when the timeout expires)
  console.log('Logging out due to inactivity');
}

Technical Notes

Internals notes;

function rU(e) { e.preventDefault(), nU().then(()=>{ window.Webflow.location("/") } ) } function nU() { return VDe.userSystemsRequestClient.mutate({ mutation: YDe.logoutMutation }) }