Add A Login System To Framer In 7 Steps

How to Add a Login System to Your Framer Website

With FrameAuth, 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 or paying users

• Offer personalized experiences

• Manage memberships or subscriptions

• Protect your member-only exclusive content

• Enable bookmarking and mark-as-complete

FrameAuth is designed to integrate seamlessly into your Framer website. Use our plugin for swift integration to add auth components like sign up, sign in, profile, and more. To get started:

• Open the FrameAuth plugin in your Framer project.

• (Optional) Explore our library of free and paid Framer templates with FrameAuth pre-installed and ready to go. To activate a FrameAuth template, follow our template activation guide.

• Open your project in Framer and launch the FrameAuth plugin. To launch, browse plugins and type in FrameAuth.

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

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

• 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).

• Click the ‘Activate’ tab in the plugin then click 'create free account'

• After creating your account, head back to the plugin and sign in. The plugin will prompt you to select a project and connect. Once done, your project is connected!

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 to 'locked' in the dashboard. A locked page is accessible only to users who are logged into an account.

• To make a page accessible to users with an active purchase, follow our Stripe or Lemon Squeezy guides.

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

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

• Enable additional authentication features like Sign in with Google if you'd like.

• Create a profile page for your users to manage their account.

Before publishing your site:

• Try signing up as a user.

• Try signing in and signing out.

• 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

• /reset-password

• /account

• /otp (if you're using the SendOTP form)

Ensure your navigation has:

• Sign out button (use SignOut override or Action Button component)

• Sign in button (use ShowIfSignedOut override)

• Sign up button (use ShowIfSignedOut override)

• Account page link (use ShowIfSignedIn override)

Once everything is set up:

• Publish your Framer website.

• Use the FrameAuth dashboard to manage users, locked pages, settings, webhooks, products, API, and more.

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

• Need help? Visit FramerAuth Support for assistance.