Check if user is logged in via JS? [duplicate]

Question

Im experimenting with random theme and "new technology" and Im trying to convert whole front-end to pure JS single page application (no page refreshes - like Facebook, Twitter etc) using WP REST API, Redux.js and React.js and few other helpers.

How to handle logged-in users? How do I keep track of that? I know that this information is normally handled with cookies. How would one check it via JS?

I could just make an ajax call every time route/url changes and use is_user_logged_in() in server-side but it seems primative. Could I access directly to cookie via JS and check it in browser?

---

• I gave it a long thought if that's off-topic here but it really seems like a very WP specific question
• Im just experimenting and trying to push it to a new level, please no "this is a bad idea" comments

Answer 1

As you are going to send ajax request from theme (frontend) you need to specify the ajaxurl otherwise it will throw an error "undefined ajaurl"

/**
 * frontend ajax requests.
 */
wp_enqueue_script( 'frontend-ajax', JS_DIR_URI . 'frontend-ajax.js', array('jquery'), null, true );
wp_localize_script( 'frontend-ajax', 'frontend_ajax_object',
    array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    )
);

then in your frontend-ajax.js you can can send ajax request like this

$.ajax({
    url: frontend_ajax_object.ajaxurl,
    type: 'GET',
    data: {
        action: 'register_action_hook',
    },
    success: function( response ) {
        console.log( response );
    },
});

then in your functions.php you can hook your function to the register_action_hook.

add_action( 'wp_ajax_register_action_hook', 'prefix_do_something' );
function prefix_do_something() {
    if ( is_user_logged_in ) {
        // do something
    } else {
        // do something else
    }
}

you can also use the @Howdy_McGee method to localize the is_logged_in variable using

wp_localize_script( 'handler', 'js_object', $array_of_variables );

and accessing it in your js with js_object.variable_name see the @Howdy_McGee answer for reference.

Answer 2

You will need to check cookies than (and probably DB) or call a function somehow (maybe ajax or something like that) to check if user is logged in and what user is it. Try looking at the function wp_validate_auth_cookie() at wp-includes/pluggable.php

Answer 3

We can localize data whenever we enqueue the scripts:

function localize_vars() {

    // Register your script so we may reference it.
    wp_register_script( 'some_handle', 'path/to/myscript.js' );

    $js_arr = array( 'logged_in' => is_user_logged_in() );

    // Localize our data
    wp_localize_script( 'some_handle', 'object_name', $js_arr );

    // Enqueue Your Script!
    wp_enqueue_script( 'some_handle' );
}
add_action( 'wp_enqueue_scripts', 'localize_vars' );

We register our script, create an associative array so it can convert it to object properties, localize it, and finally enqueue it as normal. In your JS file you can then check if a user is logged in by referencing the object_name and associative array index:

jQuery( function( $ ) {
    if( object_name.logged_in ) { // True or False 
        /* ... */
    }
} );