Hi there đđ»ââïž. In this tutorial weâ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.
đđ»ââïž Note: This tutorial uses Webflow's Custom Code, which is available on paid Webflow accounts.
Hereâs a Live Demo of the end result!
Magic Setup
- Sign up for a Magic account here.
- Create a new app and keep this page open (you're going to need the Test Publishable 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
- Sign up for a Webflow account here.
- Create a new project.
- Select a Blank Site.
- 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:
- Home - with an ID of
homeLink
. - Login - ID:
loginLink
. - Profile - ID:
profileLink
. - 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.
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:
- A Section, underneath the NavBar, with a margin top and bottom of 50.
- A Container on top of the Section.
- A Heading on top of the Container, titled âđȘ Blog Membership Site âšâ.
- A Collection List on top of the Container, underneath the title.
- This Collection List is how you'll be displaying your blog on the homepage. All you need to do is double-click it to connect to the Blog Posts collection you made earlier, and then design it so that it looks like a list of blog posts.
- A Heading to one of the Collection items. Make sure to get the Headingâs text from a field in Blog Posts called Name.
- 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.
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:
- The NavBar Symbol.
- A Section, underneath the NavBar, with a margin top and bottom of 50.
- A Container on top of the Section.
- A Heading on top of the Container, titled âLogin đâ.
- A Form Block on top of the Container, underneath the title.
- Get rid of the label and text field for the name, you wonât need them.
- Rename the button to âLoginâ and give it an ID of
loginBtn
(Note: The email text field already has an ID ofemail
).
Again, edit the Nav Link Settings for Login such that it has Type: Page
, and Page: Login
.
3. Profile
Drag & drop:
- The NavBar Symbol with a margin top of 50.
- A Section, underneath the NavBar, with a margin top and bottom of 50.
- A Container on top of the Section.
- Make sure the Layout > Display of this Container is set to Flex.
- Two Headings in the Container.
- Flex will make it so that theyâre positioned right next to each other.
- The first Heading should read, âWelcome â while the second Heading reads a temporary text like âuser_emailâ.
- Add some space between these Headings. Give the second Heading a margin-left of 15.
- Once the user is logged in, youâll need to replace âuser_emailâ with the email address they used to log in. To do this, give the second Heading an ID of
emailAddress
.
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.
<!-- 1. Get Magic SDK --> <script src="https://cdn.jsdelivr.net/npm/magic-sdk/dist/magic.js"></script>
-
Remember that page you left open earlier? Copy the Test Publishable Key from that page and paste it in
'your_test_publishable_key'
. This code initializes the Magic SDK.
<!-- 2. Initialize Magic --> <script> const magic = new Magic('your_test_publishable_key'); </script>
Footer Code
-
Ensure the logged in user has access to private pages, while the logged out user does not.
<!-- 4. When the user is logged in/logged out. --> <script> let privatePages = [ '/profile', '/' // This is where your private blogs live! ]; let publicPages = [ '/login' ] // Get the user & check whether or // not the user is logged in. Show or // hide pages depending on the outcome. const getUser = async () => { // The page user is currently on const currentPath = window.location.pathname; // Checks if a user is currently logged in // to the Magic SDK const isLoggedIn = await magic.user.isLoggedIn(); // If the user is logged in... if (isLoggedIn) { // prevent them from accessing public pages. if (publicPages.includes(currentPath)) { window.location.replace('/'); } else { // Or hide links they don't need to see loginLink.style.display = 'none'; } } else { // If the user is logged out and // they try to access a private page, // send them back to the login page. if (privatePages.includes(currentPath)) { window.location.replace('/login'); } else { // Or hide links they shouldn't be able to see profileLink.style.display = 'none'; logOutLink.style.display = 'none'; homeLink.style.display = 'none'; } } }; getUser(); </script>
-
Allow logged in users to log out.
<!-- 5. Log out the currently authenticated Magic user. --> <script> const logOut = async () => { try { await magic.user.logout(); const isLoggedIn = await magic.user.isLoggedIn(); console.log('Is the user still logged in? ', isLoggedIn); // => `false` } catch (error) { // Handle errors if required! console.log('Ran into this error while logging out: ', error); } console.log('WHOO! User has logged out.'); } // Call the logOut function when the user // clicks the Log Out Nav Link. logOutLink.addEventListener('click', logOut); </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 and profile functionalities. Just paste the following code blocks into the appropriate Static Page, inside of the page Settings before the </body>
tag.
Log In
Allow the user to log in.
<!-- 3. Log in with Magic Link -->
<script>
// Log in or create a new user.
const login = async () => {
const emailVal = email.value;
await magic.auth.loginWithMagicLink({
email: emailVal
})
.then(() => {
// Take user to the home page once they're
// logged in.
window.location.replace('./');
})
.catch((error) => {
console.log("Error while logging in: ", error);
})
}
// Call the login function when the user
// clicks the Login button.
loginBtn.addEventListener('click', login);
</script>
Profile
Ensure the userâs email is displayed.
<!-- 4. Ensure the user's email is displayed -->
<script type="text/javascript">
const displayUserName = async () => {
const {
email,
publicAddress
} = await magic.user.getMetadata();
let elementToDisplay = document.getElementById('emailAddress');
elementToDisplay.innerHTML = email;
}
displayUserName();
</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.
Adding a Loader
Have you noticed the lag in the UI when navigating between pages? This happens because the Magic SDK takes a few seconds to initialize. To resolve this, you can add a loader!
- 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.
- Drag & drop an Image onto the Div Block, then upload your loader. It should automatically be centered.
- Give the Div Block an ID of
loader
. -
Update the
getUser()
function in Project Settings > Custom Code > Footer Code:
const getUser = async () => { // The page user is currently on const currentPath = window.location.pathname; // Checks if a user is currently logged in // to the Magic SDK const isLoggedIn = await magic.user.isLoggedIn(); // If the user is logged in... if (isLoggedIn) { // prevent them from accessing public pages. if (publicPages.includes(currentPath)) { window.location.replace('/'); } else { // Or hide links they don't need to see loginLink.style.display = 'none'; // Get rid of loader when user gets to correct page loader.style.display = 'none'; } } else { // If the user is logged out and // they try to access a private page, // send them back to the login page. if (privatePages.includes(currentPath)) { window.location.replace('/login'); } else { // Or hide links they shouldn't be able to see profileLink.style.display = 'none'; logOutLink.style.display = 'none'; homeLink.style.display = 'none'; // Get rid of loader when user gets to correct page loader.style.display = 'none'; } } };
Turn the Div Block into a Symbol titled, âLoaderâ.
Drag & drop your Loader Symbol to the rest of the pages.
Publish your changes, and view your live site to see the Loader in action.
Thatâs it for today!
As you saw, designing a beautiful Blog Membership site with Webflow is easy; just drag and drop elements! Integrating Magic auth into your site for a secure authentication and authorization system was also just as seamless.
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 đđ»ââïž.
Top comments (0)