diff --git a/demo/nextjs/app/(auth)/forget-password/page.tsx b/demo/nextjs/app/(auth)/forget-password/page.tsx index 75cb9a91..1905ec54 100644 --- a/demo/nextjs/app/(auth)/forget-password/page.tsx +++ b/demo/nextjs/app/(auth)/forget-password/page.tsx @@ -3,12 +3,12 @@ import { Alert, AlertDescription } from "@/components/ui/alert"; import { Button } from "@/components/ui/button"; import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; @@ -18,112 +18,111 @@ import Link from "next/link"; import { useState } from "react"; export default function Component() { - const [email, setEmail] = useState(""); - const [isSubmitting, setIsSubmitting] = useState(false); - const [isSubmitted, setIsSubmitted] = useState(false); - const [error, setError] = useState(""); + const [email, setEmail] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); + const [isSubmitted, setIsSubmitted] = useState(false); + const [error, setError] = useState(""); - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - setIsSubmitting(true); - setError(""); + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + setError(""); - // Simulate API call - try { - const res = await client.forgetPassword({ - email, - }); - // If the API call is successful, set isSubmitted to true - setIsSubmitted(true); - } catch (err) { - setError("An error occurred. Please try again."); - } finally { - setIsSubmitting(false); - } - }; + // Simulate API call + try { + const res = await client.forgetPassword({ + email, + }); + // If the API call is successful, set isSubmitted to true + setIsSubmitted(true); + } catch (err) { + setError("An error occurred. Please try again."); + } finally { + setIsSubmitting(false); + } + }; - if (isSubmitted) { - return ( -
+ if (isSubmitted) { + return ( +
+ + + Check your email + + We've sent a password reset link to your email. + + + + + + + If you don't see the email, check your spam folder. + + + + + + + +
+ ); + } - - - Check your email - - We've sent a password reset link to your email. - - - - - - - If you don't see the email, check your spam folder. - - - - - - - -
- ); - } - - return ( -
- {/* Radial gradient for the container to give a faded look */} -
- - - Forgot password - - Enter your email to reset your password - - - -
-
-
- - setEmail(e.target.value)} - required - /> -
-
- {error && ( - - - {error} - - )} - -
- - - - - - - -
- ); + return ( +
+ {/* Radial gradient for the container to give a faded look */} +
+ + + Forgot password + + Enter your email to reset your password + + + +
+
+
+ + setEmail(e.target.value)} + required + /> +
+
+ {error && ( + + + {error} + + )} + +
+ + + + + + + +
+ ); } diff --git a/demo/nextjs/app/(auth)/reset-password/[token]/page.tsx b/demo/nextjs/app/(auth)/reset-password/[token]/page.tsx index e82b67d1..788945c7 100644 --- a/demo/nextjs/app/(auth)/reset-password/[token]/page.tsx +++ b/demo/nextjs/app/(auth)/reset-password/[token]/page.tsx @@ -3,12 +3,12 @@ import { Alert, AlertDescription } from "@/components/ui/alert"; import { Button } from "@/components/ui/button"; import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, } from "@/components/ui/card"; import { Label } from "@/components/ui/label"; import { PasswordInput } from "@/components/ui/password-input"; @@ -19,78 +19,79 @@ import { useState } from "react"; import { toast } from "sonner"; export default function ResetPassword({ - params, -}: { params: { token: string } }) { - const [password, setPassword] = useState(""); - const [confirmPassword, setConfirmPassword] = useState(""); - const [isSubmitting, setIsSubmitting] = useState(false); - const [error, setError] = useState(""); - const token = params.token; - const router = useRouter(); - async function handleSubmit(e: React.FormEvent) { - e.preventDefault(); - setIsSubmitting(true); - setError(""); - const res = await client.resetPassword({ - token, - newPassword: password, - }); - if (res.error) { - toast.error(res.error.message); - } - setIsSubmitting(false); - router.push("/sign-in"); - } - return ( -
- - - - Reset password - - Enter new password and confirm it to reset your password - - - -
-
-
- - setPassword(e.target.value)} - autoComplete="password" - placeholder="Password" - /> -
-
- - setConfirmPassword(e.target.value)} - autoComplete="password" - placeholder="Password" - /> -
-
- {error && ( - - - {error} - - )} - -
- - -
- ); + params, +}: { + params: { token: string }; +}) { + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); + const [error, setError] = useState(""); + const token = params.token; + const router = useRouter(); + async function handleSubmit(e: React.FormEvent) { + e.preventDefault(); + setIsSubmitting(true); + setError(""); + const res = await client.resetPassword({ + token, + newPassword: password, + }); + if (res.error) { + toast.error(res.error.message); + } + setIsSubmitting(false); + router.push("/sign-in"); + } + return ( +
+ + + Reset password + + Enter new password and confirm it to reset your password + + + +
+
+
+ + setPassword(e.target.value)} + autoComplete="password" + placeholder="Password" + /> +
+
+ + setConfirmPassword(e.target.value)} + autoComplete="password" + placeholder="Password" + /> +
+
+ {error && ( + + + {error} + + )} + +
+ + +
+ ); } diff --git a/demo/nextjs/app/(auth)/sign-in/page.tsx b/demo/nextjs/app/(auth)/sign-in/page.tsx index 6674139c..ab675046 100644 --- a/demo/nextjs/app/(auth)/sign-in/page.tsx +++ b/demo/nextjs/app/(auth)/sign-in/page.tsx @@ -9,15 +9,20 @@ export default function Page() {
- , - }, { - title: "Sign Up", - value: "sign-up", - content: , - }]} /> + , + }, + { + title: "Sign Up", + value: "sign-up", + content: , + }, + ]} + />
diff --git a/demo/nextjs/app/(auth)/two-factor/otp/page.tsx b/demo/nextjs/app/(auth)/two-factor/otp/page.tsx index 4a27f6f3..90835807 100644 --- a/demo/nextjs/app/(auth)/two-factor/otp/page.tsx +++ b/demo/nextjs/app/(auth)/two-factor/otp/page.tsx @@ -2,12 +2,12 @@ import { Button } from "@/components/ui/button"; import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; @@ -17,104 +17,105 @@ import { useRouter } from "next/navigation"; import { useState } from "react"; export default function Component() { - const [otp, setOtp] = useState(""); - const [isOtpSent, setIsOtpSent] = useState(false); - const [message, setMessage] = useState(""); - const [isError, setIsError] = useState(false); - const [isValidated, setIsValidated] = useState(false); - const [OTP, setOTP] = useState(""); + const [otp, setOtp] = useState(""); + const [isOtpSent, setIsOtpSent] = useState(false); + const [message, setMessage] = useState(""); + const [isError, setIsError] = useState(false); + const [isValidated, setIsValidated] = useState(false); + const [OTP, setOTP] = useState(""); - // In a real app, this email would come from your authentication context - const userEmail = "user@example.com"; + // In a real app, this email would come from your authentication context + const userEmail = "user@example.com"; - const requestOTP = async () => { - const res = await client.twoFactor.sendOtp({ - options: { - body: { - returnOTP: true, - }, - }, - }); - setOTP(res.data?.OTP || ""); - // In a real app, this would call your backend API to send the OTP - setMessage("OTP sent to your email"); - setIsError(false); - setIsOtpSent(true); - }; - const router = useRouter(); + const requestOTP = async () => { + const res = await client.twoFactor.sendOtp({ + fetchOptions: { + body: { + returnOTP: true, + }, + }, + }); + setOTP(res.data?.OTP || ""); + // In a real app, this would call your backend API to send the OTP + setMessage("OTP sent to your email"); + setIsError(false); + setIsOtpSent(true); + }; + const router = useRouter(); - const validateOTP = async () => { - const res = await client.twoFactor.verifyOtp({ - code: otp, - }); - if (res.data) { - setMessage("OTP validated successfully"); - setIsError(false); - setIsValidated(true); - router.push("/"); - } else { - setIsError(true); - setMessage("Invalid OTP"); - } - }; - return ( -
- - - Two-Factor Authentication - - Verify your identity with a one-time password - - - -
- {!isOtpSent ? ( - - ) : ( - <> -
- - - setOtp(e.target.value)} - maxLength={6} - /> -
- - - )} -
- {message && ( -
- {isError ? ( - - ) : ( - - )} -

{message}

-
- )} - - -
- ); + const validateOTP = async () => { + const res = await client.twoFactor.verifyOtp({ + code: otp, + }); + if (res.data) { + setMessage("OTP validated successfully"); + setIsError(false); + setIsValidated(true); + router.push("/"); + } else { + setIsError(true); + setMessage("Invalid OTP"); + } + }; + return ( +
+ + + Two-Factor Authentication + + Verify your identity with a one-time password + + + +
+ {!isOtpSent ? ( + + ) : ( + <> +
+ + + setOtp(e.target.value)} + maxLength={6} + /> +
+ + + )} +
+ {message && ( +
+ {isError ? ( + + ) : ( + + )} +

{message}

+
+ )} + + +
+ ); } diff --git a/demo/nextjs/app/(auth)/two-factor/page.tsx b/demo/nextjs/app/(auth)/two-factor/page.tsx index fbb3ac42..0e067322 100644 --- a/demo/nextjs/app/(auth)/two-factor/page.tsx +++ b/demo/nextjs/app/(auth)/two-factor/page.tsx @@ -2,12 +2,12 @@ import { Button } from "@/components/ui/button"; import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; @@ -17,81 +17,81 @@ import Link from "next/link"; import { useState } from "react"; export default function Component() { - const [totpCode, setTotpCode] = useState(""); - const [error, setError] = useState(""); - const [success, setSuccess] = useState(false); + const [totpCode, setTotpCode] = useState(""); + const [error, setError] = useState(""); + const [success, setSuccess] = useState(false); - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - if (totpCode.length !== 6 || !/^\d+$/.test(totpCode)) { - setError("TOTP code must be 6 digits"); - return; - } - client.twoFactor - .verifyTotp({ - code: totpCode, - }) - .then((res) => { - if (res.data?.status) { - setSuccess(true); - setError(""); - } else { - setError("Invalid TOTP code"); - } - }); - }; + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (totpCode.length !== 6 || !/^\d+$/.test(totpCode)) { + setError("TOTP code must be 6 digits"); + return; + } + client.twoFactor + .verifyTotp({ + code: totpCode, + }) + .then((res) => { + if (res.data?.status) { + setSuccess(true); + setError(""); + } else { + setError("Invalid TOTP code"); + } + }); + }; - return ( -
- - - TOTP Verification - - Enter your 6-digit TOTP code to authenticate - - - - {!success ? ( -
-
- - setTotpCode(e.target.value)} - placeholder="Enter 6-digit code" - required - /> -
- {error && ( -
- - {error} -
- )} - -
- ) : ( -
- -

Verification Successful

-
- )} - - - - - - - -
- ); + return ( +
+ + + TOTP Verification + + Enter your 6-digit TOTP code to authenticate + + + + {!success ? ( +
+
+ + setTotpCode(e.target.value)} + placeholder="Enter 6-digit code" + required + /> +
+ {error && ( +
+ + {error} +
+ )} + +
+ ) : ( +
+ +

Verification Successful

+
+ )} + + + + + + + +
+ ); } diff --git a/demo/nextjs/lib/auth-client.ts b/demo/nextjs/lib/auth-client.ts index 0680a6d9..dd397358 100644 --- a/demo/nextjs/lib/auth-client.ts +++ b/demo/nextjs/lib/auth-client.ts @@ -28,5 +28,3 @@ export const { useListOrganizations, useActiveOrganization, } = client; - -client.$Infer;