diff --git a/site/pages/react/react-hooks.mdx b/site/pages/react/react-hooks.mdx index ffc9f09129..5808ff42b4 100644 --- a/site/pages/react/react-hooks.mdx +++ b/site/pages/react/react-hooks.mdx @@ -13,7 +13,7 @@ Tailwind CSS is a required dependency for using Alchemy Account Kit UI component ### Email authentication -```tsx twoslash +````tsx twoslash import React from "react"; import { type UseAuthenticateResult, @@ -33,47 +33,35 @@ export default function MyLoginPage() { value={email} onChange={(e) => setEmail(e.target.value)} /> - ); } -``` - -### Email authentication with redirect params -```tsx twoslash -import React from "react"; -import { - type UseAuthenticateResult, - useAuthenticate, -} from "@account-kit/react"; +// Then send the OTP -// This examples uses email authentication -// you can also use passkeys if the user has one created -export default function MyLoginPage() { +export default function MyOTPInputPage() { const { authenticate, isPending } = useAuthenticate(); - const [email, setEmail] = React.useState(""); - - const handleAuthenticate = () => { - const redirectParams = new URLSearchParams(); - redirectParams.set("myParam", "someValue"); - authenticate({ type: "email", email, redirectParams }); - }; + const [otpCode, setOTPCode] = React.useState(""); return (
setEmail(e.target.value)} + value={otpCode} + onChange={(e) => setOTPCode(e.target.value)} /> - +
); } -``` ### Social Login @@ -122,7 +110,7 @@ export default function MyLoginPage() { ); } -``` +```` To use your own auth provider, follow the instructions on how to do so with [Auth0](https://accountkit.alchemy.com/signer/authentication/auth0)