Skip to content

Commit

Permalink
docs: react hook otp
Browse files Browse the repository at this point in the history
  • Loading branch information
RobChangCA committed Dec 20, 2024
1 parent 8cc8207 commit 92bc1af
Showing 1 changed file with 15 additions and 27 deletions.
42 changes: 15 additions & 27 deletions site/pages/react/react-hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -29,47 +29,35 @@ export default function MyLoginPage() {
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button onClick={() => authenticate({ type: "email", email })}>
<button
onClick={() => authenticate({ type: "email", email, emailMode: "otp" })}
>
Login
</button>
</div>
);
}
```

### 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 (
<div>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
value={otpCode}
onChange={(e) => setOTPCode(e.target.value)}
/>
<button onClick={handleAuthenticate}>Login</button>
<button
onClick={() => authenticate({ type: "otp", otpCode });}
>
Submit
</button>
</div>
);
}
```

### Social Login

Expand Down Expand Up @@ -118,7 +106,7 @@ export default function MyLoginPage() {
</div>
);
}
```
````
To use your own auth provider, follow the instructions on how to do so with [Auth0](https://accountkit.alchemy.com/signer/authentication/auth0)
Expand Down

0 comments on commit 92bc1af

Please sign in to comment.