Merge pull-request #503

tkhq · Feb 13, 2025 · 7e44349 · 7e44349
2 parents 0d2e286 + faa757c
commit 7e44349
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 24 deletions.
diff --git a/.changeset/khaki-glasses-teach.md b/.changeset/khaki-glasses-teach.md
@@ -0,0 +1,5 @@
+---
+"@turnkey/sdk-react": patch
+---
+
+Patch EWK custom session lengths - previously not working as intended (defaulted to 15 minute sessions only) and fix the following useLocalStorage issue when compiling: [Error: useLocalStorage is a client-only hook]
diff --git a/packages/sdk-react/README.md b/packages/sdk-react/README.md
@@ -120,6 +120,7 @@ function AuthPage() {
     googleEnabled: true,
     appleEnabled: false,
     facebookEnabled: false,
+    sessionLengthSeconds: 3600, //1 hour r/w session
   };
 
   const configOrder = ["socials", "email", "phone", "passkey"];

diff --git a/packages/sdk-react/package.json b/packages/sdk-react/package.json
@@ -59,11 +59,11 @@
     "@turnkey/sdk-browser": "workspace:*",
     "@turnkey/sdk-server": "workspace:*",
     "@turnkey/wallet-stamper": "workspace:*",
-    "@uidotdev/usehooks": "^2.4.1",
     "libphonenumber-js": "^1.11.14",
     "next": "^15.0.2",
     "react-apple-login": "^1.1.6",
-    "react-international-phone": "^4.3.0"
+    "react-international-phone": "^4.3.0",
+    "usehooks-ts": "^3.1.1"
   },
   "peerDependencies": {
     "@types/react": "^18.2.75",

diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx
@@ -172,10 +172,16 @@ const Auth: React.FC<AuthProps> = ({
     return suborgId;
   };
 
-  const handleAuthSuccess = async (credentialBundle: any) => {
+  const handleAuthSuccess = async (
+    credentialBundle: any,
+    expirationSeconds?: string,
+  ) => {
     if (credentialBundle) {
       await authIframeClient!.injectCredentialBundle(credentialBundle);
-      await authIframeClient!.loginWithAuthBundle(credentialBundle);
+      await authIframeClient!.loginWithAuthBundle(
+        credentialBundle,
+        expirationSeconds,
+      );
       await onAuthSuccess();
     }
   };
@@ -223,12 +229,18 @@ const Auth: React.FC<AuthProps> = ({
 
       const sessionResponse = await passkeyClient?.createReadWriteSession({
         targetPublicKey: authIframeClient?.iframePublicKey!,
+        ...(authConfig.sessionLengthSeconds !== undefined && {
+          expirationSeconds: authConfig.sessionLengthSeconds.toString(),
+        }),
         organizationId:
           turnkey?.config.defaultOrganizationId ??
           process.env.NEXT_PUBLIC_ORGANIZATION_ID!,
       });
       if (sessionResponse?.credentialBundle) {
-        await handleAuthSuccess(sessionResponse.credentialBundle);
+        await handleAuthSuccess(
+          sessionResponse.credentialBundle,
+          authConfig.sessionLengthSeconds?.toString(),
+        );
       } else {
         setPasskeySignupError(authErrors.passkey.loginFailed);
       }
@@ -241,13 +253,19 @@ const Auth: React.FC<AuthProps> = ({
     try {
       const sessionResponse = await passkeyClient?.createReadWriteSession({
         targetPublicKey: authIframeClient?.iframePublicKey!,
+        ...(authConfig.sessionLengthSeconds !== undefined && {
+          expirationSeconds: authConfig.sessionLengthSeconds.toString(),
+        }),
         organizationId:
           turnkey?.config.defaultOrganizationId ??
           process.env.NEXT_PUBLIC_ORGANIZATION_ID!,
       });
 
       if (sessionResponse?.credentialBundle) {
-        await handleAuthSuccess(sessionResponse.credentialBundle);
+        await handleAuthSuccess(
+          sessionResponse.credentialBundle,
+          authConfig.sessionLengthSeconds?.toString(),
+        );
       } else {
         authErrors.passkey.loginFailed;
       }
@@ -294,7 +312,10 @@ const Auth: React.FC<AuthProps> = ({
       sessionLengthSeconds: authConfig.sessionLengthSeconds,
     });
     if (oauthResponse && oauthResponse.token) {
-      await handleAuthSuccess(oauthResponse!.token);
+      await handleAuthSuccess(
+        oauthResponse!.token,
+        authConfig.sessionLengthSeconds?.toString(),
+      );
     } else {
       onError(authErrors.oauth.loginFailed);
     }

diff --git a/packages/sdk-react/src/components/auth/OtpVerification.tsx b/packages/sdk-react/src/components/auth/OtpVerification.tsx
@@ -18,7 +18,10 @@ interface OtpVerificationProps {
   otpId: string;
   authIframeClient: any;
   sessionLengthSeconds?: number | undefined;
-  onValidateSuccess: (credentialBundle: any) => Promise<void>;
+  onValidateSuccess: (
+    credentialBundle: any,
+    expirationSeconds?: string,
+  ) => Promise<void>;
   onResendCode: (
     type: FilterType.Email | FilterType.PhoneNumber,
     value: string,
@@ -53,7 +56,10 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({
       });
 
       if (authResponse?.token) {
-        await onValidateSuccess(authResponse.token);
+        await onValidateSuccess(
+          authResponse.token,
+          sessionLengthSeconds?.toString(),
+        );
       } else {
         setOtpError("Invalid code. Please try again.");
       }

diff --git a/packages/sdk-react/src/hooks/use-session.ts b/packages/sdk-react/src/hooks/use-session.ts
@@ -1,5 +1,7 @@
+"use client";
+
 import { StorageKeys, User } from "@turnkey/sdk-browser";
-import { useLocalStorage } from "@uidotdev/usehooks";
+import { useLocalStorage } from "usehooks-ts";
 
 interface UserSession {
   user?: Omit<User, "session"> | undefined;

diff --git a/packages/sdk-react/src/hooks/use-turnkey.ts b/packages/sdk-react/src/hooks/use-turnkey.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useContext } from "react";
 import { TurnkeyContext } from "../contexts/TurnkeyContext";
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml