How to Add a Login System to Your Framer Website

With FramerAuth, integrating authentication into your Framer site is straightforward and requires no custom coding. Follow this guide to set up a secure login system in just a few steps.

Why Add a Login System?

A login system enables you to:

• Restrict content access to registered users

• Offer personalized experiences

• Manage memberships or subscriptions

• Improve security for your content

• Enable bookmarking and mark-as-complete

Step 1: Sign Up for FramerAuth

FramerAuth is designed to integrate seamlessly with Framer. To get started:

• Add the FramerAuth plugin to your Framer project.

• (Optional) Explore our library of free and paid Framer templates with FramerAuth pre-installed and ready to go. To activate a FramerAuth template, follow this 3 min guide for quick setup.

Step 2: Add Sign up, Sign in, and other Components

• Open your project in Framer and launch the FramerAuth plugin.

• Drag and drop the login and sign-up components into your design as well as the forgot password, member profile, update password, and other forms.

• (Optional) Explore Blocks, our free library of sign up/sign in experiences to clone and adapt for your project.

Step 3: Customize Appearance Settings

• Customize the appearance to match your brand within the Framer native controls.

• To copy styling from one form to another for consistency, use OPTION + COMMAND + C (Mac) ALT + CONTROL + C (Windows).

Step 4: Activate FramerAuth & Add Snippet to Site Settings

• Click the 'Activate' tab in FramerAuth then enter your email address and start a free trial.

• After signing in, the plugin will prompt you with a yellow message asking to add the FramerAuth snippet to your settings. Follow steps to add the snippet to your project.

Step 5: Add Code Override File to Site

• Add a new override file by going to assets / overrides / new code file. Name the file 'FramerAuth' then paste the override code provided in the plugin.

• Follow our reference guide for best practices on using overrides: What each override does.

Step 6: Create Protected Areas/Content on Your Site

To protect certain pages or sections you can utilize overrides in the Framer canvas or the page locking mechanism to lock an entire page:

• To make an entire page as locked, toggle locked to 'Yes' in the plugin. Pages can also be locked in the dashboard: Pages.

• Specify which Lemon Squeezy variant the user must have an active license to in order to access this page. If no product is specified, any logged in member will be able to access the locked page.

• To lock on-page content instead of locking the entire page, use our overrides.

• Follow this tutorial: Showing a locked variant. Use withVariant to display the unlocked variant to anyone who is logged in, use withVariantActiveLicense to display the unlocked version to anyone who is logged in and has at least one active license.

• To display your content or unlock content only to specific Lemon Squeezy variants, follow this guide: Conditionally show content to specific plans.

• To add optional features like bookmarking or mark as complete, follow their respective guides: Bookmarking / Mark as Complete

Step 7: Test Your Login System

Before publishing your site:

• Try logging in and out as a user.

• Test resetting your password via the Forgot Password form

• Check restricted pages to ensure they work as expected and content is locking.

Ensure your site has these pages:

• /sign-in

• /sign-up

• /forgot-password

• /update-password

• /account

Ensure your navigation has:

• Sign out button (use withSignOut override)

• Sign in button (use withLoggedOut override)

• Sign up button (use withLoggedOut override)

• Account page link (use withLoggedIn override)

Step 8: Publish and Manage Users

Once everything is set up:

• Publish your Framer website.

• Use the FramerAuth dashboard to manage users, locked pages, settings, and more.

• Share your site with us to be featured in our showcase.

Conclusion

Adding a login system to your Framer website enhances security and user engagement while allowing the potential to monetize content. With FramerAuth, the process is simple and requires minimal setup. Start building your membership site today with FramerAuth!

Need help? Visit FramerAuth Support for assistance.