# Add Authentication, Bookmarking & Social Login to Your Framer Site with Gately

By kayode•April 17, 2026•8 mins

Framer is one of the best tools for building beautiful, fast websites. But out of the box, it doesn't handle user accounts, authentication, or member-only content. That's where Gately comes in.

With the Gately Framer Plugin, you can add a complete membership layer to any Framer site — login, signup, Google OAuth, page protection, bookmarking, favourites, and more — without touching a backend or writing server code. Everything connects through the Gately dashboard.

## Step 1: Install the Gately Framer Plugin

Open your Framer project, go to **Plugins** in the left sidebar, and search for **Gately**. Or install directly from the Framer Plugin Store:

👉 [**Install the Gately Plugin**](https://framer.link/f0P1u3t)

Once installed, open the plugin panel. You'll see the **Installation** tab — this is the key step.

## Step 2: Connect Your Framer Project to Gately

In the Gately plugin, go to the **Installation** tab. Click **Inject SDK**. Gately will automatically add the Gately Client SDK to your Framer project's Custom Code — no manual copy-pasting required.

This single step connects your entire Framer site to your Gately project. The SDK loads on every page and handles authentication state, session management, and component communication automatically.

If you prefer to do it manually, the SDK script looks like this:

```
<script
  src="https://cdn.usegately.com/gately.min.js"
  data-project-id="YOUR_PROJECT_ID"
  defer
></script>
```

Your Project ID is in **Settings → General** in your Gately dashboard.

## Step 3: Add Login and Signup

With the SDK connected, drag the **Login** and **Signup** components from the Gately plugin onto your canvas. These are fully styled, production-ready forms that work immediately.

| Component | What it does |
| --- | --- |
| **Login** | Email/password login form with redirect URL |
| **Signup** | New member registration with optional name field |
| **Magic Link** | Passwordless login — user gets a link by email |
| **Password Reset** | Self-service password reset flow |
| **Logout** | Logout button — shows only when user is logged in |

Each component has a **Redirect URL** property — set it to the page you want users to land on after authenticating.

## Step 4: Add Google OAuth and Social Login

Gately supports Google OAuth out of the box. In your Gately dashboard, go to **Settings → Authentication** and enable Google login. Add your Google Client ID and Secret.

Then in Framer, set the **showSocialLogin** property on your Login and Signup components to `true`. A "Sign in with Google" button appears automatically — no extra code needed.

| Social provider | Setup location |
| --- | --- |
| **Google OAuth** | Settings → Authentication → Google |
| **GitHub OAuth** | Settings → Authentication → GitHub |
| **Magic Link** | Enabled by default — no setup required |

Once enabled, members can sign in with their Google account. Their profile picture, name, and email are pulled from Google automatically and stored in your Gately member database.

## Step 5: Protect Pages and Content

Use the **Content Protection** component to make any page or section members-only.

To protect an entire page:

1. Add the **Content Protection** component to the page
2. Set the protection type: **Any Member**, **Specific Plan**, or **Custom Rule**
3. Set a **Fallback URL** — where non-members are redirected (usually your login page)

To protect a section within a page, use **ContentLock** — wrap any content block and set the required plan. Members on the wrong plan see a paywall or are redirected.

| Component | Use case |
| --- | --- |
| **Content Protection** | Protect entire pages — redirect non-members |
| **ContentLock** | Protect sections within a page — plan-based access |

## Step 6: Add Bookmarking and Favourites

One of the most powerful Gately features for Framer is the **Bookmarking Button**. It lets logged-in members save any CMS item, page, or piece of content to their personal favourites list.

This works with Framer CMS collections — blog posts, products, courses, portfolio items, anything. Members click the bookmark icon and the item is saved to their account. They can view all their saved items using the **Bookmark List** component.

| Component | What it does |
| --- | --- |
| **Bookmarking Button** | Heart/bookmark icon — saves the current CMS item to the member's favourites |
| **Bookmark List** | Displays all items the member has bookmarked |
| **Like Button** | Like counter — members can like content, counts are stored per item |
| **Mark Complete** | Let members mark items as done — great for courses and checklists |

To add bookmarking to a blog post page in Framer:

1. Drag the **Bookmarking Button** component onto your blog post template
2. Set the **itemId** property to the CMS item's slug or ID (use a Framer variable)
3. Publish — logged-in members can now bookmark any post

Create a "My Saved Posts" page and add the **Bookmark List** component. It automatically shows the current member's saved items, filtered by content type.

## Step 7: Show Member-Specific Content

Use the **Userdata** component to display personalized content for each member — their name, email, avatar, plan, or any custom field stored in Gately.

| Component | Displays |
| --- | --- |
| **Userdata** | Any member field: name, email, plan, custom metadata |
| **Google Avatar** | Member's Google profile picture |
| **Profile Settings** | Editable profile form — members update their own info |
| **Billing** | Subscription management — upgrade, cancel, view invoices |

For example, add a "Welcome back, {{name}}" heading to your dashboard page using the Userdata component. It renders the logged-in member's name automatically.

## All Available Gately Components for Framer

The Gately plugin gives you 25+ ready-to-use components. Here's the full list:

| Category | Components |
| --- | --- |
| **Authentication** | Login, Signup, Logout, Magic Link, Password Reset, Accept Invite |
| **User Management** | Profile Settings, Update Password, Userdata, Google Avatar |
| **Content Protection** | Content Protection, ContentLock |
| **Engagement** | Bookmarking Button, Bookmark List, Like Button, Mark Complete, Live Chat, Form |
| **Payments** | Subscribe, Billing |
| **E-commerce** | Add to Cart, Cart Icon, Cart Items, Cart Subtotal, Cart Overlay, Checkout, Inventory Label, Quantity Selector |

## What You Can Build

With Gately and Framer together, you can build things that weren't possible with Framer alone:

- **Membership sites** — gated content behind login, tiered access by plan
- **Course platforms** — video lessons with progress tracking and completion marking
- **Community portals** — member profiles, bookmarked content, social login
- **SaaS dashboards** — authenticated app pages with user-specific data
- **Client portals** — branded login experience for clients to access their resources
- **E-commerce stores** — cart, checkout, and order management built into Framer

## Get Started

The Gately Framer Plugin is free to install and takes under 5 minutes to set up. Install the plugin, hit Inject SDK in the Installation tab, and your Framer site is connected to Gately.

- 👉 [**Install the Gately Framer Plugin**](https://framer.link/f0P1u3t)
- 👉 [**Create a free Gately account**](https://app.usegately.com/)
- 👉 [**Read the Framer Plugin docs**](/content/docs/platforms/framer/index.html)
- 👉 [**Browse all Framer components**](/content/docs/platforms/framer/index.html)