Hi there 🙋🏻‍♀️. In this tutorial you'll be building a Blog Membership site using Webflow and Magic auth. Webflow will help us design, build and launch responsive websites visually, while Magic will waive its wand to help us create a secure and reliable passwordless login.

Here’s a Live Demo of the end result!

#Magic Setup

1. Sign up for a Magic account here.
2. Create a new app and keep this page open (you're going to need the Publishable API Key in a bit).

Btw, this tutorial uses the email link sign-in method, but you have plenty of other social login options to choose from (Google, GitHub, Facebook, Apple and LinkedIn)! You could also customize the Login form to your liking 😎.

#Webflow Setup

1. Sign up for a Webflow account here.
2. Create a new project.
3. Select a Blank Site.
4. Create your first CMS Collection (this is where you'll be storing your blogs).
   • Choose the ‘Blog Posts’ template.
   • Click ‘Create Collection’ and add 5 sample items.

#Create Webflow NavBar Links

Webflow provides you with a Home page by default, so design your navigation bar in there!

Drag and drop a Navbar component, change the background color to white and make sure each of the following links exist:

1. Home - with an ID of homeLink.
2. Login - ID: loginLink.
3. Profile - ID: profileLink.
4. Log out - ID: logOutLink.

Feel free to add your logo as well.

One more thing; you'll be needing this NavBar in all of your pages, so turn it into a Symbol. This turns the NavBar into a reusable component.

#Create the Loader

We'll be creating a loader to give the Magic SDK some time to initialize.

1. Drag & drop a Div Block into your Home page, above the NavBar.
   • Set it’s Layout > Display to Flex.
   • Set Align and Justify to Center.
   • Set it’s Width and Height to 100 VW.
   • Change it’s background color to a nice contrast to your logo.

1. Drag & drop an Image onto the Div Block, then upload your loader. It should automatically be centered.
2. Give the Div Block an ID of loader.
3. Turn the Div Block into a Symbol titled, “Loader”.

Awesome! We'll be dropping this Loader Symbol to all of the pages once they're complete.

#Design & Link Webflow Pages

It's time to design a few pages and link them to your NavBar. Here’s a list of pages you’ll need, each with a step-by-step guide on how to design them.

#1. Home

Drag & drop:

1. A Section, underneath the NavBar, with a margin top and bottom of 50.
2. A Container on top of the Section.
3. A Heading on top of the Container, titled “🪄 Blog Membership Site ✨”.
4. A Collection List on top of the Container, underneath the title.
5. A Heading to one of the Collection items. Make sure to get the Heading’s text from a field in Blog Posts called Name.
6. A Rich Text field right under the Heading you just added. Make sure you get the text from a field in Blog Posts called Post Body.
7. The Loader.

By now, you should be able to see all of the blog posts from your CMS Collection!

Lastly, edit the Nav Link Settings for Home such that it has Type: Page, and Page: Home.

#2. Login

Drag & drop:

1. The NavBar Symbol.
2. A Section, underneath the NavBar, with a margin top and bottom of 50.
3. A Container on top of the Section.
4. A Heading on top of the Container, titled “Login 🎉”.
5. A Form Block on top of the Container, underneath the title.
6. The Loader.

Again, edit the Nav Link Settings for Login such that it has Type: Page, and Page: Login.

#3. Profile

Drag & drop:

1. The NavBar Symbol with a margin top of 50.
2. A Section, underneath the NavBar, with a margin top and bottom of 50.
3. A Container on top of the Section.
4. Two Headings in the Container.
5. The Loader.

Edit the Nav Link Settings for Profile such that it has Type: Page, and Page: Profile.

#4. Logout

When the user logs out, they'll need to be routed to the Login page. To do this, edit the Nav Link Settings for Logout such that it has Type: Page, and Page: Login.

Yay you for designing and linking your pages 🥳! Next you’ll learn how to use the Magic SDK to authenticate a user to log in or log out, and protect specific pages.

#Write Webflow Site-Wide Custom Code

Webflow's site-wide custom code is applied to your entire site. You’ll be using this option to initialize the Magic SDK, protect certain pages, and allow users to log out.

All you need to do is paste the following code into your Webflow site’s Project Settings > Custom Code.

#Head Code

Get the Magic SDK.

01⁠<!-- Get Magic SDK -->

02<script src="https://auth.magic.link/sdk"></script>

Remember that page you left open earlier? Copy the Publishable API Key from that page and paste it in 'your_publishable_api_key'. This code initializes the Magic SDK.

01⁠

02

03<!-- Initialize Magic -->

04<script>

05   const magic = new Magic('your_publishable_api_key');

06</script>

#Footer Code

Ensure the logged in user has access to private pages, while the logged out user does not.

01<script>

02  let privatePages = [

03    '/profile',

04    '/'

05  ];

06

07  let publicPages = [

08    '/login'

09  ]

10 

11  const getUser = async () => {

12    const currentPath = window.location.pathname;

13    const isLoggedIn = await magic.user.isLoggedIn();

14

15    if (isLoggedIn) {

16      if (publicPages.includes(currentPath)) {

17        window.location.replace('/');

18      } else {

19        loginLink.style.display = 'none';

20      }

21    } else {

22      if (privatePages.includes(currentPath)) {

23        window.location.replace('/login');

24      } else {

25        profileLink.style.display = 'none';

26        logOutLink.style.display = 'none';

27        homeLink.style.display = 'none';

28      }

29    }

30    loader.style.display = 'none';

31  };

32</script>

#Write Webflow Page-Only Custom Code

The custom code in a particular page settings only works for that page. You’ll be using this option to implement the login, profile and logout actions. Just paste the following code blocks into the appropriate Static Page, inside of the page Settings before the </body> tag.

Home - Before </body> tag

01<script>

02getUser();

03</script>

Log In - Inside <head> tag

Allow the user to log in.

01⁠

02<script

03  src="https://auth.magic.link/pnp/login"

04  data-magic-publishable-api-key="pk_live_YOUR_API_KEY"

05  data-redirect-uri="https://urbansportsclub-test.webflow.io/profile">

06</script>

Profile

Inside <head> tag

01⁠

02<script

03  src="https://auth.magic.link/pnp/callback"

04  data-magic-publishable-api-key="pk_live_YOUR_API_KEY"

05  data-redirect-uri="https://magic-login-form.webflow.io/login">

06</script>

Before </body> tag

01<script>

02  window.addEventListener('@magic/ready', (event) => {

03    const { magic, idToken, userMetadata, oauth } = event.detail;

04    let emailAddress = document.getElementById('emailAddress');

05    let publicAddress = document.getElementById('publicAddress');

06   

07    emailAddress.innerHTML = userMetadata.email;

08    console.log('Your public address: ', userMetadata.publicAddress);

09    getUser();

10  });

11</script>

Logout - Inside <head> tag

01<!-- /logout.html -->

02<script

03  src="https://auth.magic.link/pnp/logout"

04  data-magic-publishable-api-key="pk_live_YOUR_API_KEY"

05  data-redirect-uri="https://blog-membership-site-09a2-1c696b7b586dc.webflow.io/login"> <!-- Replace with the location of your login.html -->

06</script>

#Test your code

Awesome 🤩🪄! You’ve built a Blog Membership Site. To test the code, you’ll need to publish your site and visit the live url.

#That’s it for today!

As you saw, designing a Blog Membership site with Webflow is easy; just drag and drop elements! Integrating the Magic Login Form into your site is even easier.

Next time you want to build any kind of Membership site with Webflow and Magic auth, this guide will always have your back. Till next time 🙋🏻‍♀️.