github-starred/better-auth
2
0
Fork 0
mirror of https://github.com/better-auth/better-auth.git synced 2026-08-22 16:42:53 -05:00
Code Issues 2.5k Packages Projects Releases 112 Wiki Activity

[PR #640] [MERGED] Fix syntax errors and missing imports with auth form builder. #11659

New Issue
Closed
opened 2026-04-13 07:55:35 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-13 07:55:35 -05:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/better-auth/better-auth/pull/640
Author: @salvinoto
Created: 11/24/2024
Status: ✅ Merged
Merged: 11/24/2024
Merged by: @Bekacru

Base: main ← Head: fix-auth-builder

📝 Commits (2)

  • a8471fc Fix syntax errors and missing imports with auth form builder.
  • f93c4f4 chore:lint

📊 Changes

3 files changed (+195 additions, -192 deletions)

View changed files

📝 docs/components/builder/code-tabs/index.tsx (+2 -2)
📝 docs/components/builder/sign-in.tsx (+188 -188)
📝 docs/components/builder/sign-up.tsx (+5 -2)

📄 Description

When exporting from auth builder, with sign up form code specifically, you would get broken code, missing imports, especially with the tailwind classes. This update aims to resolve that. Example below of broken code exported from the current landing page:

`"use client"
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useState } from "react";
import { Loader2 } from "lucide-react";
import { signIn } from "@/lib/auth-client";

export default function SignIn() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);

return (
	<Card className="max-w-md">
		<CardHeader>
			<CardTitle className="text-lg md:text-xl">Sign In</CardTitle>
			<CardDescription className="text-xs md:text-sm">
				Enter your email below to login to your account
			</CardDescription>
		</CardHeader>
		<CardContent>
			<div className="grid gap-4">
				<div className="grid gap-2">
							<Label htmlFor="email">Email</Label>
							<Input
								id="email"
								type="email"
								placeholder="m@example.com"
								required
								onChange={(e) => {
									setEmail(e.target.value);
								}}
								value={email}
							/>
						</div>

						<div className="grid gap-2">
							<div className="flex items-center">
								<Label htmlFor="password">Password</Label>
								
									<Link
										href="#"
										className="ml-auto inline-block text-sm underline"
									>
										Forgot your password?
									</Link>
								
							</div>

							<Input
								id="password"
								type="password"
								placeholder="password"
								autoComplete="password"
							/>
						</div>

						<div className="flex items-center gap-2">
									<Checkbox
										onClick={() => {
											setRememberMe(!rememberMe);
										}}
									/>
									<Label>Remember me</Label>
								</div>
							
				

				

				
					<Button
						type="submit"
						className="w-full"
						disabled={loading}
						onClick={async () => {
							await signIn.email({ email, password });
						}}
					>
						{loading ? (
							<Loader2 size={16} className="animate-spin" />
						) : (
							"Login"
						)}
					</Button>
				

				
				<div
					className={cn(
						w-full gap-2 flex items-center justify-between flex-col,
					)}
				>
					,,,,<Button
									variant="outline"
									className={cn(
										w-full gap-2
									)}
									onClick={async () => {
										await signIn.social({ 
											provider: "github", 
											callbackURL: "/dashboard" 
										});
									}}
								>
									<svg
			xmlns="http://www.w3.org/2000/svg"
			width="1em"
			height="1em"
			viewBox="0 0 24 24"
			{...props}
		>
			<path
				fill="currentColor"
				d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
			></path>
		</svg>
									Sign in with Github
								</Button>,,<Button
									variant="outline"
									className={cn(
										w-full gap-2
									)}
									onClick={async () => {
										await signIn.social({ 
											provider: "google", 
											callbackURL: "/dashboard" 
										});
									}}
								>
									<svg
			xmlns="http://www.w3.org/2000/svg"
			width="1em"
			height="1em"
			viewBox="0 0 24 24"
			{...props}
		>
			<path
				fill="currentColor"
				d="M11.99 13.9v-3.72h9.36c.14.63.25 1.22.25 2.05c0 5.71-3.83 9.77-9.6 9.77c-5.52 0-10-4.48-10-10S6.48 2 12 2c2.7 0 4.96.99 6.69 2.61l-2.84 2.76c-.72-.68-1.98-1.48-3.85-1.48c-3.31 0-6.01 2.75-6.01 6.12s2.7 6.12 6.01 6.12c3.83 0 5.24-2.65 5.5-4.22h-5.51z"
			></path>
		</svg>
									Sign in with Google
								</Button>,,,,,
				</div>
				
			</div>
		</CardContent>
		
			<CardFooter>
				<div className="flex justify-center w-full border-t py-4">
					<p className="text-center text-xs text-neutral-500">
						Powered by{" "}
						<Link
							href="https://better-auth.com"
							className="underline"
							target="_blank"
						>
							<span className="dark:text-orange-200/90">better-auth.</span>
						</Link>
					</p>
				</div>
			</CardFooter>
		
</Card>
)
}
`

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/better-auth/better-auth/pull/640 **Author:** [@salvinoto](https://github.com/salvinoto) **Created:** 11/24/2024 **Status:** ✅ Merged **Merged:** 11/24/2024 **Merged by:** [@Bekacru](https://github.com/Bekacru) **Base:** `main` ← **Head:** `fix-auth-builder` --- ### 📝 Commits (2) - [`a8471fc`](https://github.com/better-auth/better-auth/commit/a8471fc5a084c663002b375af31f2f87fd9c2dac) Fix syntax errors and missing imports with auth form builder. - [`f93c4f4`](https://github.com/better-auth/better-auth/commit/f93c4f4baada7d953f7c4e14b600fc486943cb32) chore:lint ### 📊 Changes **3 files changed** (+195 additions, -192 deletions) <details> <summary>View changed files</summary> 📝 `docs/components/builder/code-tabs/index.tsx` (+2 -2) 📝 `docs/components/builder/sign-in.tsx` (+188 -188) 📝 `docs/components/builder/sign-up.tsx` (+5 -2) </details> ### 📄 Description When exporting from auth builder, with sign up form code specifically, you would get broken code, missing imports, especially with the tailwind classes. This update aims to resolve that. Example below of broken code exported from the current landing page: `"use client" import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { useState } from "react"; import { Loader2 } from "lucide-react"; import { signIn } from "@/lib/auth-client"; export default function SignIn() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loading, setLoading] = useState(false); return ( <Card className="max-w-md"> <CardHeader> <CardTitle className="text-lg md:text-xl">Sign In</CardTitle> <CardDescription className="text-xs md:text-sm"> Enter your email below to login to your account </CardDescription> </CardHeader> <CardContent> <div className="grid gap-4"> <div className="grid gap-2"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="m@example.com" required onChange={(e) => { setEmail(e.target.value); }} value={email} /> </div> <div className="grid gap-2"> <div className="flex items-center"> <Label htmlFor="password">Password</Label> <Link href="#" className="ml-auto inline-block text-sm underline" > Forgot your password? </Link> </div> <Input id="password" type="password" placeholder="password" autoComplete="password" /> </div> <div className="flex items-center gap-2"> <Checkbox onClick={() => { setRememberMe(!rememberMe); }} /> <Label>Remember me</Label> </div> <Button type="submit" className="w-full" disabled={loading} onClick={async () => { await signIn.email({ email, password }); }} > {loading ? ( <Loader2 size={16} className="animate-spin" /> ) : ( "Login" )} </Button> <div className={cn( w-full gap-2 flex items-center justify-between flex-col, )} > ,,,,<Button variant="outline" className={cn( w-full gap-2 )} onClick={async () => { await signIn.social({ provider: "github", callbackURL: "/dashboard" }); }} > <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} > <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" ></path> </svg> Sign in with Github </Button>,,<Button variant="outline" className={cn( w-full gap-2 )} onClick={async () => { await signIn.social({ provider: "google", callbackURL: "/dashboard" }); }} > <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} > <path fill="currentColor" d="M11.99 13.9v-3.72h9.36c.14.63.25 1.22.25 2.05c0 5.71-3.83 9.77-9.6 9.77c-5.52 0-10-4.48-10-10S6.48 2 12 2c2.7 0 4.96.99 6.69 2.61l-2.84 2.76c-.72-.68-1.98-1.48-3.85-1.48c-3.31 0-6.01 2.75-6.01 6.12s2.7 6.12 6.01 6.12c3.83 0 5.24-2.65 5.5-4.22h-5.51z" ></path> </svg> Sign in with Google </Button>,,,,, </div> </div> </CardContent> <CardFooter> <div className="flex justify-center w-full border-t py-4"> <p className="text-center text-xs text-neutral-500"> Powered by{" "} <Link href="https://better-auth.com" className="underline" target="_blank" > <span className="dark:text-orange-200/90">better-auth.</span> </Link> </p> </div> </CardFooter> </Card> ) } ` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-13 07:55:35 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
adapter
astro
awaiting external contributor
blocked
breaking
breaking change
bug
c-devops
core
credentials
database
dependencies
devops
devtools
docs
documentation
duplicate
elysia
enhancement
enterprise
expo
express
fastify
good first issue
help wanted
hono
identity
infra
integration
invalid
javascript
locked
maintenance
need-more-information
needs: info
needs: repro
nextjs
nuxt
oauth
organization
P0
payments
perf
platform
plugin
pull-request
Mirrored from GitHub Pull Request
 question
ready
regression
remix
security
social-provider
solid
stale
svelte
tanstack-start
tracking
version-bump
vue
wontfix
No labels pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
GiteaMirror ninjasurge (Kaehlen Rog)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#11659