From 9f4bb9ba5d26e2038a53423c22ea66b9b7e58f6e Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Tue, 17 Dec 2024 14:41:28 -0500 Subject: [PATCH 1/3] add sms rate limiting using iframe pubkey --- .../src/app/dashboard/page.tsx | 45 +++++++++++++------ packages/sdk-react/src/actions/initOtpAuth.ts | 4 ++ .../sdk-react/src/components/auth/Auth.tsx | 1 + .../src/components/auth/OtpVerification.tsx | 2 + 4 files changed, 38 insertions(+), 14 deletions(-) diff --git a/examples/react-components/src/app/dashboard/page.tsx b/examples/react-components/src/app/dashboard/page.tsx index 2c6e8eb0..cdc89f73 100644 --- a/examples/react-components/src/app/dashboard/page.tsx +++ b/examples/react-components/src/app/dashboard/page.tsx @@ -8,6 +8,7 @@ import { getVerifiedSuborgs, OtpVerification, OtpType, + initOtpAuth, } from "@turnkey/sdk-react"; import { useEffect, useState } from "react"; import "./dashboard.css"; @@ -83,22 +84,30 @@ export default function Dashboard() { toast.success("Wallet successfully imported"); }; const handleResendEmail = async () => { - const initAuthResponse = await authIframeClient?.initOtpAuth({ - organizationId: suborgId, + const initAuthResponse = await initOtpAuth({ + suborgID: suborgId, otpType: OtpType.Email, contact: emailInput, + userIdentifier: authIframeClient?.iframePublicKey! }); + if (!initAuthResponse ||!initAuthResponse.otpId!){ + toast.error("Failed to send OTP"); + return + } setOtpId(initAuthResponse?.otpId!); }; const handleResendSms = async () => { - const initAuthResponse = await authIframeClient?.initOtpAuth({ - organizationId: suborgId, + const initAuthResponse = await initOtpAuth({ + suborgID: suborgId, otpType: OtpType.Sms, contact: phoneInput, - smsCustomization: { - template: "Your Turnkey Demo OTP is {{.OtpCode}}", - }, + customSmsMessage: "Your Turnkey Demo OTP is {{.OtpCode}}", + userIdentifier: authIframeClient?.iframePublicKey! }); + if (!initAuthResponse ||!initAuthResponse.otpId!){ + toast.error("Failed to send OTP"); + return + } setOtpId(initAuthResponse?.otpId!); }; @@ -130,11 +139,16 @@ export default function Dashboard() { userEmail: emailInput, userTagIds: [], }); - const initAuthResponse = await authIframeClient?.initOtpAuth({ - organizationId: suborgId, + const initAuthResponse = await initOtpAuth({ + suborgID: suborgId, otpType: OtpType.Email, contact: emailInput, + userIdentifier: authIframeClient?.iframePublicKey! }); + if (!initAuthResponse ||!initAuthResponse.otpId!){ + toast.error("Failed to send OTP"); + return + } setOtpId(initAuthResponse?.otpId!); setIsEmailModalOpen(false); setIsOtpModalOpen(true); @@ -159,14 +173,17 @@ export default function Dashboard() { userPhoneNumber: phoneInput, userTagIds: [], }); - const initAuthResponse = await authIframeClient?.initOtpAuth({ - organizationId: suborgId, + const initAuthResponse = await initOtpAuth({ + suborgID: suborgId, otpType: OtpType.Sms, contact: phoneInput, - smsCustomization: { - template: "Your Turnkey Demo OTP is {{.OtpCode}}", - }, + customSmsMessage: "Your Turnkey Demo OTP is {{.OtpCode}}", + userIdentifier: authIframeClient?.iframePublicKey! }); + if (!initAuthResponse ||!initAuthResponse.otpId!){ + toast.error("Failed to send OTP"); + return + } setOtpId(initAuthResponse?.otpId!); setIsEmailModalOpen(false); setIsOtpModalOpen(true); diff --git a/packages/sdk-react/src/actions/initOtpAuth.ts b/packages/sdk-react/src/actions/initOtpAuth.ts index aaa12195..16ceb620 100644 --- a/packages/sdk-react/src/actions/initOtpAuth.ts +++ b/packages/sdk-react/src/actions/initOtpAuth.ts @@ -7,6 +7,7 @@ type InitOtpAuthRequest = { otpType: string; contact: string; customSmsMessage?: string; + userIdentifier?: string; }; type InitOtpAuthResponse = { @@ -28,6 +29,9 @@ export async function initOtpAuth( contact: request.contact, otpType: request.otpType, organizationId: request.suborgID, + ...(request.userIdentifier && { + userIdentifier: request.userIdentifier + }), ...(request.customSmsMessage && { smsCustomization: { template: request.customSmsMessage, diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index f7b445bc..802dd01c 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/packages/sdk-react/src/components/auth/Auth.tsx @@ -249,6 +249,7 @@ const Auth: React.FC = ({ otpType, contact: value, ...(customSmsMessage && { customSmsMessage }), + userIdentifier: authIframeClient?.iframePublicKey! }); if (initAuthResponse && initAuthResponse.otpId) { setSuborgId(suborgId); diff --git a/packages/sdk-react/src/components/auth/OtpVerification.tsx b/packages/sdk-react/src/components/auth/OtpVerification.tsx index f69c13ee..5f7ef35f 100644 --- a/packages/sdk-react/src/components/auth/OtpVerification.tsx +++ b/packages/sdk-react/src/components/auth/OtpVerification.tsx @@ -1,3 +1,5 @@ +"use client" + import React, { useRef, useState } from "react"; import OtpInput from "./otp"; import styles from "./OtpVerification.module.css"; From fd7a9295014668bc62b0ff381b2863cf21ba7825 Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Tue, 17 Dec 2024 14:49:51 -0500 Subject: [PATCH 2/3] prettier --- .../src/app/dashboard/page.tsx | 24 +++++++++---------- packages/sdk-react/src/actions/initOtpAuth.ts | 2 +- .../sdk-react/src/components/auth/Auth.tsx | 2 +- .../src/components/auth/OtpVerification.tsx | 2 +- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/examples/react-components/src/app/dashboard/page.tsx b/examples/react-components/src/app/dashboard/page.tsx index cdc89f73..9bf86b02 100644 --- a/examples/react-components/src/app/dashboard/page.tsx +++ b/examples/react-components/src/app/dashboard/page.tsx @@ -88,11 +88,11 @@ export default function Dashboard() { suborgID: suborgId, otpType: OtpType.Email, contact: emailInput, - userIdentifier: authIframeClient?.iframePublicKey! + userIdentifier: authIframeClient?.iframePublicKey!, }); - if (!initAuthResponse ||!initAuthResponse.otpId!){ + if (!initAuthResponse || !initAuthResponse.otpId!) { toast.error("Failed to send OTP"); - return + return; } setOtpId(initAuthResponse?.otpId!); }; @@ -102,11 +102,11 @@ export default function Dashboard() { otpType: OtpType.Sms, contact: phoneInput, customSmsMessage: "Your Turnkey Demo OTP is {{.OtpCode}}", - userIdentifier: authIframeClient?.iframePublicKey! + userIdentifier: authIframeClient?.iframePublicKey!, }); - if (!initAuthResponse ||!initAuthResponse.otpId!){ + if (!initAuthResponse || !initAuthResponse.otpId!) { toast.error("Failed to send OTP"); - return + return; } setOtpId(initAuthResponse?.otpId!); }; @@ -143,11 +143,11 @@ export default function Dashboard() { suborgID: suborgId, otpType: OtpType.Email, contact: emailInput, - userIdentifier: authIframeClient?.iframePublicKey! + userIdentifier: authIframeClient?.iframePublicKey!, }); - if (!initAuthResponse ||!initAuthResponse.otpId!){ + if (!initAuthResponse || !initAuthResponse.otpId!) { toast.error("Failed to send OTP"); - return + return; } setOtpId(initAuthResponse?.otpId!); setIsEmailModalOpen(false); @@ -178,11 +178,11 @@ export default function Dashboard() { otpType: OtpType.Sms, contact: phoneInput, customSmsMessage: "Your Turnkey Demo OTP is {{.OtpCode}}", - userIdentifier: authIframeClient?.iframePublicKey! + userIdentifier: authIframeClient?.iframePublicKey!, }); - if (!initAuthResponse ||!initAuthResponse.otpId!){ + if (!initAuthResponse || !initAuthResponse.otpId!) { toast.error("Failed to send OTP"); - return + return; } setOtpId(initAuthResponse?.otpId!); setIsEmailModalOpen(false); diff --git a/packages/sdk-react/src/actions/initOtpAuth.ts b/packages/sdk-react/src/actions/initOtpAuth.ts index 16ceb620..a1292242 100644 --- a/packages/sdk-react/src/actions/initOtpAuth.ts +++ b/packages/sdk-react/src/actions/initOtpAuth.ts @@ -30,7 +30,7 @@ export async function initOtpAuth( otpType: request.otpType, organizationId: request.suborgID, ...(request.userIdentifier && { - userIdentifier: request.userIdentifier + userIdentifier: request.userIdentifier, }), ...(request.customSmsMessage && { smsCustomization: { diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index 802dd01c..aee230c0 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/packages/sdk-react/src/components/auth/Auth.tsx @@ -249,7 +249,7 @@ const Auth: React.FC = ({ otpType, contact: value, ...(customSmsMessage && { customSmsMessage }), - userIdentifier: authIframeClient?.iframePublicKey! + userIdentifier: authIframeClient?.iframePublicKey!, }); if (initAuthResponse && initAuthResponse.otpId) { setSuborgId(suborgId); diff --git a/packages/sdk-react/src/components/auth/OtpVerification.tsx b/packages/sdk-react/src/components/auth/OtpVerification.tsx index 5f7ef35f..f4f44441 100644 --- a/packages/sdk-react/src/components/auth/OtpVerification.tsx +++ b/packages/sdk-react/src/components/auth/OtpVerification.tsx @@ -1,4 +1,4 @@ -"use client" +"use client"; import React, { useRef, useState } from "react"; import OtpInput from "./otp"; From c8330fac1e1db6471e46f8c2d12bfe4c4d2e2dfc Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Tue, 17 Dec 2024 14:50:49 -0500 Subject: [PATCH 3/3] add changeset for sms rate limiting --- .changeset/wet-tools-deliver.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wet-tools-deliver.md diff --git a/.changeset/wet-tools-deliver.md b/.changeset/wet-tools-deliver.md new file mode 100644 index 00000000..7277ba3b --- /dev/null +++ b/.changeset/wet-tools-deliver.md @@ -0,0 +1,5 @@ +--- +"@turnkey/sdk-react": patch +--- + +Add a user identifier for sms rate limiting