I've recently integrated password protection on storefronts. There are apps that can manage this, but below is an example of how to achieve without an app.
<!-- show fields is customer logged in -->
{% if customer %}
{% section 'header' %}
<main class="main-content" id="MainContent">
{{ content_for_layout }}
</main>
{% section 'footer' %}
{% else %}
{% if template contains 'page' and page.handle == 'XX' %}
{% section 'header-login' %}
<main class="main-content" id="MainContent">
{{ content_for_layout }}
</main>
{% section 'footer' %}
{% elsif template contains 'index' or template contains 'page' or template contains 'product' or template contains 'collection' %}
{% section 'header-login' %}
<!-- ask to login -->
<div id="dealer-login">
<div class="login-form">
<div class="grid__item">
<div class="note note--success hide" id="ResetSuccess">
{{ 'customer.recover_password.success' | t }}
</div>
<h3 class="text-center">Welcome</h3>
<div id="CustomerLoginForm" class="form-vertical">
{% form 'customer_login' %}
<input type="hidden" name="checkout_url" value="/">
{{ form.errors | default_errors }}
<label for="CustomerEmail">{{ 'customer.login.email' | t }}</label>
<input type="email" name="customer[email]" id="CustomerEmail" class="input-full{% if form.errors contains 'email' %} error{% endif %}" autocorrect="off" autocapitalize="off" autofocus>
{% if form.password_needed %}
<div class="grid">
<div class="grid__item one-half">
<label for="CustomerPassword">{{ 'customer.login.password' | t }}</label>
</div>
</div>
<input type="password" value="" name="customer[password]" id="CustomerPassword" class="input-full{% if form.errors contains 'password' %} error{% endif %}">
<div class="text-right">
<small class="label-info">
<a href="/account/login#recover" id="RecoverPassword">
Forgot?
</a>
</small>
</div>
{% endif %}
<p>
<button type="submit" class="btn btn--full">
{{ 'customer.login.sign_in' | t }}
</button>
</p>
{% endform %}
</div>
</div>
<!-- end login -->
{% else %}
{% section 'header-login' %}
<main class="main-content" id="MainContent">
{{ content_for_layout }}
</main>
{% endif %}
{% endif %}