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

chore(demo): replace isLoading using useTransition (#3775)

Browse Source 
* fix: use `useTransition` for isLoading

* fixup! fix: use `useTransition` for isLoading
This commit is contained in:
Alex Yang
2025-08-04 11:11:20 -07:00
committed by Bereket Engida
parent f49a2fbf99
commit 3ee67fcca0
5 changed files with 95 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
demo/nextjs/app/client-test/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useState, useTransition } from "react";
import { signIn, client } from "@/lib/auth-client";
import { Button } from "@/components/ui/button";
import {
@@ -19,33 +19,31 @@ import { Loader2 } from "lucide-react";
export default function ClientTest() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const [loading, startTransition] = useTransition();
// Get the session data using the useSession hook
const { data: session, isPending, error } = client.useSession();
const handleLogin = async () => {
setLoading(true);
await signIn.email(
{
email,
password,
callbackURL: "/client-test",
},
{
onResponse: () => {
setLoading(false);
startTransition(async () => {
await signIn.email(
{
email,
password,
callbackURL: "/client-test",
},
onError: (ctx) => {
toast.error(ctx.error.message);
{
onError: (ctx) => {
toast.error(ctx.error.message);
},
onSuccess: () => {
toast.success("Successfully logged in!");
setEmail("");
setPassword("");
},
},
onSuccess: () => {
toast.success("Successfully logged in!");
setEmail("");
setPassword("");
},
},
);
);
});
};
return (

40
demo/nextjs/app/dashboard/user-card.tsx
View File

@@ -42,7 +42,7 @@ import {
} from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useState, useTransition } from "react";
import { toast } from "sonner";
import { UAParser } from "ua-parser-js";
import {
@@ -657,7 +657,7 @@ function EditUserDialog() {
}
};
const [open, setOpen] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isLoading, startTransition] = useTransition();
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
@@ -720,25 +720,27 @@ function EditUserDialog() {
<Button
disabled={isLoading}
onClick={async () => {
setIsLoading(true);
await client.updateUser({
image: image ? await convertImageToBase64(image) : undefined,
name: name ? name : undefined,
fetchOptions: {
onSuccess: () => {
toast.success("User updated successfully");
startTransition(async () => {
await client.updateUser({
image: image ? await convertImageToBase64(image) : undefined,
name: name ? name : undefined,
fetchOptions: {
onSuccess: () => {
toast.success("User updated successfully");
},
onError: (error) => {
toast.error(error.error.message);
},
},
onError: (error) => {
toast.error(error.error.message);
},
},
});
startTransition(() => {
setName("");
router.refresh();
setImage(null);
setImagePreview(null);
setOpen(false);
});
});
setName("");
router.refresh();
setImage(null);
setImagePreview(null);
setIsLoading(false);
setOpen(false);
}}
>
{isLoading ? (

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

@@ -12,7 +12,7 @@ import {
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { useState } from "react";
import { useState, useTransition } from "react";
import { Loader2 } from "lucide-react";
import { signIn } from "@/lib/auth-client";
import Link from "next/link";
@@ -22,7 +22,7 @@ import { useRouter } from "next/navigation";
export default function SignIn() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const [loading, startTransition] = useTransition();
const [rememberMe, setRememberMe] = useState(false);
const router = useRouter();
@@ -83,16 +83,16 @@ export default function SignIn() {
className="w-full"
disabled={loading}
onClick={async () => {
setLoading(true);
await signIn.email(
{ email, password, rememberMe: rememberMe ? true : false },
{
onSuccess(context) {
router.push("/dashboard");
startTransition(async () => {
await signIn.email(
{ email, password, rememberMe },
{
onSuccess(context) {
router.push("/dashboard");
},
},
},
);
setLoading(false);
);
});
}}
>
{loading ? <Loader2 size={16} className="animate-spin" /> : "Login"}

13
docs/app/docs/[[...slug]]/page.client.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { useState } from "react";
import { useState, useTransition } from "react";
import {
Check,
Copy,
@@ -50,11 +50,10 @@ export function useCopyButton(
const cache = new Map<string, string>();
export function LLMCopyButton() {
const [isLoading, setLoading] = useState(false);
const [isLoading, startTransition] = useTransition();
const [checked, onClick] = useCopyButton(async () => {
setLoading(true);
const url = window.location.pathname + ".mdx";
try {
startTransition(async () => {
const url = window.location.pathname + ".mdx";
const cached = cache.get(url);
if (cached) {
@@ -71,9 +70,7 @@ export function LLMCopyButton() {
}),
]);
}
} finally {
setLoading(false);
}
});
});
return (

75
docs/components/generate-apple-jwt.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useState } from "react";
import { useState, useTransition } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { KJUR } from "jsrsasign";
@@ -43,7 +43,7 @@ type AppleJwtFormValues = z.infer<typeof appleJwtSchema>;
export const GenerateAppleJwt = () => {
const [generatedJwt, setGeneratedJwt] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [isLoading, startTransition] = useTransition();
const form = useForm<AppleJwtFormValues>({
resolver: zodResolver(appleJwtSchema),
@@ -56,48 +56,51 @@ export const GenerateAppleJwt = () => {
});
const onSubmit = async (data: AppleJwtFormValues) => {
setIsLoading(true);
setGeneratedJwt(null);
setError(null);
startTransition(() => {
try {
//normalize the private key by replacing \r\n with \n and trimming whitespace just incase lol
const normalizedKey = data.privateKey.replace(/\r\n/g, "\n").trim();
try {
//normalize the private key by replacing \r\n with \n and trimming whitespace just incase lol
const normalizedKey = data.privateKey.replace(/\r\n/g, "\n").trim();
//since jose is not working with safari, we are using jsrsasign
//since jose is not working with safari, we are using jsrsasign
const header = {
alg: "ES256",
kid: data.keyId,
typ: "JWT",
};
const header = {
alg: "ES256",
kid: data.keyId,
typ: "JWT",
};
const issuedAtSeconds = Math.floor(Date.now() / 1000);
const expirationSeconds = issuedAtSeconds + 180 * 24 * 60 * 60; // 180 days. Should we let the user choose this ? MAX is 6 months
const issuedAtSeconds = Math.floor(Date.now() / 1000);
const expirationSeconds = issuedAtSeconds + 180 * 24 * 60 * 60; // 180 days. Should we let the user choose this ? MAX is 6 months
const payload = {
iss: data.teamId, // Issuer (Team ID)
aud: "https://appleid.apple.com", // Audience
sub: data.clientId, // Subject (Client ID -> Service ID)
iat: issuedAtSeconds, // Issued At timestamp
exp: expirationSeconds, // Expiration timestamp
};
const payload = {
iss: data.teamId, // Issuer (Team ID)
aud: "https://appleid.apple.com", // Audience
sub: data.clientId, // Subject (Client ID -> Service ID)
iat: issuedAtSeconds, // Issued At timestamp
exp: expirationSeconds, // Expiration timestamp
};
const sHeader = JSON.stringify(header);
const sPayload = JSON.stringify(payload);
const sHeader = JSON.stringify(header);
const sPayload = JSON.stringify(payload);
const jwt = KJUR.jws.JWS.sign("ES256", sHeader, sPayload, normalizedKey);
setGeneratedJwt(jwt);
} catch (err: any) {
console.error("JWT Generation Error:", err);
setError(
`Failed to generate JWT: ${
err.message || "Unknown error"
}. Check key format and details.`,
);
} finally {
setIsLoading(false);
}
const jwt = KJUR.jws.JWS.sign(
"ES256",
sHeader,
sPayload,
normalizedKey,
);
setGeneratedJwt(jwt);
} catch (err: any) {
console.error("JWT Generation Error:", err);
setError(
`Failed to generate JWT: ${
err.message || "Unknown error"
}. Check key format and details.`,
);
}
});
};
const copyToClipboard = () => {