Deluxe Blog Tips
About
Projects
It's easy to check if the current user is logged in with PHP in WordPress. Simply use is_user_logged_in() function. However, how to do it with JavaScript?
How WordPress stores the login state?
Most PHP applications like Laravel uses sessions to store the login state. When you login to a website, a new PHP session is created with the authentication data (like username and password hash). This authentication data is used to check your login state when you visit another page on the website.
However, WordPress doesn't use sessions to track user login state. Instead of that, it uses cookies. If you open the console of the browser after you login to a WordPress website, you'll see something similar to this:
There are several cookies created by WordPress on this screenshot:
wordpress_logged_in_[hash]: to store user login statewordpress_sec_[hash]: to store the data for the current admin pagewp-settings-1: specific WordPress settings, like editor modewp-settings-time-1: the timing (probably the last updated) for the WordPress settings above
On login, WordPress uses the wordpress_[hash] cookie to store your authentication details. Its use is limited to the Administration Screen area, /wp-admin/. After login, WordPress sets the wordpress_logged_in_[hash] cookie, which indicates when you're logged in, and who you are, for most interface use.
WordPress also sets a few wp-settings-{time}-[UID] cookies. The number on the end is your individual user ID from the users database table. This is used to customize your view of admin interface, and possibly also the main site interface.
As you can see, to get the current login state of the user, we need to use the wordpress_logged_in_[hash] cookie. However, the name and the value of the cookie are encrypted (hashed). The cookie name is also vary for different users.
Because of these reasons, although cookies are accessible to JavaScript, the way WordPress store cookies makes us impossible to use JavaScript to check if user is logged in. So, we have to find a better way to do that.
How to check if user is logged in with JavaScript
Fortunately, there's workaround to use JavaScript to check if user is logged in. It's based on what WordPress outputs on the front end.
If your theme has body_class() in the <body> tag (actually, all good WordPress themes have to implement this), then you'll see logged-in users have logged-in class in the body tag.
With understanding, we can check if the current user is logged in with JavaScript simply, like this:
if ( document.body.classList.contains( 'logged-in' ) ) {
console.log( 'The user is logged in' );
} else {
console.log( 'The user is not logged in' );
}It's important to note that, your theme must have body_class() in the <body> tag. It works in 99% of all cases. However, if you use a different way to build your site templates, like using MB Views as I do for this blog, your <body> tag might not have the logged-in class. Or if you filter to remove some body classes, then this class is not available, neither. In these cases, the technique above won't work.
But that's just the edge case and rarely happens. I'm sure when it happens, it's your purpose and you have reasons to do so! In other cases, if you use a normal WordPress theme that doesn't implement body_class() in the <body> tag, it's a sign of a bad theme and you should switch to another theme.