diff --git a/api/public_api.swagger.json b/api/public_api.swagger.json
index bb1d5b88..6d9d9126 100644
--- a/api/public_api.swagger.json
+++ b/api/public_api.swagger.json
@@ -218,7 +218,7 @@
}
}
],
- "tags": ["Users"]
+ "tags": ["User Auth"]
}
},
"/public/v1/query/get_organization_configs": {
@@ -533,6 +533,32 @@
"tags": ["Users"]
}
},
+ "/public/v1/query/list_verified_suborgs": {
+ "post": {
+ "summary": "Get Verified Suborgs",
+ "description": "Get all email or phone verified suborg IDs associated given a parent org ID.",
+ "operationId": "GetVerifiedSubOrgIds",
+ "responses": {
+ "200": {
+ "description": "A successful response.",
+ "schema": {
+ "$ref": "#/definitions/GetVerifiedSubOrgIdsResponse"
+ }
+ }
+ },
+ "parameters": [
+ {
+ "name": "body",
+ "in": "body",
+ "required": true,
+ "schema": {
+ "$ref": "#/definitions/GetVerifiedSubOrgIdsRequest"
+ }
+ }
+ ],
+ "tags": ["Organizations"]
+ }
+ },
"/public/v1/query/list_wallet_accounts": {
"post": {
"summary": "List Wallets Accounts",
@@ -738,7 +764,7 @@
}
}
],
- "tags": ["Users"]
+ "tags": ["User Auth"]
}
},
"/public/v1/submit/create_policies": {
@@ -1128,7 +1154,7 @@
}
}
],
- "tags": ["Users"]
+ "tags": ["User Auth"]
}
},
"/public/v1/submit/delete_policy": {
@@ -1544,7 +1570,7 @@
}
}
],
- "tags": ["Users"]
+ "tags": ["User Auth"]
}
},
"/public/v1/submit/init_user_email_recovery": {
@@ -1596,7 +1622,7 @@
}
}
],
- "tags": ["Users"]
+ "tags": ["User Auth"]
}
},
"/public/v1/submit/otp_auth": {
@@ -1622,7 +1648,7 @@
}
}
],
- "tags": ["Users"]
+ "tags": ["User Auth"]
}
},
"/public/v1/submit/recover_user": {
@@ -2225,7 +2251,8 @@
"ADDRESS_FORMAT_DOGE_MAINNET",
"ADDRESS_FORMAT_DOGE_TESTNET",
"ADDRESS_FORMAT_TON_V3R2",
- "ADDRESS_FORMAT_TON_V4R2"
+ "ADDRESS_FORMAT_TON_V4R2",
+ "ADDRESS_FORMAT_XRP"
]
},
"Any": {
@@ -5171,7 +5198,7 @@
},
"filterType": {
"type": "string",
- "description": "Specifies the type of filter to apply, i.e 'CREDENTIAL_ID', 'NAME', 'USERNAME', 'EMAIL', 'OIDC_TOKEN' or 'PUBLIC_KEY'"
+ "description": "Specifies the type of filter to apply, i.e 'CREDENTIAL_ID', 'NAME', 'USERNAME', 'EMAIL', 'PHONE_NUMBER', 'OIDC_TOKEN' or 'PUBLIC_KEY'"
},
"filterValue": {
"type": "string",
@@ -5245,6 +5272,41 @@
},
"required": ["users"]
},
+ "GetVerifiedSubOrgIdsRequest": {
+ "type": "object",
+ "properties": {
+ "organizationId": {
+ "type": "string",
+ "description": "Unique identifier for the parent Organization. This is used to find sub-organizations within it."
+ },
+ "filterType": {
+ "type": "string",
+ "description": "Specifies the type of filter to apply, i.e 'EMAIL', 'PHONE_NUMBER'"
+ },
+ "filterValue": {
+ "type": "string",
+ "description": "The value of the filter to apply for the specified type. For example, a specific email or phone number string."
+ },
+ "paginationOptions": {
+ "$ref": "#/definitions/Pagination",
+ "description": "Parameters used for cursor-based pagination."
+ }
+ },
+ "required": ["organizationId"]
+ },
+ "GetVerifiedSubOrgIdsResponse": {
+ "type": "object",
+ "properties": {
+ "organizationIds": {
+ "type": "array",
+ "items": {
+ "type": "string"
+ },
+ "description": "List of unique identifiers for the matching sub-organizations."
+ }
+ },
+ "required": ["organizationIds"]
+ },
"GetWalletAccountsRequest": {
"type": "object",
"properties": {
@@ -5600,6 +5662,14 @@
"emailCustomization": {
"$ref": "#/definitions/EmailCustomizationParams",
"description": "Optional parameters for customizing emails. If not provided, the default email will be used."
+ },
+ "smsCustomization": {
+ "$ref": "#/definitions/SmsCustomizationParams",
+ "description": "Optional parameters for customizing SMS message. If not provided, the default sms message will be used."
+ },
+ "userIdentifier": {
+ "type": "string",
+ "description": "Optional client-generated user identifier to enable per-user rate limiting for SMS auth. We recommend using a hash of the client-side IP address."
}
},
"required": ["otpType", "contact"]
@@ -7278,6 +7348,15 @@
}
}
},
+ "SmsCustomizationParams": {
+ "type": "object",
+ "properties": {
+ "template": {
+ "type": "string",
+ "description": "Template containing references to .OtpCode i.e Your OTP is {{.OtpCode}}"
+ }
+ }
+ },
"Status": {
"type": "object",
"properties": {
@@ -7848,6 +7927,10 @@
"WalletAccount": {
"type": "object",
"properties": {
+ "walletAccountId": {
+ "type": "string",
+ "description": "Unique identifier for a given Wallet Account."
+ },
"organizationId": {
"type": "string",
"description": "The Organization the Account belongs to."
@@ -7884,6 +7967,7 @@
}
},
"required": [
+ "walletAccountId",
"organizationId",
"walletId",
"curve",
diff --git a/docs/solutions/embedded-wallets/code-examples/_category_.json b/docs/solutions/embedded-wallets/code-examples/_category_.json
index 9aff7032..b416d083 100644
--- a/docs/solutions/embedded-wallets/code-examples/_category_.json
+++ b/docs/solutions/embedded-wallets/code-examples/_category_.json
@@ -1,6 +1,6 @@
{
"label": "Code Examples",
- "position": 6,
+ "position": 7,
"link": {
"type": "generated-index",
"description": "Code Examples"
diff --git a/docs/solutions/embedded-wallets/react-components.md b/docs/solutions/embedded-wallets/react-components.md
new file mode 100644
index 00000000..d957e75c
--- /dev/null
+++ b/docs/solutions/embedded-wallets/react-components.md
@@ -0,0 +1,174 @@
+---
+sidebar_position: 6
+description: Use Turnkey components to create embedded wallets
+slug: /reference/react-components
+---
+
+# React Components
+
+Turnkey offers react components to create embedded wallets without having to setup a backend by using NextJs server actions and associated directives. Each component uses the **authIframeClient** from [@turnkey/sdk-react](https://www.npmjs.com/package/@turnkey/sdk-react). An example is hosted TODO, and reference to the code can be found [here](https://github.com/tkhq/sdk/tree/main/examples/react-components)
+
+## How to Use Turnkey React Components
+
+To use the Turnkey React components effectively, your project is required to:
+
+1. Use **Next.js 13+** with the **App Directory structure** to leverage server actions.
+2. Import Turnkey's default styles in your `layout.tsx` or equivalent entry point:
+
+ ```tsx
+ import "@turnkey/sdk-react/styles";
+ ```
+
+3. **Set up environment variables** in your `.env` file to configure API connections and optional OAuth providers.
+
+**Environment Variables**:
+
+| Variable | Description |
+|-----------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|
+| `TURNKEY_API_PUBLIC_KEY` | Your Turnkey API public key *(required)*. |
+| `TURNKEY_API_PRIVATE_KEY` | Your Turnkey API private key *(required)*. |
+| `NEXT_PUBLIC_BASE_URL` | Base URL for Turnkey API *(default: `https://api.turnkey.com`)*. |
+| `NEXT_PUBLIC_ORGANIZATION_ID` | Your Turnkey organization ID *(required)*. |
+| `NEXT_PUBLIC_AUTH_IFRAME_URL` | URL for the Turnkey authentication iframe *(default: `https://auth.turnkey.com`)*. |
+| `NEXT_PUBLIC_EXPORT_IFRAME_URL` | URL for the Turnkey wallet export iframe *(default: `https://export.turnkey.com`)*. |
+| `NEXT_PUBLIC_IMPORT_IFRAME_URL` | URL for the Turnkey wallet import iframe *(default: `https://import.turnkey.com`)*. |
+| `NEXT_PUBLIC_GOOGLE_CLIENT_ID` | Google OAuth Client ID *(required only if enabling Google login in `authConfig`)*. |
+| `NEXT_PUBLIC_APPLE_CLIENT_ID` | Apple OAuth Client ID *(required only if enabling Apple login in `authConfig`)*. |
+| `NEXT_PUBLIC_FACEBOOK_CLIENT_ID` | Facebook OAuth Client ID *(required only if enabling Facebook login in `authConfig`)*. |
+| `NEXT_PUBLIC_OAUTH_REDIRECT_URI` | OAuth Redirect URI *(required only if enabling Google, Apple, or Facebook login, e.g., `https://your-app.ngrok-free.app/`)*. |
+
+---
+
+## **1. Authentication with the `Auth` Component**
+
+The `Auth` component provides authentication functionality, including email, passkey, phone, and social logins.
+
+**Usage Example**:
+
+```tsx
+import { Auth } from "@turnkey/sdk-react";
+import { toast } from "sonner";
+
+function AuthPage() {
+ const handleAuthSuccess = async () => {
+ console.log("Auth successful!"); // You can now use your authIframeClient to make requests!
+ };
+
+ const handleAuthError = (errorMessage: string) => {
+ toast.error(errorMessage);
+ };
+
+ const authConfig = {
+ emailEnabled: true,
+ passkeyEnabled: true,
+ phoneEnabled: true,
+ googleEnabled: true,
+ appleEnabled: false,
+ facebookEnabled: false,
+ };
+
+ const configOrder = ["socials", "email", "phone", "passkey"];
+
+ return (
+
+ );
+}
+
+export default AuthPage;
+```
+
+---
+
+## **2. Importing and Exporting Wallets**
+
+The `Import` and `Export` components allow users to import or export wallets securely.
+
+**Import Wallet Example**:
+
+```tsx
+import { Import } from "@turnkey/sdk-react";
+import { toast } from "sonner";
+
+function ImportWallet() {
+ const handleImportSuccess = async () => {
+ toast.success("Wallet successfully imported!");
+ };
+
+ const handleImportError = (errorMessage: string) => {
+ toast.error(errorMessage);
+ };
+
+ return (
+
+ );
+}
+
+export default ImportWallet;
+```
+
+**Export Wallet Example**:
+
+```tsx
+import { Export } from "@turnkey/sdk-react";
+import { toast } from "sonner";
+
+function ExportWallet() {
+ const walletId = "your-wallet-id";
+
+ const handleExportSuccess = async () => {
+ toast.success("Wallet successfully exported!");
+ };
+
+ const handleExportError = (errorMessage: string) => {
+ toast.error(errorMessage);
+ };
+
+ return (
+
+ );
+}
+
+export default ExportWallet;
+```
+
+---
+
+## **3. Optional: Customizing Themes with `TurnkeyThemeProvider`**
+
+The `TurnkeyThemeProvider` allows you to apply custom styles using CSS variables. This is optional and can be used to customize Turnkey components to match your application's design.
+
+**Usage Example**:
+
+```tsx
+import { TurnkeyThemeProvider } from "@turnkey/sdk-react";
+
+const customTheme = {
+ "--text-primary": "#333333",
+ "--button-bg": "#4c48ff",
+ "--button-hover-bg": "#3b38e6",
+};
+
+export default function App() {
+ return (
+
+
+
+ );
+}
+```
+
+You can customize any CSS variable used by Turnkey components. For the full list of available variables, refer to the [this .css file](https://github.com/tkhq/sdk/blob/main/packages/sdk-react/src/components/theme.css)
+
diff --git a/yarn.lock b/yarn.lock
index 2dba1198..e89fbdfc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6327,16 +6327,11 @@ prism-react-renderer@^1.3.5:
resolved "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz"
integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==
-prismjs@^1.27.0, prismjs@^1.28.0:
+prismjs@^1.27.0, prismjs@^1.28.0, prismjs@^1.29.0:
version "1.29.0"
resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz"
integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
-prismjs@^1.29.0:
- version "1.29.0"
- resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
- integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
-
process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"