How To Add Authentication To Your Statamic CMS Pages

Add authentication to your collections in a user-friendly way

Daniel Plomp

October 5th, 2021

Since I'm relatively new to developing websites within Statamic, I was looking for adding authentication to a website. Or actually to one or more pages. Coming from applications like Sitefinity and Orchard, I expected a checkbox to enable authentication for a page, but that isn't how this works within Statamic.

If you check the documentation, you will find a section on authentication where it says:

"You may deny front-end access to your content on a per-page or site-wide basis."

Schemes

Three schemes come out of the box that you can use to enable authentication.

  1. IP Address

  2. Authentication

  3. Password

IP Address
With this option, you can allow access from a range of IP addresses.

Authentication
Adding this scheme to a page will redirect to a login page unless the user is already logged in as a Statamic user.

Password
This is perfect when you want to password-protect one or more files but don't want to set up user accounts for this one purpose. This scheme does not relate to member accounts in any way.

So, I decided to go for the Authentication scheme since I want my users to log in before accessing a page.

To add one of these schemes to a page (or another collection), you can add a protect variable. So if you look at the YAML presentation of a page, it will look something like this:

You can see that the scheme applied to this page is logged_in, which uses the auth driver that actually takes care of the authentication process. You can read all about it right here: https://statamic.dev/protecting-content.

Blueprints

Since it is not very efficient to manually add this variable to every YAML page file, it would be nice to have an option inside the control panel to choose a page's scheme. So, we could add a couple of fields to our Blueprint to make this happen.

This is the end result of what we would like to achieve:

Authentication tab

We have defined a different section on the Page blueprint to choose whether the page should be only available for authenticated users or just no authentication. Since Statamic is highly customizable, you can extend this functionality to select a scheme or select user roles whenever authentication is chosen.

The Blueprint that I have attached to a Page Collection looks like this:

Authentication blueprint

And here is that same Fieldset in a YAML representation:

YAML presentation

You can see that this Fieldset holds a Select field, which is the actual select box we saw earlier. So when we select None inside this Select field, the value of the field protect will be set to 'null', meaning no authentication scheme is applied to the page.

If we select Authenticated, the value of the field protect will be set to 'logged_in', meaning that we will be redirected to a login page as soon as we land on this particular page.

We now have an easy way to add authentication to a Page by extending our Blueprint with some fields.

Login page

If you test this out, you will probably get a 404 error when you land on a 'protected' page. The logged_in scheme uses the auth driver, which causes a redirect to the login page, which in our case, does not exist (yet).

You can see the configuration of this inside the config/statamic/protect.php file:

protect.php

We can now easily create a login page, following this article from the documentation:
https://statamic.dev/tags/user-login_form?ref=docs.statamic.com

All rights reserved © ZimplerApps 2021