Skip to main content
Auth Plugin logo
Auth Plugin
FeaturesComponentsPricingBlogChangelogDocs
Contact
Back to Blogs
Guide

Which Auth Plugin Components Hide Themselves by Login State?

Exactly five of Auth Plugin's components ship a built-in toggle that hides them based on auth state, Social Auth Button, Sign Out Button, Sign In Form, Avatar, and Identity Label, no Code Overrides required. Here's every confirmed property across all five.

Sep 14, 2026 8 min
Which Auth Plugin Components Hide Themselves by Login State?

On this page

Quick AnswerWhat Is the Social Auth Button, and Is It a Real Auth Plugin Component?What Are the Social Auth Button's Real Properties?What Are the Sign Out Button's Real Properties?What Are the Sign In Form's Real Properties?What Are the Avatar Component's Real Properties?What Are the Identity Label's Real Properties?Why Do These Components Hide Themselves Without Code Overrides?Does Google Sign-In Appear Automatically on the Sign In Form?Does Auth Plugin Support GitHub or Other OAuth Providers?Common MistakesFAQThe Short Version

Quick Answer

  • Exactly five Auth Plugin components ship a built-in visibility toggle in their own properties panel: Social Auth Button (Hide Authed), Sign Out Button (Hide Logged Out), Sign In Form (Hide Logged In), Avatar (Hide Logged Out), and Identity Label (Hide Logged Out). Every other component needs a separate Code Overrides setup to show or hide by login state.
  • This is the complete list. Every other component, Sign Up Form, Forgot Password Form, Reset Password Form, OTP Verification, Magic Link, and Profile Form, was checked and confirmed not to have this toggle. Some of them have other Show/Hide toggles, but for sub-elements, not for hiding the whole component by auth state.
  • Social Auth Button's confirmed properties: Provider (dropdown, Google is currently the only option), Callback URL (optional, defaults to the current page), Button Text (optional, defaults to "Continue with {Provider}," so "Continue with Google" out of the box), Hide Authed, Show Icon, and a Button Style object.
  • Sign Out Button's confirmed properties: Redirect Path (default "/"), Button Label (default "Sign Out"), Hide Logged Out, and a Button Style object.
  • Enabling Google OAuth in Settings configures credentials only, it doesn't put a "Continue with Google" button anywhere on your page. For that, insert Social Auth Button separately.
  • Auth Plugin does not currently support GitHub or any other OAuth provider. The Provider dropdown, Settings > OAuth, and the OAuth docs page all show Google only.

If you've already worked through the basic setup guide, several of these components are ones you'll reach for early: a faster sign-in path, a way to let a signed-in visitor leave their session, a face and a name attached to that session. What connects them for this post is narrower than the topic might suggest: each one manages its own visibility based on whether the visitor is authenticated, through a plain toggle sitting in its own properties panel, instead of needing a separate Code Overrides setup. Everything below is confirmed directly against each component's live properties panel in Framer, not from docs.authplugin.com, which has repeatedly proven stale or incomplete on property names for this site.

What Is the Social Auth Button, and Is It a Real Auth Plugin Component?

Yes. Auth Plugin's own introduction docs list "Social Auth" by name as one of the official pre-built components, alongside Sign In, Sign Up, Forgot/Reset Password, OTP, Magic Link, Profile, Avatar, Sign Out, Identity Label, and Code Overrides. The component itself is genuinely official.

What it doesn't have yet is a dedicated docs subpage. The components overview page lists individual pages for Sign In Form, Sign Up Form, Forgot Password, Reset Password, OTP Verification, Magic Link, Profile Form, Avatar, Identity Label, Sign Out Button, and Code Overrides, Social Auth Button only shows up in that page's recommended-placement table, with no linked docs page of its own. Its properties panel in Framer is the only place to see its actual configuration right now.

What Are the Social Auth Button's Real Properties?

Confirmed directly against the live properties panel in Framer:

  • Provider: a dropdown. Google is currently the only option shown, no other provider exists in this dropdown.
  • Callback URL: optional, defaults to the current page. Whether it accepts a relative or an absolute path isn't confirmed either way, test your own value in preview before relying on it.
  • Button Text: optional, defaults to "Continue with {Provider}," which renders as "Continue with Google" on a fresh instance since Google is the only provider.
  • Hide Authed: a Yes/No toggle. Its description: "Hide the button when user is already authenticated."
  • Show Icon: a Show/Hide toggle for the provider logo.
  • Button Style: a style object controlling the button's appearance.

That's a short list next to components like Sign In or Sign Up, notably no Redirect Path. Where a Google sign-in actually sends a visitor afterward isn't separately documented, verify that on your own instance if it matters for your flow.

What Are the Sign Out Button's Real Properties?

Confirmed directly against the live properties panel:

  • Redirect Path: defaults to "/".
  • Button Label: defaults to "Sign Out."
  • Hide Logged Out: a Yes/No toggle. Its description: "Hide the button when user is not authenticated."
  • Button Style: a style object controlling the button's appearance.

What Are the Sign In Form's Real Properties?

Confirmed directly against the live properties panel:

  • Redirect Path: defaults to "/". "Path to redirect after successful sign in."
  • Forgot Path: defaults to "/forgot-password." "Path for forgot password page." This links the form to your Forgot Password Form page, not previously documented anywhere on this site.
  • Button Label: defaults to "Sign In."
  • Hide Logged In: a Yes/No toggle. "Hide this form when user is already authenticated." Set to Yes on the confirmed instance.
  • Forgot Link: a separate Show/Hide toggle, confirmed set to Hide on the instance checked. This controls whether the forgot-password link itself renders on the form, independent of Forgot Path, which only sets where that link points if it's shown.
  • Email Placeholder and Password Placeholder: the hint text inside each input.
  • Six style objects: Label Style, Input Style, Focus Style, Button Style, Error Style, and Link Style.

Sign In Form is the fourth component confirmed with this pattern, and the naming is worth noticing: Social Auth Button and Sign Up Form's own toggles are framed around hiding "when authenticated" or similar, while this one is explicitly labeled Hide Logged In, same idea, different wording, so don't assume every component's toggle uses identical label text even when the behavior is the same.

What Are the Avatar Component's Real Properties?

Confirmed directly against the live properties panel:

  • View Only: a Yes/No toggle. "Disable avatar upload. Shows image only."
  • Hide Logged Out: a Yes/No toggle. "Hide the avatar when user is not authenticated." Set to Yes on the confirmed instance.
  • Placeholder BG: a color field, confirmed default #9CA3AF. "Background color for placeholder when no avatar image is set."
  • Avatar Style: a style object controlling appearance.

View Only is worth flagging on its own: it's not about hiding anything, it turns off the upload button so the Avatar only displays an existing image, a different kind of control than the visibility toggles covered elsewhere in this post.

What Are the Identity Label's Real Properties?

Confirmed directly against the live properties panel:

  • Field: a dropdown. "Which identity field to display." Confirmed set to Full Name on the instance checked, whether other options exist beyond Full Name (email, a custom field) isn't confirmed, check your own dropdown.
  • Prefix: optional text shown before the identity value, panel example: "Hello, "
  • Suffix: optional text shown after the identity value, panel example: "!"
  • Fallback: optional text shown when the value is empty.
  • Hide Logged Out: a Yes/No toggle. "Hide the label when user is not authenticated." Set to Yes on the confirmed instance.
  • Text Style: a style object controlling appearance.

Prefix and Suffix together are how a plain "Sarah" becomes "Hello, Sarah!" without a separate text element or an IdentityName code override, worth knowing since the Code Overrides post covers IdentityName as a way to do something similar on an arbitrary text layer, Identity Label is the dedicated component version with more built-in formatting control.

That's eleven of Auth Plugin's components checked for this post: five confirmed with a built-in Hide toggle, six confirmed without.

Why Do These Components Hide Themselves Without Code Overrides?

This is the actual thread connecting these components. Most of Auth Plugin's show/hide-by-login-state behavior runs through Code Overrides, specifically the ShowWhenAuthenticated and ShowWhenGuest overrides applied to a Framer element via the Code Overrides panel. That's the general-purpose path: wrap a nav link, a banner, a whole section, anything, in one of those overrides and it shows or hides based on auth state.

Social Auth Button, Sign Out Button, Sign In Form, Avatar, and Identity Label don't need that path for this specific job. The Code Overrides section still exists on each of their panels, same as on every component, it's just not what you'd reach for to hide the whole component by login state, because each already ships its own dedicated toggle for exactly that, worded slightly differently per component (Hide Authed, Hide Logged Out, Hide Logged In) but doing the same job: Social Auth Button hides so a "Continue with Google" button doesn't sit there uselessly for someone already signed in, Sign In Form hides the whole sign-in form from someone who doesn't need it anymore, and Sign Out Button, Avatar, and Identity Label each hide from a visitor who was never signed in to begin with, since none of those make sense to show a guest. Flip the toggle to Yes, and the component manages this specific job on its own, no Code Overrides configuration needed for it.

What connects the five isn't obvious from the component names, it's a pattern in the properties panels: anything that displays or represents the signed-in user, or offers a sign-in/sign-out action, tends to have this built in. The other six components, Sign Up Form, Forgot Password Form, Reset Password Form, OTP Verification, Magic Link, and Profile Form, don't have it, some have other Show/Hide toggles for sub-elements instead, but none hide the whole component by auth state, so hiding one of those entirely still means going through Code Overrides.

Know which path you're on: for anything other than these five components, or for anything beyond this specific hide-by-login-state job even on these five, Code Overrides is still the way to do it. Whether the toggle on these five applies instantly in preview or needs a republish isn't confirmed, check your own instance if timing matters.

Does Google Sign-In Appear Automatically on the Sign In Form?

No. Social Auth Button is its own separate, explicitly insertable component with the properties listed above. Enabling Google in Settings > OAuth configures the OAuth credentials Auth Plugin needs to process a Google sign-in, it doesn't cause a Google button to materialize inside the Sign In Form.

If you want a "Continue with Google" option next to or below your Sign In Form, drag in a Social Auth Button instance and set it up separately. The Google OAuth setup guide covers getting your credentials configured in Settings, pair it with Social Auth Button to actually get a working button on the page, they're two separate steps.

Does Auth Plugin Support GitHub or Other OAuth Providers?

No, currently only Google, confirmed three separate ways: Social Auth Button's Provider dropdown shows Google as the only option, the OAuth settings docs cover Google exclusively, and Settings > OAuth in the dashboard only exposes a Google toggle. A "GitHub OAuth" mention does turn up elsewhere on this site, including in the main setup guide and several comparison posts, that claim doesn't match what's actually configurable today. The other confirmed sign-in methods are email/password, magic link, and OTP.

Common Mistakes

  • Assuming Google sign-in "just works" once OAuth is enabled in Settings. Enabling Google OAuth configures credentials, it doesn't place a button. You still need to add a Social Auth Button instance.
  • Guessing at property names instead of checking your own panel. The confirmed names in this post (Redirect Path, Button Label, Hide Logged Out, and the rest) are what's actually in the properties panel, use those.
  • Expecting a GitHub option in the Provider dropdown. Only Google exists there right now, regardless of what other site copy suggests.
  • Reaching for Code Overrides to hide Social Auth Button, Sign Out Button, Sign In Form, Avatar, or Identity Label. All five already have a dedicated toggle, no override needed.
  • Leaving these toggles off by default and not noticing the mismatch. A "Continue with Google" button visible to an already-signed-in visitor, a "Sign Out" button visible to a guest, or an Avatar and Identity Label rendering with no user to represent, are all easy to miss in a quick preview check.
  • Assuming a component you haven't checked also has this toggle. Only five components, listed above, have it. The rest, including OTP Verification, Magic Link, and Profile Form, don't.

FAQ

Is Social Auth Button a real, officially supported Auth Plugin component?
Yes. It's named directly in Auth Plugin's introduction docs alongside the other ten official components. It just doesn't have its own dedicated docs subpage yet, so its properties panel in Framer is the source of truth.

Does the Sign In Form automatically show a Google sign-in option?
No. Social Auth Button is a separate component you add explicitly, enabling Google OAuth in Settings only configures the credentials.

What does Hide Authed actually hide, and when?
On Social Auth Button, setting Hide Authed to Yes hides that button once the visitor is already authenticated. The description in the panel reads "Hide the button when user is already authenticated." Whether the change is visible instantly or needs a republish isn't confirmed.

What does Hide Logged Out do on the Sign Out Button?
Set to Yes, it hides the Sign Out Button for a visitor who isn't authenticated, per the panel description "Hide the button when user is not authenticated." Same caveat on timing as above.

Does Auth Plugin support GitHub OAuth?
No, not currently. The Provider dropdown on Social Auth Button, Settings > OAuth, and the OAuth settings docs all show Google as the only provider.

Do I need Code Overrides to make these components hide correctly?
No. Social Auth Button, Sign Out Button, Sign In Form, Avatar, and Identity Label each ship a built-in toggle for exactly that. Code Overrides is for everything else you want to show or hide by login state.

Is this a complete list of every Auth Plugin component with a self-hiding toggle?
Yes. Five components are confirmed to have it: Social Auth Button, Sign Out Button, Sign In Form, Avatar, and Identity Label. The remaining six, Sign Up Form, Forgot Password Form, Reset Password Form, OTP Verification, Magic Link, and Profile Form, were all checked and confirmed not to have it.

The Short Version

Exactly five Auth Plugin components ship a built-in, self-managed visibility toggle, so hiding them correctly by login state doesn't require setting up Code Overrides, that section still exists on their panel like every other component, it's just not needed for this one job: Social Auth Button (Hide Authed), Sign Out Button (Hide Logged Out), Sign In Form (Hide Logged In), Avatar (Hide Logged Out), and Identity Label (Hide Logged Out). Every other component, Sign Up Form, Forgot Password Form, Reset Password Form, OTP Verification, Magic Link, and Profile Form, was checked and confirmed not to have it. Social Auth Button is a genuinely official, separately insertable component, enabling Google OAuth in Settings configures credentials, it doesn't place a button, so add Social Auth Button separately for that. And Auth Plugin only supports Google OAuth right now, not GitHub or any other provider.

Share this article

Post on X Share on LinkedIn Share on Facebook

Related articles

Tutorial

How to Set Up Google OAuth on Your Framer Site

Let users sign in with their Google account in one click. A complete walkthrough from creating Google credentials to testing the live flow.

Guide

How to Add Login to a Framer Website (Complete Guide)

Complete step-by-step guide to adding login to your Framer site. Sign in, sign up, OAuth, magic links, OTP, and protected pages. No backend, no code.

Product

Auth Plugin Code Overrides: Show and Hide Content by Login State

Auth Plugin's Code Overrides component ships five overrides, two visibility, two identity-injection, one sign-out action, that you can apply to any Framer element without building a full Protected Pages rule. Here's the complete documented set.

View Auth Plugin pricingExplore all 13 Auth Plugin components
Auth Plugin logo
Auth Plugin

Complete authentication for Framer sites. No backend required. Zero code setup.

Product

FeaturesPricingComponentsIntegrationsFramer Marketplace

Resources

DocumentationBlogChangelogRoadmapContact & Support

Legal

Privacy PolicyTerms of ServiceRefund Policy

Ask AI for Info

ChatGPTClaudeGeminiGrokPerplexity

© 2026 Auth Plugin. All rights reserved.

Auth Plugin by FramerGeeks