Skip to content

feat(blocks/authentication): add new authentication blocks #404

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat(blocks/authentication): add new authentication blocks #404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c0b0ec3
feat(blocks/authentication): add basic signup form
KhaledSaeed18 Sep 26, 2025
c3f519a
feat(blocks/authentication): add two-column signup page with cover image
KhaledSaeed18 Sep 26, 2025
6483644
feat(blocks/authentication): add signup form with icons
KhaledSaeed18 Sep 26, 2025
edd6421
feat(blocks/authentication): add signup form with image
KhaledSaeed18 Sep 26, 2025
fc310c8
feat(blocks/authentication): add email only login form
KhaledSaeed18 Sep 26, 2025
ce1e929
fix(blocks/authentication): email only login form registry
KhaledSaeed18 Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 106 additions & 0 deletions app/blocks/authentication/authentication.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import { EmailOnlyLoginForm } from "@/components/ui/8bit/blocks/email-only-login-form";
import { LoginForm } from "@/components/ui/8bit/blocks/login-form";
import { LoginForm as LoginForm2 } from "@/components/ui/8bit/blocks/login-form-2";
import { LoginForm as LoginFormWithImage } from "@/components/ui/8bit/blocks/login-form-with-image";
import { SignupForm } from "@/components/ui/8bit/blocks/signup-form";
import { SignupForm as SignupForm2 } from "@/components/ui/8bit/blocks/signup-form-2";
import { SignupForm as SignupFormWithImage } from "@/components/ui/8bit/blocks/signup-form-with-image";

import CopyCommandButton from "../../docs/components/copy-command-button";
import { OpenInV0Button } from "../../docs/components/open-in-v0-button";
import LoginPage from "../../login/page";
import SignupPage from "../../signup/page";

export default function AuthenticationBlocks() {
return (
Expand Down Expand Up @@ -87,6 +92,107 @@ export default function AuthenticationBlocks() {
<LoginFormWithImage />
</div>
</div>

<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
<h2 className="text-sm text-muted-foreground sm:pl-3">
A simple email-only login form
</h2>

<div className="flex flex-col md:flex-row items-center gap-2">
<CopyCommandButton
command="pnpm dlx shadcn@latest add @8bitcn/email-only-login-form"
copyCommand="pnpm dlx shadcn@latest add @8bitcn/email-only-login-form"
/>
<OpenInV0Button
name="8bit-email-only-login-form"
className="w-fit"
/>
</div>
</div>
<div className="flex items-center justify-center min-h-[400px] relative">
<EmailOnlyLoginForm />
</div>
</div>

<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
<h2 className="text-sm text-muted-foreground sm:pl-3">
A simple signup form
</h2>

<div className="flex flex-col md:flex-row items-center gap-2">
<CopyCommandButton
command="pnpm dlx shadcn@latest add @8bitcn/signup-form"
copyCommand="pnpm dlx shadcn@latest add @8bitcn/signup-form"
/>
<OpenInV0Button name="8bit-signup-form" className="w-fit" />
</div>
</div>
<div className="flex items-center justify-center min-h-[400px] relative">
<SignupForm />
</div>
</div>

<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
<h2 className="text-sm text-muted-foreground sm:pl-3">
A two column signup page with a cover image.
</h2>

<div className="flex flex-col md:flex-row items-center gap-2">
<CopyCommandButton
command="pnpm dlx shadcn@latest add @8bitcn/signup-page"
copyCommand="pnpm dlx shadcn@latest add @8bitcn/signup-page"
/>
<OpenInV0Button name="8bit-signup-page" className="w-fit" />
</div>
</div>
<div className="flex items-center justify-center min-h-[400px] relative border rounded-md">
<div className="w-full">
<SignupPage />
</div>
</div>

<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
<h2 className="text-sm text-muted-foreground sm:pl-3">
A simple signup form with icons
</h2>

<div className="flex flex-col md:flex-row items-center gap-2">
<CopyCommandButton
command="pnpm dlx shadcn@latest add @8bitcn/signup-form-2"
copyCommand="pnpm dlx shadcn@latest add @8bitcn/signup-form-2"
/>
<OpenInV0Button name="8bit-signup-form-2" className="w-fit" />
</div>
</div>
<div className="flex items-center justify-center min-h-[400px] relative">
<SignupForm2 />
</div>
</div>

<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
<h2 className="text-sm text-muted-foreground sm:pl-3">
A simple signup form with image
</h2>

<div className="flex flex-col md:flex-row items-center gap-2">
<CopyCommandButton
command="pnpm dlx shadcn@latest add @8bitcn/signup-form-with-image"
copyCommand="pnpm dlx shadcn@latest add @8bitcn/signup-form-with-image"
/>
<OpenInV0Button
name="8bit-signup-form-with-image"
className="w-fit"
/>
</div>
</div>
<div className="flex items-center justify-center min-h-[400px] relative w-full max-w-sm md:max-w-4xl mx-auto">
<SignupFormWithImage />
</div>
</div>
Comment on lines +96 to +195
Copy link

@coderabbitai coderabbitai bot Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Set non-submit buttons to type="button" in the new auth blocks

All of the newly introduced auth blocks wire social/alternate action buttons inside a <form> without specifying type. In HTML the default is submit, so clicking “Continue with Google/Apple/Meta” or similar will trigger the form submission instead of the intended OAuth flow. That breaks the UX for every variant showcased here (SignupForm, SignupForm2, SignupFormWithImage, EmailOnlyLoginForm) and is especially visible when these blocks are copied from the registry.

Please mark those buttons as type="button" so they don’t submit the form.

diff --git a/components/ui/8bit/blocks/email-only-login-form.tsx b/components/ui/8bit/blocks/email-only-login-form.tsx
@@
-            <Button variant="outline" className="w-full">
+            <Button type="button" variant="outline" className="w-full">
@@
-            <Button variant="outline" className="w-full">
+            <Button type="button" variant="outline" className="w-full">
diff --git a/components/ui/8bit/blocks/signup-form.tsx b/components/ui/8bit/blocks/signup-form.tsx
@@
-              <Button variant="outline" className="w-full">
+              <Button type="button" variant="outline" className="w-full">
diff --git a/components/ui/8bit/blocks/signup-form-2.tsx b/components/ui/8bit/blocks/signup-form-2.tsx
@@
-                <Button variant="outline" className="w-full">
+                <Button type="button" variant="outline" className="w-full">
@@
-                <Button variant="outline" className="w-full">
+                <Button type="button" variant="outline" className="w-full">
diff --git a/components/ui/8bit/blocks/signup-form-with-image.tsx b/components/ui/8bit/blocks/signup-form-with-image.tsx
@@
-                <Button variant="outline" className="w-full">
+                <Button type="button" variant="outline" className="w-full">
@@
-                <Button variant="outline" className="w-full">
+                <Button type="button" variant="outline" className="w-full">
@@
-                <Button variant="outline" className="w-full">
+                <Button type="button" variant="outline" className="w-full">

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In app/blocks/authentication/authentication.tsx around lines 96 to 195, several
auth block components (EmailOnlyLoginForm, SignupForm, SignupForm2,
SignupFormWithImage) render social/alternate action buttons inside <form>
elements without an explicit type, causing them to default to type="submit" and
inadvertently submit the form; update each non-submit button (social OAuth
buttons, "Continue with X", toggle/action buttons that are not the form submit)
to include type="button" in their JSX so only the intended submit button uses
type="submit" and other actions no longer trigger form submission.

</>
);
}
32 changes: 32 additions & 0 deletions app/signup/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { GalleryVerticalEnd } from "lucide-react";

import { SignupForm } from "@/components/ui/8bit/blocks/signup-form";

export default function SignupPage() {
return (
<div className="grid min-h-svh lg:grid-cols-2">
<div className="bg-muted relative hidden lg:block">
<img
src="/placeholder.svg"
alt="Image"
className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
/>
</div>
<div className="flex flex-col gap-4 p-6 md:p-10">
<div className="flex justify-center gap-2 md:justify-start">
<a href="#" className="flex items-center gap-2 font-medium">
<div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
<GalleryVerticalEnd className="size-4" />
</div>
Acme Inc.
</a>
Comment on lines +17 to +22
Copy link

@coderabbitai coderabbitai bot Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Avoid placeholder href="#" anchors.

This link scrolls to page top and provides no destination, which is a11y-hostile and confusing. Point it to a real route (e.g. /) or render static text instead.

🤖 Prompt for AI Agents 
In app/signup/page.tsx around lines 17 to 22, the anchor uses a placeholder
href="#" which causes page-top scrolling and is inaccessible; replace the
placeholder with a real route (e.g. href="/" or the appropriate homepage path)
or convert the anchor to a non-interactive element (like a div or span) if it is
purely decorative; ensure that if it remains a link it points to the correct
destination and retains accessible attributes (aria-label if needed).

</div>
<div className="flex flex-1 items-center justify-center">
<div className="w-full max-w-md">
<SignupForm />
</div>
</div>
</div>
</div>
);
Comment on lines +7 to +31
Copy link

@coderabbitai coderabbitai bot Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Prefer Next <Image> for optimized media handling.

Using a raw <img> trips the @next/next/no-img-element rule and skips automatic image optimization/loading behaviour. Please swap to next/image (or explicitly disable the lint rule with justification).

🤖 Prompt for AI Agents 
In app/signup/page.tsx around lines 7 to 31, the raw <img> violates the
@next/next/no-img-element rule and bypasses Next.js image optimization; replace
it with next/image by importing Image from "next/image", use the fill prop (or
provide explicit width/height) to match the current absolute inset-0 h-full
w-full object-cover behavior, pass the same src and alt, preserve the
dark:brightness and dark:grayscale styling via className or wrapper styling, and
remove the original <img>; do not disable the lint rule unless you have a
specific justification.

}
78 changes: 78 additions & 0 deletions components/ui/8bit/blocks/email-only-login-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { GalleryVerticalEnd } from "lucide-react";

import { cn } from "@/lib/utils";

import { Button } from "@/components/ui/8bit/button";
import { Input } from "@/components/ui/8bit/input";
import { Label } from "@/components/ui/8bit/label";

export function EmailOnlyLoginForm({
className,
...props
}: React.ComponentPropsWithoutRef<"div">) {
return (
<div className={cn("flex flex-col gap-6 max-w-md", className)} {...props}>
<form>
<div className="flex flex-col gap-6">
<div className="flex flex-col items-center gap-2">
<a
href="#"
className="flex flex-col items-center gap-2 font-medium"
>
<div className="flex size-10 items-center justify-center rounded-md">
<GalleryVerticalEnd className="size-8" />
</div>
<span className="sr-only">Acme Inc.</span>
</a>
<h1 className="retro font-bold">Welcome to Acme Inc.</h1>
<div className="retro text-center text-sm">
Don&apos;t have an account?{" "}
<a href="#" className="underline underline-offset-4">
Sign up
</a>
</div>
</div>
<div className="flex flex-col gap-6">
<div className="grid gap-3">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
placeholder="m@example.com"
required
/>
</div>
<Button type="submit" className="w-full">
Login
</Button>
</div>
<div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
<span className="retro relative z-10 bg-background px-2 text-muted-foreground">
Or continue with
</span>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<Button variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
fill="currentColor"
/>
</svg>
<span className="sr-only">Continue with Apple</span>
</Button>
<Button variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
fill="currentColor"
/>
</svg>
<span className="sr-only">Continue with Google</span>
</Button>
Comment on lines +55 to +72
Copy link

@coderabbitai coderabbitai bot Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Keep the social login buttons from submitting the email form

Inside the <form>, the Apple/Google buttons default to type="submit", so clicking them triggers an unintended form submission. Please switch both to type="button".

-            <Button variant="outline" className="w-full">
+            <Button type="button" variant="outline" className="w-full">
...
-            <Button variant="outline" className="w-full">
+            <Button type="button" variant="outline" className="w-full">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Button variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
fill="currentColor"
/>
</svg>
<span className="sr-only">Continue with Apple</span>
</Button>
<Button variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
fill="currentColor"
/>
</svg>
<span className="sr-only">Continue with Google</span>
</Button>
<Button type="button" variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
fill="currentColor"
/>
</svg>
<span className="sr-only">Continue with Apple</span>
</Button>
<Button type="button" variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
fill="currentColor"
/>
</svg>
<span className="sr-only">Continue with Google</span>
</Button>
🤖 Prompt for AI Agents 
In components/ui/8bit/blocks/email-only-login-form.tsx around lines 55 to 72,
the Apple and Google Button elements inside the form currently act as implicit
submit buttons and trigger the form on click; update both Button components to
be non-submitting by adding type="button" (ensure the Button component forwards
the type prop to the underlying <button> element so it actually prevents form
submission).

</div>
</div>
</form>
</div>
);
}
92 changes: 92 additions & 0 deletions components/ui/8bit/blocks/signup-form-2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { cn } from "@/lib/utils";

import { Button } from "@/components/ui/8bit/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/8bit/card";
import { Input } from "@/components/ui/8bit/input";
import { Label } from "@/components/ui/8bit/label";

import "../styles/retro.css";

export function SignupForm({
className,
...props
}: React.ComponentPropsWithoutRef<"div">) {
return (
<div className={cn("flex flex-col gap-6", className)} {...props}>
<Card>
<CardHeader className="text-center">
<CardTitle className="text-xl">Create an account</CardTitle>
<CardDescription className="text-xs">
Sign up with your Apple or Google account
</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid gap-6">
<div className="flex flex-col gap-4">
<Button variant="outline" className="w-full">
Copy link

@cubic-dev-ai cubic-dev-ai bot Sep 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These social auth buttons default to type="submit" inside the form, so clicking them submits the form instead of starting the Apple auth flow. Please set them to type="button" to avoid unintended submissions.

Prompt for AI agents 
Address the following comment on components/ui/8bit/blocks/signup-form-2.tsx at line 33:

<comment>These social auth buttons default to type=&quot;submit&quot; inside the form, so clicking them submits the form instead of starting the Apple auth flow. Please set them to type=&quot;button&quot; to avoid unintended submissions.</comment>

<file context>
@@ -0,0 +1,92 @@
+          &lt;form&gt;
+            &lt;div className=&quot;grid gap-6&quot;&gt;
+              &lt;div className=&quot;flex flex-col gap-4&quot;&gt;
+                &lt;Button variant=&quot;outline&quot; className=&quot;w-full&quot;&gt;
+                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;&gt;
+                    &lt;path
</file context>
Fix with Cubic

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
fill="currentColor"
/>
</svg>
Sign up with Apple
</Button>
<Button variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
fill="currentColor"
/>
</svg>
Sign up with Google
</Button>
Comment on lines +33 to +50
Copy link

@coderabbitai coderabbitai bot Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Prevent social sign-up buttons from submitting the form

Both social buttons are rendered inside the <form>, so our button primitive falls back to type="submit". That causes a form submission/reload when someone clicks “Sign up with Apple/Google.” Please make them type="button" to avoid the unintended submit.

-                <Button variant="outline" className="w-full">
+                <Button type="button" variant="outline" className="w-full">
...
-                <Button variant="outline" className="w-full">
+                <Button type="button" variant="outline" className="w-full">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Button variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
fill="currentColor"
/>
</svg>
Sign up with Apple
</Button>
<Button variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
fill="currentColor"
/>
</svg>
Sign up with Google
</Button>
<Button type="button" variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
fill="currentColor"
/>
</svg>
Sign up with Apple
</Button>
<Button type="button" variant="outline" className="w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
fill="currentColor"
/>
</svg>
Sign up with Google
</Button>
🤖 Prompt for AI Agents 
In components/ui/8bit/blocks/signup-form-2.tsx around lines 33 to 50, the two
social sign-up Button components currently default to type="submit" because they
are inside a form; change both Button elements to include type="button"
attributes so clicking them does not submit the form (leave other props like
variant and className unchanged).

</div>
<div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
<span className="relative z-10 bg-background px-2 text-muted-foreground">
Or continue with
</span>
</div>
<div className="grid gap-6">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
placeholder="m@example.com"
required
/>
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" required />
</div>
<Button type="submit" className="w-full">
Create account
</Button>
</div>
<div className="text-center text-xs">
Already have an account?{" "}
<a href="#" className="underline underline-offset-4">
Sign in
</a>
</div>
</div>
</form>
</CardContent>
</Card>
<div
className={`${"retro"} text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary`}
>
<a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
</div>
</div>
);
}
Loading