From 4e2d50a1daeaae212b832332d95c0377d33277a6 Mon Sep 17 00:00:00 2001 From: rob chang Date: Mon, 16 Dec 2024 10:56:38 -0500 Subject: [PATCH 1/3] docs: update doc to cover redirect params --- site/pages/react/react-hooks.mdx | 34 +++++++++++++++++++ .../authentication/email-magic-link.mdx | 5 +++ 2 files changed, 39 insertions(+) diff --git a/site/pages/react/react-hooks.mdx b/site/pages/react/react-hooks.mdx index 998c446116..ffc9f09129 100644 --- a/site/pages/react/react-hooks.mdx +++ b/site/pages/react/react-hooks.mdx @@ -41,6 +41,40 @@ export default function MyLoginPage() { } ``` +### Email authentication with redirect params + +```tsx twoslash +import React from "react"; +import { + type UseAuthenticateResult, + useAuthenticate, +} from "@account-kit/react"; + +// This examples uses email authentication +// you can also use passkeys if the user has one created +export default function MyLoginPage() { + const { authenticate, isPending } = useAuthenticate(); + const [email, setEmail] = React.useState(""); + + const handleAuthenticate = () => { + const redirectParams = new URLSearchParams(); + redirectParams.set("myParam", "someValue"); + authenticate({ type: "email", email, redirectParams }); + }; + + return ( +
+ setEmail(e.target.value)} + /> + +
+ ); +} +``` + ### Social Login You can allow uers to sign in with an OAuth provider like Google, Facebook, or Auth0. There are two login flows that are possible: redirect and popup. The redirect flow redirects the user to the auth provider's login page, then back to a specified page in your application when done. The popup flow opens the auth provider's login page in a popup window without leaving your application, then updates your application when done. If using popup, you need to set the `enablePopupOauth` field to `true` in the [config](/react/quickstart). diff --git a/site/pages/signer/authentication/email-magic-link.mdx b/site/pages/signer/authentication/email-magic-link.mdx index edcb48c56b..94aa377157 100644 --- a/site/pages/signer/authentication/email-magic-link.mdx +++ b/site/pages/signer/authentication/email-magic-link.mdx @@ -31,6 +31,11 @@ await signer.authenticate({ email: "user@mail.com", }); +// Instead of the above code, you can add some params to include in the email +const redirectParams = new URLSearchParams(); +redirectParams.set("myParam", "someValue"); +signer.authenticate({ type: "email", email: "user@mail.com", redirectParams }); + // later once the user has clicked the link const url = new URL(window.location.href); const bundle = url.searchParams.get("bundle"); From 95dd477677f1244a46c1ebfff2d72545f63d4e1a Mon Sep 17 00:00:00 2001 From: rob chang Date: Fri, 20 Dec 2024 11:10:04 -0500 Subject: [PATCH 2/3] docs: react hook otp --- site/pages/react/react-hooks.mdx | 42 ++++++++++++-------------------- 1 file changed, 15 insertions(+), 27 deletions(-) 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) From 791e72a7657d602b24265b03db9382b3418e8b41 Mon Sep 17 00:00:00 2001 From: rob chang Date: Mon, 27 Jan 2025 12:16:27 -0500 Subject: [PATCH 3/3] fix: add mode and remove extra tick --- site/pages/react/react-hooks.mdx | 4 ++-- site/pages/signer/authentication/email-magic-link.mdx | 7 ++++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/site/pages/react/react-hooks.mdx b/site/pages/react/react-hooks.mdx index 5808ff42b4..bb9fec0599 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, @@ -110,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) diff --git a/site/pages/signer/authentication/email-magic-link.mdx b/site/pages/signer/authentication/email-magic-link.mdx index 94aa377157..cfa5d64e44 100644 --- a/site/pages/signer/authentication/email-magic-link.mdx +++ b/site/pages/signer/authentication/email-magic-link.mdx @@ -34,7 +34,12 @@ await signer.authenticate({ // Instead of the above code, you can add some params to include in the email const redirectParams = new URLSearchParams(); redirectParams.set("myParam", "someValue"); -signer.authenticate({ type: "email", email: "user@mail.com", redirectParams }); +signer.authenticate({ + type: "email", + email: "user@mail.com", + emailMode: "magicLink", + redirectParams, +}); // later once the user has clicked the link const url = new URL(window.location.href);