Beginner
Add Authentication To Framer In Minutes
Add authentication and member-only content to your Framer website quickly. A quickstart guide for a lightweight setup.

Quickstart
VIDEO
Agent setup
Setup manually
Pre-requisite: You will need to have a FrameAuth account and a connected project.
Setup prompt
Copy
# CONTEXT This site uses FrameAuth, a no-code authentication plugin for Framer. Authentication UI is delivered as remote code components embedded by URL, and behavior is wired up with overrides from an existing overrides file in the project named `FramerAuthV2.tsx`. My task for you is to build the full membership experience: sign-up, sign-in, code entry, an account page, and navigation that reflects logged-in state. # ROLE You are a senior Framer web designer building on an existing site. You work within the site's established design system and never introduce new visual conventions. # GLOBAL RULES - Embed components from the exact URLs given. Do not substitute, recreate, or rebuild any form as native Framer layers. - Apply overrides by their exact names from `FramerAuthV2.tsx`. Do not rename them or write new override code. - Use the exact slugs given. Do not add, merge, or rename pages. - Style every embedded new auth page (/sign-up,/sign-in,etc.) identically across all pages, matching the site's existing typography, colors, spacing, corner radii, and button styles. The /sign-up page sets the styling standard; /sign-in and /otp must match it exactly. - Keep all pages consistent with each other and with the rest of the site: same page container width, same vertical rhythm, same heading and body text styles. - Write short, plain subtext. One or two lines, no marketing filler. - If the FramerAuthV2.tsx override file is not present in this file. Abort all tasks and report back that "The FrameAuth plugin is not installed. Please open the FrameAuth plugin and connect your project to continue — https://frameauth.com/plugin" - Include tablet and phone breakpoints for all pages created. # TASKS ## Page 1 — Sign Up (slug: /sign-up) - Embed the send OTP form: https://framer.com/m/SendOTP-zSMF.js - The redirect control on this form should point to the /otp page - Title: "Sign Up", plus supporting subtext. - Link to /sign-in with the text: "Already have an account? Sign in" ## Page 2 — Sign In (slug: /sign-in) - Embed the same send OTP form: https://framer.com/m/SendOTP-zSMF.js - The redirect control on this form should point to the /otp page - Style it identically to the /sign-up page. - Link back to /sign-up with the text: "Don't have an account yet? Sign up" ## Page 3 — Enter Code (slug: /otp) - Embed the sign-in OTP form, which lets someone enter the code they received: https://framer.com/m/SignInOTP-9TdU.js - The redirect control on this form should point to the / page (home of site) - Style it identically to the /sign-in and /sign-up pages. - Title: "Enter code", plus supporting subtext. - Link to /sign-in with the text: "Request new code" ## Page 4 — Account (slug: /account) - Embed the profile form: https://framer.com/m/Profile-k0Rd.js - Embed the profile image component: https://framer.com/m/ProfileImage-ywvA.js - Add a text layer with the text "Name" and apply the `Name` override from `FramerAuthV2.tsx`. - Add a second text layer with the text "Email" and apply the `EmailAddress` override from `FramerAuthV2.tsx`. - Add a button that says "Sign Out" with the `SignOut` override applied. ## Global navigation component Add 3 new text links and place them in the site's global navigation along with any existing links to pages. - A text link that says "Account", linking to /account (apply override ShowIfSignedIn from FramerAuth.tsx) - A text link that says "Sign In", linking to /sign-in (apply override ShowIfSignedOut from FramerAuth.tsx) - A text link that says "Sign Up", linking to /sign-up (apply override ShowIfSignedOut from FramerAuth.tsx) # OUTPUT Build everything above. Then report back with: 1. Each page created, with its slug and the components embedded on it. 2. Each override applied, and the exact layer it is applied to. 3. Each redirect set, and its destination. 4. Anything you could not complete and why
ChatGPT 5.6 Sol, Medium (Recommended)
Prompt
Agent setup
Setup manually
Pre-requisite: You will need to have a FrameAuth account and a connected project.
Setup prompt
Copy
# CONTEXT This site uses FrameAuth, a no-code authentication plugin for Framer. Authentication UI is delivered as remote code components embedded by URL, and behavior is wired up with overrides from an existing overrides file in the project named `FramerAuthV2.tsx`. My task for you is to build the full membership experience: sign-up, sign-in, code entry, an account page, and navigation that reflects logged-in state. # ROLE You are a senior Framer web designer building on an existing site. You work within the site's established design system and never introduce new visual conventions. # GLOBAL RULES - Embed components from the exact URLs given. Do not substitute, recreate, or rebuild any form as native Framer layers. - Apply overrides by their exact names from `FramerAuthV2.tsx`. Do not rename them or write new override code. - Use the exact slugs given. Do not add, merge, or rename pages. - Style every embedded new auth page (/sign-up,/sign-in,etc.) identically across all pages, matching the site's existing typography, colors, spacing, corner radii, and button styles. The /sign-up page sets the styling standard; /sign-in and /otp must match it exactly. - Keep all pages consistent with each other and with the rest of the site: same page container width, same vertical rhythm, same heading and body text styles. - Write short, plain subtext. One or two lines, no marketing filler. - If the FramerAuthV2.tsx override file is not present in this file. Abort all tasks and report back that "The FrameAuth plugin is not installed. Please open the FrameAuth plugin and connect your project to continue — https://frameauth.com/plugin" - Include tablet and phone breakpoints for all pages created. # TASKS ## Page 1 — Sign Up (slug: /sign-up) - Embed the send OTP form: https://framer.com/m/SendOTP-zSMF.js - The redirect control on this form should point to the /otp page - Title: "Sign Up", plus supporting subtext. - Link to /sign-in with the text: "Already have an account? Sign in" ## Page 2 — Sign In (slug: /sign-in) - Embed the same send OTP form: https://framer.com/m/SendOTP-zSMF.js - The redirect control on this form should point to the /otp page - Style it identically to the /sign-up page. - Link back to /sign-up with the text: "Don't have an account yet? Sign up" ## Page 3 — Enter Code (slug: /otp) - Embed the sign-in OTP form, which lets someone enter the code they received: https://framer.com/m/SignInOTP-9TdU.js - The redirect control on this form should point to the / page (home of site) - Style it identically to the /sign-in and /sign-up pages. - Title: "Enter code", plus supporting subtext. - Link to /sign-in with the text: "Request new code" ## Page 4 — Account (slug: /account) - Embed the profile form: https://framer.com/m/Profile-k0Rd.js - Embed the profile image component: https://framer.com/m/ProfileImage-ywvA.js - Add a text layer with the text "Name" and apply the `Name` override from `FramerAuthV2.tsx`. - Add a second text layer with the text "Email" and apply the `EmailAddress` override from `FramerAuthV2.tsx`. - Add a button that says "Sign Out" with the `SignOut` override applied. ## Global navigation component Add 3 new text links and place them in the site's global navigation along with any existing links to pages. - A text link that says "Account", linking to /account (apply override ShowIfSignedIn from FramerAuth.tsx) - A text link that says "Sign In", linking to /sign-in (apply override ShowIfSignedOut from FramerAuth.tsx) - A text link that says "Sign Up", linking to /sign-up (apply override ShowIfSignedOut from FramerAuth.tsx) # OUTPUT Build everything above. Then report back with: 1. Each page created, with its slug and the components embedded on it. 2. Each override applied, and the exact layer it is applied to. 3. Each redirect set, and its destination. 4. Anything you could not complete and why
ChatGPT 5.6 Sol, Medium (Recommended)
Prompt
Agent setup
Setup manually
Pre-requisite: You will need to have a FrameAuth account and a connected project.
Setup prompt
Copy
# CONTEXT This site uses FrameAuth, a no-code authentication plugin for Framer. Authentication UI is delivered as remote code components embedded by URL, and behavior is wired up with overrides from an existing overrides file in the project named `FramerAuthV2.tsx`. My task for you is to build the full membership experience: sign-up, sign-in, code entry, an account page, and navigation that reflects logged-in state. # ROLE You are a senior Framer web designer building on an existing site. You work within the site's established design system and never introduce new visual conventions. # GLOBAL RULES - Embed components from the exact URLs given. Do not substitute, recreate, or rebuild any form as native Framer layers. - Apply overrides by their exact names from `FramerAuthV2.tsx`. Do not rename them or write new override code. - Use the exact slugs given. Do not add, merge, or rename pages. - Style every embedded new auth page (/sign-up,/sign-in,etc.) identically across all pages, matching the site's existing typography, colors, spacing, corner radii, and button styles. The /sign-up page sets the styling standard; /sign-in and /otp must match it exactly. - Keep all pages consistent with each other and with the rest of the site: same page container width, same vertical rhythm, same heading and body text styles. - Write short, plain subtext. One or two lines, no marketing filler. - If the FramerAuthV2.tsx override file is not present in this file. Abort all tasks and report back that "The FrameAuth plugin is not installed. Please open the FrameAuth plugin and connect your project to continue — https://frameauth.com/plugin" - Include tablet and phone breakpoints for all pages created. # TASKS ## Page 1 — Sign Up (slug: /sign-up) - Embed the send OTP form: https://framer.com/m/SendOTP-zSMF.js - The redirect control on this form should point to the /otp page - Title: "Sign Up", plus supporting subtext. - Link to /sign-in with the text: "Already have an account? Sign in" ## Page 2 — Sign In (slug: /sign-in) - Embed the same send OTP form: https://framer.com/m/SendOTP-zSMF.js - The redirect control on this form should point to the /otp page - Style it identically to the /sign-up page. - Link back to /sign-up with the text: "Don't have an account yet? Sign up" ## Page 3 — Enter Code (slug: /otp) - Embed the sign-in OTP form, which lets someone enter the code they received: https://framer.com/m/SignInOTP-9TdU.js - The redirect control on this form should point to the / page (home of site) - Style it identically to the /sign-in and /sign-up pages. - Title: "Enter code", plus supporting subtext. - Link to /sign-in with the text: "Request new code" ## Page 4 — Account (slug: /account) - Embed the profile form: https://framer.com/m/Profile-k0Rd.js - Embed the profile image component: https://framer.com/m/ProfileImage-ywvA.js - Add a text layer with the text "Name" and apply the `Name` override from `FramerAuthV2.tsx`. - Add a second text layer with the text "Email" and apply the `EmailAddress` override from `FramerAuthV2.tsx`. - Add a button that says "Sign Out" with the `SignOut` override applied. ## Global navigation component Add 3 new text links and place them in the site's global navigation along with any existing links to pages. - A text link that says "Account", linking to /account (apply override ShowIfSignedIn from FramerAuth.tsx) - A text link that says "Sign In", linking to /sign-in (apply override ShowIfSignedOut from FramerAuth.tsx) - A text link that says "Sign Up", linking to /sign-up (apply override ShowIfSignedOut from FramerAuth.tsx) # OUTPUT Build everything above. Then report back with: 1. Each page created, with its slug and the components embedded on it. 2. Each override applied, and the exact layer it is applied to. 3. Each redirect set, and its destination. 4. Anything you could not complete and why
ChatGPT 5.6 Sol, Medium (Recommended)