in

Login popup

The login popup allows users to log in from the frontend. It’s opened when a user tries to perform an action that requires being logged in (e.g. adding a new post).

Login popup

Requirements

To use the popup, you need to have the Snax plugin activated.

Enable Popup

To enable the popup, please go to the WP Dashboard › Settings › Snax › General tab
and turn on the Enable the login popup option.

Login With Social Network

To allow users to log in using social networks (screen, point 1), the Snax plugin is required. It’s an optional login method, you don’t have to use it.

To set up the social networks, please refer to the Login with social networks page.

Protect With Captcha

To protect your login form with Google reCaptcha (screen, point 3), the Snax plugin is required. This protection is optional but we strongly recommended to activate it.

To activate the captcha protection, please refer to the Captcha protection page.

If you don’t have the Register link in the popup (screen, point 4), you have to
enable registration first.

Disable WordPress Login Form

To disable the WordPress login form (screen, point 2), please go to the WP Dashboard › Settings › Snax › General tab and check the Disable WP login form option.

Why does the Login Popup Show Up After Logging In?

Most often the problem occurs when the Cache-Control: max-age=TTL > 0 HTTP header is set (where TTL is cache expiration time, for example, 2592000 for one month). This header allows the browser to cache pages and serves them on the next access directly from the cache, without calling a remote server. When logged in user gets a page version (cached) intended for logged out users, site’s scripts consider the user as logged out and login dialog is triggered.

How does it work?

  1. A user visits your site, let’s say your homepage
  2. The user is not logged in
  3. Your site, using the header Cache-Control: max-age > 0, allows the browser to cache pages and store them in browser cache (HTTP cache)
  4. The homepage is cached for that user
  5. Keep in mind that the user is still NOT logged in so browser caches the homepage in logged out state
  6. Now, the user logs in
  7. The user visits homepage again
  8. This is a second visit so browser serves a cached version of the homepage
  9. As the browser is not aware of the fact that the user has logged in, it serves cached version until the cache expires (after TTL)
  10. As a result, logged in user still gets the same homepage version as they were logged out
  11. As the user still gets old (cached) version, scripts still consider the user as logged out and open the login dialog

How do you check whether your site is affected by the problem?

To check if the problem occurs on your site, please do the steps below:

  1. Log into your site via /wp-admin/ URL
  2. Visit homepage, you should see admin bar on top of it
  3. Log out and purge cache in your browser
  4. Visit homepage as logged out user. The browser should now cache homepage for you
  5. Now, go to /wp-admin/ URL and log in as admin
  6. Open new browser tab, paste your homepage URL and click ENTER
  7. If you don’t see the admin bar on top of your homepage, even you are logged in, your have max-age sets to value > 0 and the problem affects your site

Where to look for a source of the problem?

The header Cache-Control: max-age=TTL > 0 can be set by:

  • your hosting server
  • a proxy server like CDN
  • plugins like W3 Total Cache

Solutions for popular services

Cloudflare
Reference: Caching Static HTML with WordPress/WooCommerce

  1. Log into your Cloudflare account
  2. Click the Caching app
  3. Scroll down to Browser Cache TTL, and select the Respect Existing Headers value

WP Engine
Reference: LEVERAGE BROWSER CACHING WITH CACHE-CONTROL HEADERS

WP Engine Cache-Control headers can be increased, but not decreased from 600 seconds (10 minutes).
Cache-control headers set lower than 600 (10 minutes) will not be effective, as this is the length of time set on WP Engine’s caching server directly.
Anything lower than 600 requires a full page cache exclusion, which can be added by WP Engine Support.

General solution

When the header Cache-Control: max-age=TTL > 0 is set, there is no way to prevent the browser from caching, this is how HTTP cache in the browser works.
On a site with dynamic elements (user nav in header, votings, front submission) cache browser causes more harm than good.
Other cache layers like (page cache provided by e.g. WP Super Cache or W3 Total Cache) and proxy cache (CDN) are enough.
You have to find out who/what sets the Cache-Control: max-age=TTL > 0 header and set TTL to 0.

What do you think?

-16 Points
Upvote Downvote

Global Featured Entries