From 6a309c1ded4d2a945d111eb23ea6667d5f66cc1a Mon Sep 17 00:00:00 2001 From: blake duncan Date: Wed, 19 Mar 2025 17:02:09 -0400 Subject: [PATCH 1/3] docs: use authenticateAsync --- site/pages/react/login-methods/email-magic-link.mdx | 8 ++++---- site/pages/react/login-methods/email-otp.mdx | 8 ++++---- site/pages/react/login-methods/passkey-login.mdx | 8 ++++---- site/pages/react/login-methods/passkey-signup.mdx | 8 ++++---- site/pages/react/login-methods/social-login.mdx | 6 +++--- site/pages/react/login-methods/social-providers.mdx | 6 +++--- site/pages/react/react-hooks.mdx | 2 +- 7 files changed, 23 insertions(+), 23 deletions(-) diff --git a/site/pages/react/login-methods/email-magic-link.mdx b/site/pages/react/login-methods/email-magic-link.mdx index 2d5fd38fd6..2ff30028cb 100644 --- a/site/pages/react/login-methods/email-magic-link.mdx +++ b/site/pages/react/login-methods/email-magic-link.mdx @@ -101,12 +101,12 @@ First, prompt your user for their email address and send a magic link: import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticate } = useAuthenticate(); +const { authenticateAsync } = useAuthenticate(); // When the user submits their email const handleSendMagicLink = async (email: string) => { try { - await authenticate({ + await authenticateAsync({ type: "email", emailMode: "magicLink", email, @@ -127,7 +127,7 @@ import { useEffect } from "react"; import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticate } = useAuthenticate(); +const { authenticateAsync } = useAuthenticate(); // Handle the redirect when the component mounts useEffect(() => { @@ -137,7 +137,7 @@ useEffect(() => { if (bundle) { try { - await authenticate({ + await authenticateAsync({ type: "email", bundle, }); diff --git a/site/pages/react/login-methods/email-otp.mdx b/site/pages/react/login-methods/email-otp.mdx index 67ab064e21..b9dfcedd10 100644 --- a/site/pages/react/login-methods/email-otp.mdx +++ b/site/pages/react/login-methods/email-otp.mdx @@ -99,12 +99,12 @@ First, prompt your user for their email address and send an OTP: import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticate } = useAuthenticate(); +const { authenticateAsync } = useAuthenticate(); // When the user submits their email const handleSendCode = async (email: string) => { try { - await authenticate({ + await authenticateAsync({ type: "email", emailMode: "otp", email, @@ -124,12 +124,12 @@ Once the user receives the code, they'll enter it in your application: import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticate } = useAuthenticate(); +const { authenticateAsync } = useAuthenticate(); // When the user submits the OTP code const handleVerifyCode = async (otpCode: string) => { try { - await authenticate({ + await authenticateAsync({ type: "otp", otpCode, }); diff --git a/site/pages/react/login-methods/passkey-login.mdx b/site/pages/react/login-methods/passkey-login.mdx index 000248ecb5..db417d6796 100644 --- a/site/pages/react/login-methods/passkey-login.mdx +++ b/site/pages/react/login-methods/passkey-login.mdx @@ -86,12 +86,12 @@ If the user's passkey is associated with an email, you can use the email to help import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticate } = useAuthenticate(); +const { authenticateAsync } = useAuthenticate(); // When the user wants to log in with their passkey and email const handlePasskeyLogin = async (email: string) => { try { - await authenticate({ + await authenticateAsync({ type: "passkey", email, }); @@ -110,12 +110,12 @@ If you want to authenticate a user with just their passkey (without requiring an import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticate } = useAuthenticate(); +const { authenticateAsync } = useAuthenticate(); // When the user wants to log in with just their passkey const handlePasskeyOnlyLogin = async () => { try { - await authenticate({ + await authenticateAsync({ type: "passkey", createNew: false, // Important: set to false to prevent creating a new passkey }); diff --git a/site/pages/react/login-methods/passkey-signup.mdx b/site/pages/react/login-methods/passkey-signup.mdx index e66508a1ae..d6337a25c5 100644 --- a/site/pages/react/login-methods/passkey-signup.mdx +++ b/site/pages/react/login-methods/passkey-signup.mdx @@ -91,7 +91,7 @@ This approach associates an email with the passkey, allowing users to recover th import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticate } = useAuthenticate(); +const { authenticateAsync } = useAuthenticate(); // When the user submits their email and wants to create a passkey const handlePasskeySignup = async (email: string) => { @@ -101,7 +101,7 @@ const handlePasskeySignup = async (email: string) => { throw new Error("Please enter a valid email address"); } - await authenticate({ + await authenticateAsync({ type: "passkey", email, }); @@ -129,12 +129,12 @@ This approach creates a passkey without an associated email. Use this only if yo import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticate } = useAuthenticate(); +const { authenticateAsync } = useAuthenticate(); // When the user wants to create a passkey without email const handlePasskeyOnlySignup = async (username: string) => { try { - await authenticate({ + await authenticateAsync({ type: "passkey", createNew: true, username, // A unique identifier for the passkey diff --git a/site/pages/react/login-methods/social-login.mdx b/site/pages/react/login-methods/social-login.mdx index 8384deb629..ba5868fc11 100644 --- a/site/pages/react/login-methods/social-login.mdx +++ b/site/pages/react/login-methods/social-login.mdx @@ -123,12 +123,12 @@ Create buttons or UI elements for each social provider you want to support: import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticate, isPending } = useAuthenticate(); +const { authenticateAsync, isPending } = useAuthenticate(); // For redirect flow const handleGoogleRedirectLogin = async () => { try { - await authenticate({ + await authenticateAsync({ type: "oauth", authProviderId: "google", mode: "redirect", @@ -143,7 +143,7 @@ const handleGoogleRedirectLogin = async () => { // For popup flow const handleGooglePopupLogin = async () => { try { - await authenticate({ + await authenticateAsync({ type: "oauth", authProviderId: "google", mode: "popup", diff --git a/site/pages/react/login-methods/social-providers.mdx b/site/pages/react/login-methods/social-providers.mdx index e9fb67870e..1bf7478ccc 100644 --- a/site/pages/react/login-methods/social-providers.mdx +++ b/site/pages/react/login-methods/social-providers.mdx @@ -168,12 +168,12 @@ Use the `useAuthenticate` hook to implement Auth0 authentication: import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticate } = useAuthenticate(); +const { authenticateAsync } = useAuthenticate(); // Option 1: Generic Auth0 login (shows Auth0 provider selection screen) const handleAuth0Login = async () => { try { - await authenticate({ + await authenticateAsync({ type: "oauth", authProviderId: "auth0", mode: "popup", // or "redirect" @@ -187,7 +187,7 @@ const handleAuth0Login = async () => { // Option 2: Direct provider login (bypasses Auth0 selection screen) const handleGitHubLogin = async () => { try { - await authenticate({ + await authenticateAsync({ type: "oauth", authProviderId: "auth0", auth0Connection: "github", // Use the connection name from Auth0 diff --git a/site/pages/react/react-hooks.mdx b/site/pages/react/react-hooks.mdx index 9ce01f0fb3..3a2885240b 100644 --- a/site/pages/react/react-hooks.mdx +++ b/site/pages/react/react-hooks.mdx @@ -36,7 +36,7 @@ import React from "react"; import { useAuthenticate } from "@account-kit/react"; function MyAuthComponent() { - const { authenticate, isPending } = useAuthenticate(); + const { authenticate, authenticateAsync, isPending } = useAuthenticate(); // Use authenticate with different parameters based on auth method // The specific parameters depend on the authentication method From 8efc329eea83b1bea44580765401abf7ba6f0a4b Mon Sep 17 00:00:00 2001 From: blake duncan Date: Thu, 20 Mar 2025 09:57:27 -0400 Subject: [PATCH 2/3] docs: fix twoslash build --- site/pages/react/login-methods/email-magic-link.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/react/login-methods/email-magic-link.mdx b/site/pages/react/login-methods/email-magic-link.mdx index 2ff30028cb..12a92d6987 100644 --- a/site/pages/react/login-methods/email-magic-link.mdx +++ b/site/pages/react/login-methods/email-magic-link.mdx @@ -149,7 +149,7 @@ useEffect(() => { }; handleRedirect(); -}, [authenticate]); +}, [authenticateAsync]); ``` ### Step 3: Track Authentication Status From df95c100fc11d14e766851e2f542cf78542970a2 Mon Sep 17 00:00:00 2001 From: blake duncan Date: Fri, 21 Mar 2025 10:31:34 -0400 Subject: [PATCH 3/3] docs: use authenticate --- .../react/login-methods/email-magic-link.mdx | 48 +++++++++------- site/pages/react/login-methods/email-otp.mdx | 46 ++++++++++------ .../react/login-methods/passkey-login.mdx | 46 ++++++++++------ .../react/login-methods/passkey-signup.mdx | 55 +++++++++++-------- .../react/login-methods/social-login.mdx | 42 ++++++++------ .../react/login-methods/social-providers.mdx | 44 +++++++++------ 6 files changed, 170 insertions(+), 111 deletions(-) diff --git a/site/pages/react/login-methods/email-magic-link.mdx b/site/pages/react/login-methods/email-magic-link.mdx index 12a92d6987..373d4fc2e6 100644 --- a/site/pages/react/login-methods/email-magic-link.mdx +++ b/site/pages/react/login-methods/email-magic-link.mdx @@ -101,20 +101,25 @@ First, prompt your user for their email address and send a magic link: import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticateAsync } = useAuthenticate(); +const { authenticate } = useAuthenticate(); // When the user submits their email -const handleSendMagicLink = async (email: string) => { - try { - await authenticateAsync({ +const handleSendMagicLink = (email: string) => { + authenticate( + { type: "email", emailMode: "magicLink", email, - }); - // Success - inform user to check their email - } catch (error) { - // Handle error - } + }, + { + onSuccess: () => { + // Success - inform user to check their email + }, + onError: (error) => { + // Handle error + }, + } + ); }; ``` @@ -127,29 +132,34 @@ import { useEffect } from "react"; import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticateAsync } = useAuthenticate(); +const { authenticate } = useAuthenticate(); // Handle the redirect when the component mounts useEffect(() => { - const handleRedirect = async () => { + const handleRedirect = () => { const url = new URL(window.location.href); const bundle = url.searchParams.get("bundle"); if (bundle) { - try { - await authenticateAsync({ + authenticate( + { type: "email", bundle, - }); - // Authentication successful! - } catch (error) { - // Handle error - } + }, + { + onSuccess: () => { + // Authentication successful! + }, + onError: (error) => { + // Handle error + }, + } + ); } }; handleRedirect(); -}, [authenticateAsync]); +}, [authenticate]); ``` ### Step 3: Track Authentication Status diff --git a/site/pages/react/login-methods/email-otp.mdx b/site/pages/react/login-methods/email-otp.mdx index b9dfcedd10..a3dfb08a26 100644 --- a/site/pages/react/login-methods/email-otp.mdx +++ b/site/pages/react/login-methods/email-otp.mdx @@ -99,20 +99,25 @@ First, prompt your user for their email address and send an OTP: import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticateAsync } = useAuthenticate(); +const { authenticate } = useAuthenticate(); // When the user submits their email -const handleSendCode = async (email: string) => { - try { - await authenticateAsync({ +const handleSendCode = (email: string) => { + authenticate( + { type: "email", emailMode: "otp", email, - }); - // Success - now show the OTP input form - } catch (error) { - // Handle error - } + }, + { + onSuccess: () => { + // Success - now show the OTP input form + }, + onError: (error) => { + // Handle error + }, + } + ); }; ``` @@ -124,19 +129,24 @@ Once the user receives the code, they'll enter it in your application: import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticateAsync } = useAuthenticate(); +const { authenticate } = useAuthenticate(); // When the user submits the OTP code -const handleVerifyCode = async (otpCode: string) => { - try { - await authenticateAsync({ +const handleVerifyCode = (otpCode: string) => { + authenticate( + { type: "otp", otpCode, - }); - // Authentication successful! - } catch (error) { - // Handle invalid code error - } + }, + { + onSuccess: () => { + // Authentication successful! + }, + onError: (error) => { + // Handle invalid code error + }, + } + ); }; ``` diff --git a/site/pages/react/login-methods/passkey-login.mdx b/site/pages/react/login-methods/passkey-login.mdx index db417d6796..bee7cd32d3 100644 --- a/site/pages/react/login-methods/passkey-login.mdx +++ b/site/pages/react/login-methods/passkey-login.mdx @@ -86,19 +86,24 @@ If the user's passkey is associated with an email, you can use the email to help import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticateAsync } = useAuthenticate(); +const { authenticate } = useAuthenticate(); // When the user wants to log in with their passkey and email -const handlePasskeyLogin = async (email: string) => { - try { - await authenticateAsync({ +const handlePasskeyLogin = (email: string) => { + authenticate( + { type: "passkey", email, - }); - // Success - user authenticated with passkey - } catch (error) { - // Handle error - } + }, + { + onSuccess: () => { + // Success - user authenticated with passkey + }, + onError: (error) => { + // Handle error + }, + } + ); }; ``` @@ -110,19 +115,24 @@ If you want to authenticate a user with just their passkey (without requiring an import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticateAsync } = useAuthenticate(); +const { authenticate } = useAuthenticate(); // When the user wants to log in with just their passkey -const handlePasskeyOnlyLogin = async () => { - try { - await authenticateAsync({ +const handlePasskeyOnlyLogin = () => { + authenticate( + { type: "passkey", createNew: false, // Important: set to false to prevent creating a new passkey - }); - // Success - user authenticated with passkey - } catch (error) { - // Handle error - } + }, + { + onSuccess: () => { + // Success - user authenticated with passkey + }, + onError: (error) => { + // Handle error + }, + } + ); }; ``` diff --git a/site/pages/react/login-methods/passkey-signup.mdx b/site/pages/react/login-methods/passkey-signup.mdx index d6337a25c5..0c51dbf1ed 100644 --- a/site/pages/react/login-methods/passkey-signup.mdx +++ b/site/pages/react/login-methods/passkey-signup.mdx @@ -91,24 +91,30 @@ This approach associates an email with the passkey, allowing users to recover th import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticateAsync } = useAuthenticate(); +const { authenticate } = useAuthenticate(); // When the user submits their email and wants to create a passkey -const handlePasskeySignup = async (email: string) => { - try { - // Important: Validate the email before proceeding - if (!isValidEmail(email)) { - throw new Error("Please enter a valid email address"); - } +const handlePasskeySignup = (email: string) => { + // Important: Validate the email before proceeding + if (!isValidEmail(email)) { + // Handle validation error + return; + } - await authenticateAsync({ + authenticate( + { type: "passkey", email, - }); - // Success - passkey created and user authenticated - } catch (error) { - // Handle error - } + }, + { + onSuccess: () => { + // Success - passkey created and user authenticated + }, + onError: (error) => { + // Handle error + }, + } + ); }; // Simple email validation function @@ -129,20 +135,25 @@ This approach creates a passkey without an associated email. Use this only if yo import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticateAsync } = useAuthenticate(); +const { authenticate } = useAuthenticate(); // When the user wants to create a passkey without email -const handlePasskeyOnlySignup = async (username: string) => { - try { - await authenticateAsync({ +const handlePasskeyOnlySignup = (username: string) => { + authenticate( + { type: "passkey", createNew: true, username, // A unique identifier for the passkey - }); - // Success - passkey created and user authenticated - } catch (error) { - // Handle error - } + }, + { + onSuccess: () => { + // Success - passkey created and user authenticated + }, + onError: (error) => { + // Handle error + }, + } + ); }; ``` diff --git a/site/pages/react/login-methods/social-login.mdx b/site/pages/react/login-methods/social-login.mdx index ba5868fc11..614a731096 100644 --- a/site/pages/react/login-methods/social-login.mdx +++ b/site/pages/react/login-methods/social-login.mdx @@ -123,35 +123,43 @@ Create buttons or UI elements for each social provider you want to support: import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticateAsync, isPending } = useAuthenticate(); +const { authenticate, isPending } = useAuthenticate(); // For redirect flow -const handleGoogleRedirectLogin = async () => { - try { - await authenticateAsync({ +const handleGoogleRedirectLogin = () => { + authenticate( + { type: "oauth", authProviderId: "google", mode: "redirect", redirectUrl: "/", // Redirect to this page after authentication - }); - // The page will redirect, so no need for success handling here - } catch (error) { - // Handle error - } + }, + { + onError: (error) => { + // Handle error + // The page will redirect on success, so no need for onSuccess handler + }, + } + ); }; // For popup flow -const handleGooglePopupLogin = async () => { - try { - await authenticateAsync({ +const handleGooglePopupLogin = () => { + authenticate( + { type: "oauth", authProviderId: "google", mode: "popup", - }); - // Authentication successful! - } catch (error) { - // Handle error - } + }, + { + onSuccess: () => { + // Authentication successful! + }, + onError: (error) => { + // Handle error + }, + } + ); }; ``` diff --git a/site/pages/react/login-methods/social-providers.mdx b/site/pages/react/login-methods/social-providers.mdx index 1bf7478ccc..ad3d41b760 100644 --- a/site/pages/react/login-methods/social-providers.mdx +++ b/site/pages/react/login-methods/social-providers.mdx @@ -168,35 +168,45 @@ Use the `useAuthenticate` hook to implement Auth0 authentication: import { useAuthenticate } from "@account-kit/react"; // Inside your component -const { authenticateAsync } = useAuthenticate(); +const { authenticate } = useAuthenticate(); // Option 1: Generic Auth0 login (shows Auth0 provider selection screen) -const handleAuth0Login = async () => { - try { - await authenticateAsync({ +const handleAuth0Login = () => { + authenticate( + { type: "oauth", authProviderId: "auth0", mode: "popup", // or "redirect" - }); - // Authentication successful! - } catch (error) { - // Handle error - } + }, + { + onSuccess: () => { + // Authentication successful! + }, + onError: (error) => { + // Handle error + }, + } + ); }; // Option 2: Direct provider login (bypasses Auth0 selection screen) -const handleGitHubLogin = async () => { - try { - await authenticateAsync({ +const handleGitHubLogin = () => { + authenticate( + { type: "oauth", authProviderId: "auth0", auth0Connection: "github", // Use the connection name from Auth0 mode: "popup", // or "redirect" - }); - // Authentication successful! - } catch (error) { - // Handle error - } + }, + { + onSuccess: () => { + // Authentication successful! + }, + onError: (error) => { + // Handle error + }, + } + ); }; ```