Try it!


In this tutorial we're going to guide you on how to restrict your blog readers to only signed in users.

Part 1: Cotter Setup

Go to https://dev.cotter.app to create an account. Once you have created an account, make sure to create a new project and grab the API Key ID. We will be using your API Key ID later in part 2.

Part 2: Webflow Setup

For this tutorial, we have created 3 pages: Blog Homepage, Sign In Page, and Blog Content Page. We will be using Webflow CMS to do this. Please refer to this YouTube tutorial to create a simple blog.

Blog Homepage Setup

The Blog Homepage contains a list of your blogs and an overview of each blog. If a reader wants to read the full article, he/she will be redirected to the Sign In Page where we will show the embedded Cotter login form for your users to type in their email before getting access to the full blog post. If the reader is already signed in, then he/she will be redirected to the full article page.

After finishing the page setup, we can start with adding custom code to the Blog Homepage. Copy paste the code below to the custom code tab on the Blog Homepage Page settings.

Page Settings
Scroll down to "Custom Code" section

Add the code below to the body of the Blog Homepage

<script>
// 1. We check if a user has already logged in
var cotterOAuthToken = localStorage.getItem("user_session");

// 2. Fetch the user data
let token = JSON.parse(cotterOAuthToken);

// 3. Display user email
let authButton = document.getElementById("auth-button")

if(!!cotterOAuthToken) authButton.innerHTML = "Sign Out"

authButton.addEventListener("click", () => {
	window.localStorage.setItem("redirect_url_after_login", window.location.href);
	window.localStorage.removeItem("user_session");
});
</script>

Sign In Page Setup (where the sign in form will show up)

We need to include a section element to load Cotter's login form. Moreover, we need to set that section ID to "cotter-form-container". This enables Cotter's JS SDK to load the login form to the section element that we just added.

After finishing the page setup, we can start with adding custom code to the Sign In Page. Copy and paste the code below to the custom code tab on the Sign In Page settings.

  1. Get Cotter JS SDK
<!--Get Cotter JS SDK-->
<script
    src="https://unpkg.com/[email protected]/dist/cotter.min.js"
    type="text/javascript"
></script>


2. Initialize Cotter

Add the code below to the body of Sign In Page.

<!-- 2. Initialize Cotter -->
<script>
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here
  const redirectURL = localStorage.getItem("redirect_url_after_login")
  cotter
  	// Choose what method of login do you want
    // Sign In with Magic Link
    .signInWithLink()
    // Send Magic Link via email
    .showEmailForm()
    
    .then(payload => {
	  // save OAuth token
      localStorage.setItem("user_session", JSON.stringify(payload));
      
      // redirect to location before login page
      const redirectURL = localStorage.getItem("redirect_url_after_login")
      if(!!redirectURL) window.location.href = redirectURL
      else window.location.href = "/protected";
    })
    .catch(err => {
      // handle error
    });
</script>

Make sure that you have pasted your API Key ID on the code block above.

Blog Content Page Setup (full article page)

Now let's move on to the Blog Content page. The Blog Content Page refers to the page that contains your full blog article in which you only want signed in users to access this page.

We'll be adding custom code to the header to:

  1. Check if a user is logged in
  2. Set the location for redirection after the user is logged in (so that the user will be redirected to the page he/she was trying to access before being redirected to the Sign In Page)
  3. Fetch the user's OAuth token.

Add the code below to the header

<script>
// 1. We check if a user has already logged in
var cotterOAuthToken = localStorage.getItem("user_session");

// 1a. Set the location for redirection after the user is logged in.
localStorage.setItem("redirect_url_after_login", window.location.href);

// 2. If user is not logged in then we redirect to the login page
if (!cotterOAuthToken || cotterOAuthToken.length <= 0) window.location.href = "/";

// 3. If user is logged in then we fetch the user data
let url = "https://cotterapp.herokuapp.com/login"
fetch(url, {
    method: 'POST',
    cache: 'no-cache',
    headers: {
      'Content-Type': 'application/json'
      // TODO: add API key ID to allow different audience
    },
    body: cotterOAuthToken
  })
  .then(resp => resp.json())
  .then(data => {
  	if(!data.success) { window.location.href = "/" }
  });

</script>

Part 3: Publish and Test

We've arrived at the last part of this tutorial and all that you need to do is to click publish and test Cotter's magic link authentication for your Webflow blog!


Questions & Feedback

Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter's Slack Channel.

Ready to use Cotter?

If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.

If you need help, ping us on our Slack channel or email us at [email protected]


Build a Simple Blog with #Webflow tutorial by Brian Haferkamp.