LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-10 04:19:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

demo: fix types

Browse Source
This commit is contained in:
Bereket Engida
2024-09-23 15:30:43 +03:00
parent ba3fcdb93d
commit 1ee9ec8042
2 changed files with 62 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
demo/nextjs/components/sign-in.tsx
View File

@@ -26,7 +26,7 @@ export default function SignIn() {
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false); const [rememberMe, setRememberMe] = useState(false);
const router = useRouter(); const router = useRouter();
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false);
return ( return (
<Card className="z-50 rounded-md rounded-t-none max-w-md"> <Card className="z-50 rounded-md rounded-t-none max-w-md">
<CardHeader> <CardHeader>
@@ -77,7 +77,9 @@ export default function SignIn() {
<Label>Remember me</Label> <Label>Remember me</Label>
</div> </div>
<Button type="submit" className="w-full" <Button
type="submit"
className="w-full"
disabled={loading} disabled={loading}
onClick={async () => { onClick={async () => {
await signIn.email({ await signIn.email({
@@ -85,22 +87,21 @@ export default function SignIn() {
password: password, password: password,
callbackURL: "/dashboard", callbackURL: "/dashboard",
dontRememberMe: !rememberMe, dontRememberMe: !rememberMe,
options: { fetchOptions: {
onRequest: () => { onRequest: () => {
setLoading(true) setLoading(true);
}, },
onResponse: () => { onResponse: () => {
setLoading(false) setLoading(false);
}, },
onError: (ctx) => { onError: (ctx) => {
toast.error(ctx.error.message) toast.error(ctx.error.message);
} },
} },
}) });
}}> }}
{ >
loading ? <Loader2 size={16} className="animate-spin" /> : "Login" {loading ? <Loader2 size={16} className="animate-spin" /> : "Login"}
}
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -109,7 +110,7 @@ export default function SignIn() {
await signIn.social({ await signIn.social({
provider: "github", provider: "github",
callbackURL: "/dashboard", callbackURL: "/dashboard",
}) });
}} }}
> >
<GitHubLogoIcon /> <GitHubLogoIcon />
@@ -122,7 +123,7 @@ export default function SignIn() {
await signIn.social({ await signIn.social({
provider: "google", provider: "google",
callbackURL: "/dashboard", callbackURL: "/dashboard",
}) });
}} }}
> >
<svg <svg
@@ -150,11 +151,15 @@ export default function SignIn() {
</svg> </svg>
Continue with Google Continue with Google
</Button> </Button>
<Button variant="outline" className="gap-2" onClick={async () => { <Button
variant="outline"
className="gap-2"
onClick={async () => {
await signIn.passkey({ await signIn.passkey({
callbackURL: "/dashboard", callbackURL: "/dashboard",
}) });
}}> }}
>
<Key size={16} /> <Key size={16} />
Sign-in with Passkey Sign-in with Passkey
</Button> </Button>

60
demo/nextjs/components/sign-up.tsx
View File

@@ -39,8 +39,7 @@ export function SignUp() {
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
}; };
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false);
return ( return (
<Card className="z-50 rounded-md rounded-t-none max-w-md"> <Card className="z-50 rounded-md rounded-t-none max-w-md">
@@ -132,14 +131,21 @@ export function SignUp() {
onChange={handleImageChange} onChange={handleImageChange}
className="w-full" className="w-full"
/> />
{imagePreview && <X className="cursor-pointer" onClick={() => { {imagePreview && (
<X
className="cursor-pointer"
onClick={() => {
setImage(null); setImage(null);
setImagePreview(null); setImagePreview(null);
}} />} }}
/>
)}
</div> </div>
</div> </div>
</div> </div>
<Button type="submit" className="w-full" <Button
type="submit"
className="w-full"
disabled={loading} disabled={loading}
onClick={async () => { onClick={async () => {
await signUp.email({ await signUp.email({
@@ -148,22 +154,25 @@ export function SignUp() {
name: `${firstName} ${lastName}`, name: `${firstName} ${lastName}`,
image: image ? await convertImageToBase64(image) : "", image: image ? await convertImageToBase64(image) : "",
callbackURL: "/dashboard", callbackURL: "/dashboard",
options: { fetchOptions: {
onResponse: () => { onResponse: () => {
setLoading(false) setLoading(false);
}, },
onRequest: () => { onRequest: () => {
setLoading(true) setLoading(true);
}, },
onError: (ctx) => { onError: (ctx) => {
toast.error(ctx.error.message) toast.error(ctx.error.message);
}, },
} },
}) });
}}> }}
{ >
loading ? <Loader2 size={16} className="animate-spin" /> : "Create an account" {loading ? (
} <Loader2 size={16} className="animate-spin" />
) : (
"Create an account"
)}
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -172,15 +181,15 @@ export function SignUp() {
const res = await client.signIn.social({ const res = await client.signIn.social({
provider: "google", provider: "google",
callbackURL: "/dashboard", callbackURL: "/dashboard",
options: { fetchOptions: {
onRequest: () => { onRequest: () => {
setLoading(true) setLoading(true);
}, },
onResponse: () => { onResponse: () => {
setLoading(false) setLoading(false);
}, },
} },
}) });
}} }}
disabled={loading} disabled={loading}
> >
@@ -216,15 +225,15 @@ export function SignUp() {
await signIn.social({ await signIn.social({
provider: "github", provider: "github",
callbackURL: "/dashboard", callbackURL: "/dashboard",
options: { fetchOptions: {
onRequest: () => { onRequest: () => {
setLoading(true) setLoading(true);
}, },
onResponse: () => { onResponse: () => {
setLoading(false) setLoading(false);
}, },
} },
}) });
}} }}
disabled={loading} disabled={loading}
> >
@@ -244,7 +253,6 @@ export function SignUp() {
); );
} }
async function convertImageToBase64(file: File): Promise<string> { async function convertImageToBase64(file: File): Promise<string> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();