In this tutorial, we'll build a webflow site with password-less login using magic link.
UPDATED TUTORIAL: https://typedream.app/cotter/cookbook/webflow
In this tutorial we're going to guide you on how to authenticate your users using magic links on Webflow.
If you need any help following this tutorial, head to our Slack Channel! We're here to help.
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.
For this tutorial we have created 2 pages: Login Page (/) and Protected Page (/protected). 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.
Step 1: Add a section to load the Login Form
On the login page, we need to:
Include a section element to load Cotter's login form.
Set that section ID to "cotter-form-container".
Make the section width and height to 300px
for best results.
This enables Cotter's JS SDK to load the login form to the section element that we just added.
Step 2: Add custom code for the login logic
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://unpkg.com/cotter@0.3.26/dist/cotter.min.js"
type="text/javascript"></script>
2. Initialize Cotter
Add the code below to the body of the Login Page.
<!-- 2. Initialize Cotter --><script>
var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID
cotter
// Choose what method of login do you want
// Sign In with Magic Link
.signInWithLink()
// Send Magic Link via email
.showEmailForm()
.then(() => {
// 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.
You need to Publish your Site to see the login form.
Now let's move on to the protected page.
Step 1: Add elements to show the logged-in user's email and a log out button
To show the logged-in user's email:
Include a header (h2) element.
Set that header id to "welcome-text-heading" in order to load the user's email address
To show the log out button:
Add a button element with button id "signout-button" to enable sign out functionality for the user.
Update the text on this button to "Log Out".
Step 2: Add custom code for the logic
Moreover, we'll be adding custom code to both the head 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 their email on the page.
Check if the User is Logged In
Add the code below to the head of the Protected Page
<script
src="https://unpkg.com/cotter@0.3.26/dist/cotter.min.js"
type="text/javascript"></script>
<script>
async function checkLoggedIn() {
//Initialize Cotter
var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID
// 1. We check if a user has already logged in
const accessTokenObject = await cotter.tokenHandler.getAccessToken();
const accessToken = accessTokenObject ? accessTokenObject.token : null;
// 2. If user is not logged in then we redirect to the login page
if (!accessToken) window.location.href = "/";
// 3. Construct the body for access token verification
let body = {
oauth_token: {
access_token: accessToken
}
};
// 4. If user is logged in then we fetch the user data
let url = "https://worker.cotter.app/verify";
fetch(url, {
method: "POST",
cache: "no-cache",
headers: {
"Content-Type": "application/json",
API_KEY_ID: "<YOUR_API_KEY_ID>" // 👈 Specify your API KEY ID here
},
mode: "cors",
body: JSON.stringify(body)
})
.then((resp) => resp.json())
.then((data) => {
if (!data.success) { window.location.href = "/" }
});
}
//Call the CheckLoggedIn function
checkLoggedIn();
</script>
Make sure that you have pasted your API Key ID on the code block above.
2. Display User Data and Page Content
Add the code below to the body of the Protected Page
<script>
// 1. Initialize Cotter
var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID
// 2. Fetch the user data
const user = cotter.getLoggedInUser();
// 3. Display user email
document.getElementById("welcome-text-heading").innerHTML = `Welcome ${user.identifier},`;
// 4. Display sign out button
document.getElementById("signout-button")
.addEventListener("click", async () => {
await cotter.logOut();
window.location.href = "/"; // Redirect to home
});</script>
Make sure that you have pasted your API Key ID on the code block above.
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!
Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter's Slack Channel.
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.