How to Implement a Logout Function for Subscribers in Ghost CMS

Ghost CMS is widely appreciated for its focus on simplicity and clean user experiences. While it offers robust functionality for content management and membership systems, one commonly asked question is how to allow subscribers (non-admin users) to log out of the system. By default, Ghost CMS does not include a logout feature for members out of the box, but you can implement one with a few simple steps.

This guide will walk you through how to add a logout function for subscribers using Ghost’s Members API.

Understanding the Need for a Logout Feature

Ghost’s membership functionality is tailored toward newsletters and premium content subscriptions. When subscribers log in, they are authenticated using Ghost’s session management system. However, there is no direct logout button provided by default. Implementing this feature ensures that users have control over their sessions, enhancing security and user experience.

Steps to Implement a Logout Feature for Subscribers

1. Use Ghost’s Members API

Ghost’s Members API includes an endpoint that allows you to manage subscriber sessions. Specifically, the /members/api/session endpoint supports deleting a subscriber’s session, effectively logging them out.

2. Create a Logout Function

To implement the logout feature, you can create a function that sends a DELETE request to the session endpoint.

Here’s an example of the JavaScript code:

function logout() {
    fetch('/members/api/session', {
        method: 'DELETE',
        credentials: 'same-origin'
    }).then(() => {
        // Redirect the user to the homepage or a custom page after logout
        window.location.href = '/';
    });
}

This function sends a request to terminate the user’s session and then redirects them to the homepage or any other desired URL.

3. Add a Logout Button or Link

To make the logout functionality accessible to your subscribers, add a button or link to your site. This can be placed in your theme’s templates, such as default.hbs.

Here’s how you can add it:

<a href="#" onclick="logout()">Logout</a>

Ensure the logout() function is loaded by including the script in your template or embedding it directly in the HTML:

<script>
    function logout() {
        fetch('/members/api/session', {
            method: 'DELETE',
            credentials: 'same-origin'
        }).then(() => {
            window.location.href = '/';
        });
    }
</script>

4. Test the Functionality

Once you’ve added the logout functionality:

• Log in as a subscriber.
• Click the “Logout” link or button you added.
• Verify that the session ends and the user is redirected to the intended page.

Customizing the Logout Experience

You can enhance the logout feature further by:

• Redirecting users to a custom “Goodbye” or “Logged Out” page.
• Adding confirmation modals to ensure intentional logouts.
• Displaying a success message after logging out.

Conclusion

Adding a logout feature for subscribers in Ghost CMS is straightforward with the Members API. By creating a simple DELETE request to the /members/api/session endpoint and integrating it into your theme, you can provide a seamless logout experience for your users. Not only does this improve user control, but it also enhances the security of your membership system.

By taking these steps, you can ensure your subscribers have a complete and secure user experience on your Ghost-powered site.