CODEWITHSUNDEEP
javascriptphpajaxwordpress
Darren
Darren

Reputation: 2290

AJAX overlay if user session expires Wordpress frontend

If a user session expires in wp-admin a user is logged out and with the page still open, WordPress overlays a modal login.

How can I register a user session expiring/logged out from another location and initiate an overlay from the frontend?

Currently, we are bringing up the login form via Javascript with button on('click',...) and the action of logging in and out is handled within functions.php

$('a#show_login').on('click', function(e){
    $('body').prepend('<div class="login_overlay"></div>');
    $('form#login').fadeIn(500);
    $('div.login_overlay, form#login a.close').on('click', function(){
        $('div.login_overlay').remove();
        $('form#login').hide();
    });
    e.preventDefault();
});

Is there a way to identify the user session expiring in real time, then initiating the overlay? I have looked for other references and documentation but cannot find a solution in achieving what is happening in the backend of Wordpress. Ideally, being able to use this on the frontend with the same hooks/actions (if they exist?) would be the perfect solution.

If not, perhaps a combination of AJAX and an action to replicate what the backend is doing for timed out sessions.

Here is the function to initiate the current overlay form

function ajax_login_init(){

wp_register_script('ajax-login-script', get_template_directory_uri() . '/assets/js/ajax-login-script.js', array('jquery') ); 
wp_enqueue_script('ajax-login-script');

wp_localize_script( 'ajax-login-script', 'ajax_login_object', array( 
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'redirecturl' => home_url(),
    'loadingmessage' => __('Sending user info, please wait...')
));

// Enable the user with no privileges to run ajax_login() in AJAX
add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}

// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
}

and an example of the backend expired session

example backend

Please note: I do not want to use a plugin to achieve this.

Upvotes: 0

Views: 1224

Answers (1)

Darren
Darren

Reputation: 2290

I found the solution here https://wordpress.stackexchange.com/questions/223721/interim-login-form-on-frontend

function login_session_expired() {
// we only care to add scripts and styles if the user is logged in.
if ( is_user_logged_in() ) {

    // add javascript file
    wp_register_script( 'wp_auth_check', '/wp-includes/js/wp-auth-check.js' , array('heartbeat'), false, 1);
    wp_localize_script( 'wp_auth_check', 'authcheckL10n', array(
        'beforeunload' => __('Your session has expired. You can log in again from this page or go to the login page.'),
        'interval' => apply_filters( 'wp_auth_check_interval', 1 * MINUTE_IN_SECONDS ), // default interval is 3 minutes
    ) );
    wp_enqueue_script ('wp_auth_check');

    // add css file
    wp_enqueue_style( 'wp_auth_check','/wp-includes/css/wp-auth-check.css', array( 'dashicons' ), NULL, 'all' );

    // add the login html to the page
    add_action( 'wp_print_footer_scripts', 'wp_auth_check_html', 5 );
}
}
add_action( 'wp_enqueue_scripts', 'login_session_expired' );

// make sure the stylesheet appears on the lightboxed login iframe
function login_session_expired_styles() {
    wp_enqueue_style( 'wp_auth_check','/wp-includes/css/wp-auth-check.css', array( 'dashicons' ), NULL, 'all' );
}
add_action( 'login_enqueue_scripts', 'login_session_expired_styles' );

Upvotes: 1

Related Questions