Ready-to-use logout button with Vue
Example: Vue.js logout button
Install the Userfront Vue library
To add the form to your Vue project, first install
@userfront/vue with npm (or yarn).
Render the logout button in Vue
First, initialize the Userfront Vue library with your account ID using
You can do this in the main file (as shown here) or in a component file. If you do this in the main file, you only need to do it once.
LogoutButton component from
@userfront/vue and register it as a component.
Then you can use the
<logout-button /> component in your
<template> tag. You can find your
tool-id in the Toolkit section of the Userfront dashboard.
If the user is not logged in, the logout button will show in a 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.
Whenever the user is logged in, the logout button will be clickable.
Whenever the logout button is clicked, it makes an API call to Userfront to invalidate the user's current session and clear any refresh tokens.
The button 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 After-logout path.
If the user is not logged in and the button is clicked, the browser will not be redirected.