Quick Answer
- The Framer insert panel lists these components as "OTP Verification" ("6-digit code verification for email") and "Magic Link" ("Passwordless email login"). Once inserted on the canvas, the instances and their property sections are named OTP Form and Magic Link Form.
- OTP Form has Redirect Path (
/), Send Label ("Send Code"), Verify Label ("Verify Code"), Email Placeholder, Code Placeholder ("000000"), Resend Text ("Resend code"), a Back Link toggle, and seven style objects. - Magic Link Form has Button Label ("Send Magic Link"), Email Placeholder, Success Title ("Check your email"), Success Message, a Back Link toggle, and six style objects.
- Magic Link Form has no Redirect Path, no Resend Text, and no Link Style. OTP Form has no Success Title or Success Message.
- Both share identical style sub-panels, the Back Link pattern, and email branding.
Auth Plugin's component list includes two passwordless sign-in forms that look alike on the canvas but expose different properties. One sends a code, the other sends a link. This post walks through every property on both, using the components' own panels in Framer as the source, then shows how the two compare and what they share. For how each method works and when to choose one, see passwordless login with magic links and OTP in Framer. This post stays on the properties.
What Are OTP Form and Magic Link Form?
Two names apply to each component, depending on where you are in Framer.
In the insert panel, the OTP component is listed as "OTP Verification" with the description "6-digit code verification for email." The magic link component is listed as "Magic Link" with the description "Passwordless email login." Once you insert them, the instances on the canvas and the sections in the properties panel are named OTP Form and Magic Link Form. This post uses those canvas names when describing properties.
The OTP Form's panel has no code-length field and no expiry field. The insert panel describes the component as "6-digit code verification for email."
What Properties Does the OTP Form Have?
The OTP Form's panel lists these fields:
- Redirect Path:
/, with the helper text "Path to redirect after successful verification." - Send Label: "Send Code"
- Verify Label: "Verify Code"
- Email Placeholder: "Enter your email..."
- Code Placeholder: "000000"
- Resend Text: "Resend code"
- Back Link: a Show/Hide toggle, set to Hide on a freshly inserted instance.
- Seven style objects: Label Style, Input Style, Focus Style, Button Style, Error Style, Link Style, and Success Style.
The names describe the flow: a send step and a verify step, a code field, a resend option, and a redirect after successful verification.
On the canvas, the instance shows an Email label, an email input reading "Enter your email...", and a green "Send Code" button. With Back Link set to Show, a "Back to sign in" link appears under the button.
What Properties Does the Magic Link Form Have?
The Magic Link Form's panel lists these fields:
- Button Label: "Send Magic Link"
- Email Placeholder: "Enter your email..."
- Success Title: "Check your email"
- Success Message: text that begins "We've sent a magic link to your email addr..."
- Back Link: a Show/Hide toggle, set to Hide by default.
- Six style objects: Label Style, Input Style, Focus Style, Button Style, Error Style, and Success Style.
There is one Button Label instead of a Send Label and a Verify Label. Success Title and Success Message are plain text properties you can rewrite to match your product's voice.
On the canvas, the instance shows an Email label, an email input, and a green "Send Magic Link" button.
How Do the Two Forms Compare Side by Side?
| Property | OTP Form | Magic Link Form |
|---|---|---|
| Redirect Path | Yes (/) | No |
| Button labels | Send Label and Verify Label | One Button Label |
| Email Placeholder | Yes | Yes |
| Code Placeholder | Yes ("000000") | No |
| Resend Text | Yes ("Resend code") | No |
| Success Title and Success Message | No | Yes |
| Back Link toggle | Yes | Yes |
| Link Style | Yes | No |
| Style objects | 7 | 6 |
OTP Form has a Redirect Path for after verification and Resend Text for asking for another code. Magic Link Form has Success Title and Success Message instead. Link Style holds a Color (9EE86F) and a Font. Both share an Email Placeholder with the same text, the same Back Link pattern, and the same six style objects in common: Label Style, Input Style, Focus Style, Button Style, Error Style, and Success Style.
What Do the Shared Style Sub-Panels Contain?
Every style object opens a sub-panel, and the values are identical on both forms. Here is each one, described once for both.
Label Style
- Show Labels: a Show/Hide toggle
- Label Font: Inter
- Label Color: 888888
Input Style
- Font: Inter
- Text Color: 999999
- Placeholder: 999999
- Background: BBBBBB
- Padding: 12
- Border: Solid
- Radius: 10
- Shadow: the field reads "Mixed", with an "Add..." row beneath it
Focus Style
- Border: 9EE86F
- Shadow: reads "Mixed", with an "Add..." row
- Scale: 1
Button Style
- Font: Inter
- Text Color: 000000
- Background: 9EE86F
- Hover Background: 8BD85E
- Radius: 10
- Padding: 14
- Shadow: reads "Mixed", with an "Add..." row
Error Style
- Color: DC2626
- Font: Inter
Success Style
- Text Color: 166534
- Background: 22C55E
- Font: Inter
Link Style (OTP Form only)
- Color: 9EE86F
- Font: Inter
If you change a color on one, change it on the other. The Forgot Password Form has the same six style objects as the Magic Link Form, covered in the forgot password and reset password flow post.
How Does the Back Link Group Work?
Back Link is a Show/Hide toggle on both forms. While it is set to Hide, the fields that belong to it are not listed in the panel. Set it to Show, and two more fields appear:
- Back Text: "Back to sign in"
- Back Path: a link picker with a "Link To" popover, for example
/sign-inon the OTP Form and/loginon the Magic Link Form.
Back Path is a link picker, so you point it at whichever page holds your sign-in form. The Forgot Password Form uses the same Show/Hide pattern with the same two fields. OTP Form has a Link Style object and Magic Link Form does not.
Where Does Redirect Path Fit Among Auth Plugin's Other Paths?
The OTP Form's Redirect Path is a per-component setting. It is a different thing from the global Sign-In Page Path and Sign-Up Page Path under Settings > General > Auth Page Paths, covered in Auth Plugin's auth page paths and global redirects. If a visitor lands somewhere unexpected after verifying a code, check the OTP Form's Redirect Path. The global paths in Settings control where signed-out visitors are sent to sign in, which is a separate question.
How Do These Forms Handle Login State?
Neither form has a built-in Hide toggle for login state. Both belong to the group of components that do not have one, already covered in which Auth Plugin components hide by login state.
Opacity, Visible, and Rotate at the top of each panel are Framer's own standard properties, not Auth Plugin properties. Visible does not react to login state. For that, use Code Overrides, covered in Auth Plugin's Code Overrides for showing and hiding content. Both panels have a collapsed Code Overrides section at the bottom.
Do Both Forms Use the Same Branded Emails?
Yes. In Auth Plugin's Settings, the Email tab shows an Email Preview and the line "All email types use your branding." It lists four email types:
- Welcome: sent after sign-up
- Password Reset: sent when a user requests a reset
- Magic Link: sent for passwordless sign-in
- OTP Code: sent for code verification
The Brand tab holds the branding values: App Name, Logo URL, Primary Color, Button Text (color), and Support Email. The emails these two forms trigger use the same branding settings, so setting up the Brand tab once covers both. The branding and profiles post goes deeper. Style objects change the form on your page; the Brand tab changes the email.
Common Mistakes
- Looking for Redirect Path or Resend Text on the Magic Link Form. Neither is on it, both are OTP Form fields.
- Expecting Back Text and Back Path while Back Link is on Hide. They only appear once the toggle is set to Show.
- Treating Visible as a login-state toggle. Visible is Framer's own property. Use Code Overrides.
- Confusing the OTP Form's Redirect Path with the global page paths. One belongs to a single instance. The others live under Settings > General.
- Styling one form and forgetting the other. The values match by default, so a change on one creates a mismatch.
FAQ
Are "OTP Verification" and "OTP Form" different components?
No. "OTP Verification" is the name in the Framer insert panel. After you insert it, the instance and its property section are named OTP Form. The same applies to "Magic Link" and Magic Link Form.
Which of the two forms has a Redirect Path?
Of these two, only the OTP Form. Its default is /, and the helper text reads "Path to redirect after successful verification."
Does the Magic Link Form have a Resend option?
The Magic Link Form's panel has no Resend Text property. Resend Text, "Resend code" by default, is an OTP Form property. The Magic Link Form's text fields are Button Label, Email Placeholder, Success Title, Success Message, and Back Text when Back Link is shown.
Why does the OTP Form have seven style objects and the Magic Link Form six?
The OTP Form has Link Style. The other six are the same on both.
Do the emails use my branding?
Yes. Settings > Email lists Magic Link and OTP Code among the email types that use your branding.
Can I hide either form for logged-in visitors with a built-in toggle?
No. Use Code Overrides instead.
The Short Version
OTP Form and Magic Link Form are the two passwordless email forms in Auth Plugin. The insert panel calls them "OTP Verification" and "Magic Link"; on the canvas they become OTP Form and Magic Link Form. OTP Form has Redirect Path, Send Label, Verify Label, Email Placeholder, Code Placeholder, Resend Text, a Back Link toggle, and seven style objects including Link Style. Magic Link Form has Button Label, Email Placeholder, Success Title, Success Message, a Back Link toggle, and six style objects, with no Redirect Path, no Resend Text, and no Link Style. The style sub-panels hold the same values on both, the Back Link toggle reveals Back Text and Back Path on both, and the emails both forms trigger use the branding set in Settings > Brand.