In this tutorial we're going to guide you on how to authenticate your users using magic links on Webflow.
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 3.
Part 2: Webflow Setup
For this tutorial we have created 2 pages: Login Page and Protected Page. The login page will display the embedded Cotter login form for your users to type in their email while the protected page will display protected content that only a logged in user can view.
Login Page Setup (where the login form will show up)
On the login page we need to include a section element to load Cotter's login form; moreover, we need to set that section id "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 login page. Copy paste the code below to the custom code tab on the login page settings.
- Get Cotter JS SDK
Add the code below to the head of the Login Page.
<!--Get Cotter JS SDK-->
<script src="https://js.cotter.app/lib/cotter.js"
type="text/javascript"></script>
- Initialize Cotter
Add the code below to the body of Login Page.
<!-- 2. Initialize Cotter -->
<script>
var cotter = new Cotter("<YOUR_API_KEY_ID>"); // đ Specify your API KEY ID here
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 the protected page
window.location.href = "/protected";
})
.catch(err => {
// handle error
});
</script>
Make sure that you have pasted your API Key ID on the code block above.
Protected Page Setup (and any other page you want to protect)
Now letâs move on to the protected page, we need to include a header (h2) element and set that header id âwelcome-text-headingâ in order to load the userâs email address and a button element with button id âsignout-buttonâ to enable sign out functionality for the user.
Moreover, weâll be adding custom code to both the header and the body. Weâll be adding custom code to the header to check if a user is logged in and to fetch the userâs OAuth token. The custom code in the body will be used to parse the user data and display his/her email on the page.
Add the code below to the header of the Protected Page
<script>
// 1. We check if a user has already logged in
var cotterOAuthToken = localStorage.getItem("user_session");
// 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'
},
body: cotterOAuthToken
})
.then(resp => resp.json())
.then(data => {
if(!data.success) { window.location.href = "/" }
});
</script>
Add the code below to the body of the Protected Page
<script>
// 1. Fetch the user data
let token = JSON.parse(cotterOAuthToken);
// 2. Display user email
document.getElementById("welcome-text-heading").innerHTML = `Welcome ${token.email},`;
// 3. Display sign out button
document.getElementById("signout-button").addEventListener("click", () => {
window.localStorage.removeItem("user_session"); // Log user out
window.location.href. "/"; // Redirect to login
});
</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 website!
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 team@cotter.app.
Top comments (0)