Gareth Redfern developer, cyclist & coffee lover

Creating A Secure Area Statamic

Posted by Gareth Redfern
Category: statamic Tags: statamic-v1

Statamic offers you very simple member handling out of the box. At the moment you can create two types of member:

  • Members that can login to the control panel (admin).
  • Members that can login but can’t see the control panel.

At first glance the second option may not seem that useful but where it does become really handy is if you have an area on your site that you would like to limit who can see that content.

To get started you will need to create an area for members to login, you could just direct them to the admin login area, but when they put their details in they will receive a message saying “access denied” if you haven’t given them admin access. To provide a nice user experience Statamic provides you with the {{ member:login }} tag pair, this creates a form tag and you can provide it a redirect page once the user logs in.

{{ member:login return="top-secret" }}
  <input type="text" name="username" id="username" placeholder="Username">
  <input type="password" name="password" id="password" placeholder="Password">
  <input type="submit" value="Log in">
{{ /member:login }}

Of course once users are logged in to your site you are going to want to provide an option to logout, again Statamic provides us with a tag to do this and the option to redirect to a new page once logged out.

<a href="{{ member:logout return="logout-page" }}">Logout</a>

Creating Your Secure Content

So you have created your login and logout areas on the front end of the site, now all that you need to do is ensure that the content you want to keep hidden from visitors who are not logged in is output using a conditional in your page template, without this everyone will still be able to see your content. Using a simple {{ if logged_in }} conditional is all that is required and you could provide a link to the login form if not.

{{ if logged_in }}
  <section role="main">
    <h2>{{ title }}</h2>
    {{ content }}
  </section>
{{ else }}
  <p>You need to be logged in to see this. Please <a href="/login">login</a>.</p>
{{ endif }}

That is all there is to it, if you would like to see the Gist I created have a look on my Github page. I am sure as Statamic evolves the member’s functionality will evolve and using plugins like Raven you will be able to allow users to sign up through the front end of your site and add their own content.