Merge pull-request #452

tkhq · Dec 17, 2024 · aaac3f6 · aaac3f6
2 parents cb6854e + c8330fa
commit aaac3f6
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/.changeset/wet-tools-deliver.md b/.changeset/wet-tools-deliver.md
@@ -0,0 +1,5 @@
+---
+"@turnkey/sdk-react": patch
+---
+
+Add a user identifier for sms rate limiting
diff --git 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
@@ -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
@@ -249,6 +249,7 @@ const Auth: React.FC<AuthProps> = ({
       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
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef, useState } from "react";
 import OtpInput from "./otp";
 import styles from "./OtpVerification.module.css";