diff --git a/site/pages/react/react-hooks.mdx b/site/pages/react/react-hooks.mdx index 2630fc632e..a99905d9c7 100644 --- a/site/pages/react/react-hooks.mdx +++ b/site/pages/react/react-hooks.mdx @@ -9,7 +9,7 @@ If you don't want to use our pre-built UI components, you can build your own cus ### Email authentication -```tsx twoslash +````tsx twoslash import React from "react"; import { type UseAuthenticateResult, @@ -29,47 +29,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 @@ -118,7 +106,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)