Quick Answer
- Sign In Form has 8 top-level properties and 6 style objects. Sign Up Form has more: 10 top-level properties (expanding to 13 when Sign In Link is shown) and 7 style objects.
- The extra style object on Sign Up Form is Validator Style, which controls the pass/fail colors on the password strength checklist. Sign In Form has no equivalent.
- Sign In Form has a Hide Logged In toggle that removes the form from view when a user is already authenticated. Sign Up Form has no such toggle.
- Both forms share the same 6 base style objects (Label, Input, Focus, Button, Error, Link) with matching defaults.
- All properties on both forms are editable directly from the Framer properties panel — no code required.
Sign In Form and Sign Up Form are the first two components most sites use. Every other major Auth Plugin component — OTP Form, Magic Link Form, Avatar, Profile Form, Access Switch, Code Overrides, Forgot Password, Reset Password — has a dedicated properties explainer. These two don't. This post covers both together, side by side, since they share panel structure and are almost always configured at the same time. For the step-by-step of inserting them, see the full authentication guide. For building a working registration flow around Sign Up Form specifically, that post covers the broader pattern. This one covers the panel.
What Are Sign In Form and Sign Up Form?
Both are Auth components (labeled AUTH in the insert panel) from Auth Plugin's set of 13 components. Sign In Form's canvas description is "Email & password login with validation." Sign Up Form's is "Registration with password strength validator." Drop either onto the canvas and it renders as a working form — not a static mockup — connected to Auth Plugin's backend.
All 13 components, including both of these, are available on the free plan. Pricing is the same across tiers for component access: Basic (free, 100 identities, 1 site), Pro ($19/mo, 1,000 identities, 5 sites), and Scale ($49/mo, 10,000+ identities, unlimited sites) all include the full component set.
How Do the Two Forms Compare at a Glance?
| Sign In Form | Sign Up Form | |
|---|---|---|
| Style objects | 6 | 7 (adds Validator Style) |
| Self-hiding toggle | Hide Logged In (Yes/No) | None |
| Forgot password link | Forgot Link + Forgot Path + Forgot Text | None |
| Sign-in crosslink | None | Sign In Link + Sign In Path + Prefix Text + Sign In Text |
| Password strength checklist | None | Password Rules (Show/Hide) |
| Terms and Conditions | None | Terms Text + Terms URL |
| Default button label | Sign In | Create Account |
| Fields on canvas | Email, Password | Name, Email, Password + strength checklist + T&C checkbox |
The two forms share their base structure but diverge where the use cases diverge. Sign In Form is built around getting a returning user through quickly, with a forgot password escape route and a self-hiding toggle for users who are already logged in. Sign Up Form is built around onboarding a new user, with password strength feedback, a terms link, and a crosslink back to sign-in for existing users who landed on the wrong page.
What Do the Self-Hiding and Link Toggle Properties Do?
Hide Logged In (Sign In Form only) is a Yes/No toggle, defaulting to Yes. When Yes, the Sign In Form removes itself from view when a user is already authenticated. A returning visitor who lands on the sign-in page while already logged in won't see the form at all. This is the same self-hiding mechanism used by Social Auth Button and Sign Out Button, documented in the components that hide by login state post. Sign Up Form has no equivalent toggle.
Forgot Link (Sign In Form only) is a Show/Hide toggle, defaulting to Hide. When set to Hide, no forgot password link renders on the form at all. When set to Show, the "Forgot password?" link appears, and one additional property becomes available in the panel: Forgot Text, a string field defaulting to Forgot password?. That text property only appears when Forgot Link is set to Show — it's invisible in the panel otherwise. Forgot Path (the link picker) is present regardless of the Forgot Link toggle state.
Sign In Link (Sign Up Form only) is a Show/Hide toggle, defaulting to Hide. When set to Show, the three navigation properties described above (Sign In Path, Prefix Text, Sign In Text) appear in the panel.
Password Rules (Sign Up Form only) is a Show/Hide toggle, defaulting to Show. When set to Show, a password strength checklist is visible on the canvas below the password field. Set it to Hide and the checklist disappears from the rendered form.
What Do the Placeholder Text Properties Do?
Both forms have placeholder text properties that control what appears inside the input fields before a user types.
Sign In Form placeholders:
- Email Placeholder: string, default
Enter your email... - Password Placeholder: string, default
Enter your password...
Sign Up Form placeholders:
- Name Placeholder: string, default
Enter your name... - Email Placeholder: string, default
Enter your email... - Password Placeholder: string, default
Create a password...
Sign Up Form has one more placeholder (Name) because its canvas renders a name field that Sign In Form doesn't have.
Button Label is present on both forms as a string field. Sign In Form defaults to Sign In. Sign Up Form defaults to Create Account. Change either to match your site's language without touching the component's code.
Terms Text and Terms URL (Sign Up Form only): Terms Text is a string defaulting to Terms & Conditions. Terms URL is a link picker defaulting to empty (Add...). Together they render a terms and conditions checkbox on the form. Terms URL is optional — leaving it empty is valid if you don't have a terms page yet.
What Is Validator Style and Why Does Only Sign Up Form Have It?
Validator Style is the seventh style object on Sign Up Form. It has three properties: Pass Color (#22C55E), Fail Color (#9CA3AF), and Font (Inter).
This style object controls the password strength checklist — the list of requirements that appears below the password field when Password Rules is set to Show. Each requirement shows in Pass Color when the user's password meets it and in Fail Color when it doesn't.
Sign In Form has no Validator Style because it has no password strength checklist. The validator is a Sign Up-only feature, designed for the moment a new user is creating a password rather than entering an existing one. That's why the canvas description for Sign Up Form specifically says "password strength validator" and Sign In Form's doesn't.
What Is the Code Overrides Section at the Bottom?
Both forms have a Code Overrides section at the bottom of the properties panel, collapsed by default. This is where Framer code overrides from Auth Plugin's Auth Plugin Overrides component can be applied to extend or modify behavior beyond what the panel properties expose. The Code Overrides post covers what the five available overrides actually do. The section being collapsed by default means it won't interfere with a standard setup — it's there when you need it.
Common Mistakes
- Setting Redirect Path to
/and leaving it. The default sends a user back to the home page after signing in or signing up. Most sites want them to land on a dashboard or a welcome page instead. Update Redirect Path on both forms before going live. - Not realizing Forgot Text only appears when Forgot Link is set to Show. If you're looking for a property to change the "Forgot password?" label and can't find it, check that Forgot Link is toggled to Show first.
- Leaving Hide Logged In on Yes and wondering why the Sign In Form disappears. That's the default behavior and it's working correctly. A logged-in visitor won't see the Sign In Form. If you need it visible regardless of login state, set Hide Logged In to No.
- Assuming Sign Up Form has Hide Logged In. It doesn't. Only Sign In Form has that self-hiding toggle.
- Pointing Forgot Path at the wrong page. Forgot Path needs to point at the page carrying your Forgot Password Form, not a Reset Password page. These are two separate components and two separate pages in the flow.
- Leaving Terms URL empty when Terms Text is already customized. The text renders on the form even without a URL. If your site has a terms page, link it.
FAQ
Does Sign In Form hide automatically when someone is logged in?
Yes, by default. Hide Logged In defaults to Yes, which removes the form from view for an already-authenticated visitor. Set it to No if you want the form visible regardless of login state.
What does Forgot Link do?
Forgot Link is a Show/Hide toggle that controls whether a "Forgot password?" link renders on the Sign In Form at all. Set to Hide (the default), no link appears. Set to Show, the link appears and a Forgot Text property unlocks in the panel so you can change the label text. Forgot Path controls where the link navigates.
What is Validator Style?
Validator Style is a style object unique to Sign Up Form. It has Pass Color, Fail Color, and Font properties that control how the password strength checklist looks — green for requirements met, gray for requirements not yet met, by default.
Can I change the button text on both forms?
Yes. Both forms have a Button Label property. Sign In Form defaults to Sign In. Sign Up Form defaults to Create Account. Both are plain string fields — edit them directly in the panel.
Does Sign Up Form have a Hide Logged In toggle?
No. Hide Logged In is only on Sign In Form. Sign Up Form has no equivalent self-hiding toggle. If you need to hide the Sign Up Form for logged-in users, Code Overrides is the way to handle that.
Is Redirect Path the same as the global Sign-In Page Path in Settings?
No. Redirect Path on the component controls where a user lands after a successful sign-in or sign-up. The global Sign-In Page Path in Settings controls where an unauthenticated visitor gets sent when they hit a protected page. The Auth Page Paths guide covers the distinction.
The Short Version
Sign In Form and Sign Up Form share the same 6 base style objects and the same Redirect Path property, but diverge after that. Sign In Form adds a Hide Logged In self-hiding toggle and a Forgot Link system (toggle plus path plus text). Sign Up Form adds a Sign In Link crosslink system, a Password Rules toggle, a Terms Text and Terms URL pair, and a seventh style object — Validator Style — for the password strength checklist. For setup steps, see the full authentication guide. All 13 components, including both forms, are included on the free plan — see pricing for the full tier breakdown.
What About Social Auth Buttons?
Sign In Form handles email and password authentication. For one-click Google sign-in, the Social Auth Buttons component is the right addition — a separate component that sits alongside Sign In Form rather than being part of it. The Google OAuth setup guide walks through configuring the OAuth credentials that make it work.