Protect Post Content and Avoid Page Refresh using AJAX upon Password Submit – PHP Versions

I learned to details your code snippet and notice mistakes.
Please, read everything firstly, then you could try.

Mistake 1

Shortcode has been defined with a wrong function name

add_shortcode( 'protected', 'shortcode_protected' );

Should be replaced with

add_shortcode( 'protected', 'bio_protected_function' );

Mistake 2

Script tag should be replaced by the enqueueing system to guarantee script sequences.

The snippet

<script>
    function protectedFunction(form) {
        $('#protectedButton').on('click', function (e) {
            e.preventDefault();
            $.ajax({
                success: function (data) {
                    $("#errorPWdata").html(data);
                },
                error: function () {
                    alert("Password record error. Contact the administrator.");
                }
            });
            document.cookie = "userpass=" + escape(form.userpass.value) + "; path=/";
        }
    }
</script>

Should be replaced with this one

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'bio-shortcode-protected',
        get_theme_file_uri( 'assets/js/bio-shortcode-protected.js' ),
        [ 'jquery' ],
        '1',
        true
    );
} );
wp_enqueue_scripts();

An appropriate bio-shortcode-protected.js file should be created
path-to-your-theme/assets/js/bio-shortcode-protected.js (Content of the file in next mistake)

Mistake 3

1. By default WordPress loads jQuery as a global JavaScript object

   jQuery should works meanwhile $ probably won’t. The script should start with jQuery wrapper to guarantee $ alias working.

2. Provided Script has incorrect syntax. There should be a close
   parentese symbol )

3. Better to use submit handler instead of click handler. I simplified your handler by handling submit instead of click. Clicking input button triggers submit and click handler not required.

Finally, the bio-shortcode-protected.js content should be

jQuery(function($){
    const settings = window.bioShortcodeData;

    function init() {
        $('#protectedForm').on( 'submit', function(e) {
            e.preventDefault();

            const form = this;

            $.post({
                url: settings['endpoint'],
                data: {
                    'action': settings['action'],
                    'bio-post-id': settings['post-id'],
                    'nonce': settings['nonce'],
                    'password': form.userpass.value,
                },
                success: function(data) {
                    if (!data.status) {
                        alert(data.message);

                        $('#errorPWdata')
                            .empty()
                            .append(data.message);

                        return;
                    }

                    if (data.isValidPassword) {
                        document.cookie = "userpass=" + escape(form.userpass.value) + "; path=/";
                    }

                    $('#bio-protected-content').replaceWith(data.content);
                    init() // for reattach submission handler
                },
                error: function() {
                    alert("Server error");
                }
            });

        })
    }

    init();
})

And appropriate little bit improved shortcode template should look like:

function bio_protected_function( $atts, $content = null ) {
    add_action( 'wp_enqueue_scripts', function () {
        wp_enqueue_script(
            'bio-shortcode-protected',
            get_theme_file_uri( 'assets/js/bio-shortcode-protected.js' ),
            [ 'jquery' ],
            '1',
            true
        );
        wp_localize_script(
            'bio-shortcode-protected',
            'bioShortcodeData',
            [
                'post-id'  => get_the_ID(),
                'nonce'    => wp_create_nonce( 'bio-shortcode' ),
                'endpoint' => admin_url( 'admin-ajax.php' ),
                'action'   => 'bio_protected_code'
            ]
        );
    } );
    wp_enqueue_scripts();

    if ( bio_validate_the_password() ) {
        return do_shortcode( $content );
    }

    ob_start();
    ?>
    <div class="bio-protected-content" id="bio-protected-content">
        
        <div style="margin-top:20px; font-size:15px">Submit password to view.</div>

        <div id="errorPWdata"></div>

        <form method="post" id="protectedForm">

            <input required
                   style="display: block; width: 69%; height: 50px; margin-right: 1%; float: left; border: 2px solid #333;"
                   type="text" placeholder="&#32;Password Here" name="password" id="userpass">

            <input style="display: block; margin: 0px; width: 30%; height: 50px; background-color: #333; color: #fff;"
                   id="protectedButton" type="submit" value="Submit">

        </form>
    </div>
    <?php

    return ob_get_clean();
}

Mistake 4

If the form will be submitted what would heppend – is WordPress starts to build content of the page, firstly header, the content (the_content filter), then footer. And checking password inside shortcode not so good idea. This way sending unnecessary page chunks. The only thing need to fetch by AJAX is clean apropriate post content.

This is where ajax-endpoint comes into play. Endpoint should be created by placing the snippet to functions.php file:

add_action( 'wp_ajax_nopriv_bio_protected_code', 'bio_protected_code_endpoint' );
add_action( 'wp_ajax_bio_protected_code', 'bio_protected_code_endpoint' );
function bio_protected_code_endpoint() {
    $is_valid_nonce = wp_verify_nonce( $_REQUEST['nonce'], 'bio-shortcode' );
    if ( ! $is_valid_nonce ) {
        wp_send_json(
            [
                'status'  => false,
                'message' => 'Invalid nonce',
            ]
        );
        exit;
    }

    $post_id = $_REQUEST['bio-post-id'];

    $post_type           = get_post_type( $post_id );
    $available_post_type = 'your-post-type';
    if ( $available_post_type !== $post_type ) {
        wp_send_json(
            [
                'status'  => false,
                'message' => 'Not available post type',
            ]
        );
        exit;
    }

    global $post;

    $post    = get_post( $post_id );
    $content = apply_filters( 'the_content', $post->post_content );

    wp_send_json(
        [
            'status'          => true,
            'isValidPassword' => bio_validate_the_password(),
            'content'         => $content
        ]
    );

    exit;
}

And password validation function

function bio_validate_the_password() {
    $userpass = $_REQUEST['password'] ?? $_COOKIE['userpass'] ?? null;

    return in_array( $userpass, [ 'testpw' ] );
}

Last words:

I don’t recommend set password in Cookie. It’s potential security breach.
Better to set Session password variable. But this way not much better.

There is a good answer why not to store password in Session and what to do instead.
Is it secure to store a password in a session?