From f706c6602b3731fd023ff78c892e37cd4af801b5 Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Wed, 18 Dec 2024 12:25:32 -0500 Subject: [PATCH 1/3] init commit for readme sdk react --- packages/sdk-react/README.md | 222 +++++++++++++++++++++++++++++++++++ 1 file changed, 222 insertions(+) diff --git a/packages/sdk-react/README.md b/packages/sdk-react/README.md index 46bfdbf69..ae282e438 100644 --- a/packages/sdk-react/README.md +++ b/packages/sdk-react/README.md @@ -1 +1,223 @@ # @turnkey/sdk-react + +The `@turnkey/sdk-react` package simplifies the integration of the Turnkey API into React-based applications. It builds on top of the `@turnkey/sdk-browser` package, enabling developers to implement authentication and wallet functionalities using React components. + +## Overview + +- **Authentication**: Supports email, passkey, phone, and social logins. +- **Wallet Operations**: Import and export wallets securely. +- **Client Utilities**: Includes `passkeyClient`, `authIframeClient`, and more. +- **Components**: Abstracts auth, session, import and export logic away from the developer and allows for simple easy to use imports +- **Customization**: Components theming options to align with your application's design. + +Use `@turnkey/sdk-react` when building Next/React applications that interact with the Turnkey API. + +## Installation + +Install the package using npm or Yarn: + +```bash +npm install @turnkey/sdk-react +``` + +## Initialization + +Set up the `TurnkeyProvider` in your application entry point (e.g., `App.tsx`): + +```tsx +import { TurnkeyProvider } from "@turnkey/sdk-react"; + +const turnkeyConfig = { + apiBaseUrl: "https://api.turnkey.com", + defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID, + rpId: process.env.RPID, // Your application's domain for WebAuthn flows + iframeUrl: "https://auth.turnkey.com", + serverSignUrl: "http://localhost:3000/api", // Backend endpoint for signing operations +}; + +function App() { + return ( + + {/* Rest of the app */} + + ); +} + +export default App; +``` + +## Using the React SDK + +In components nested under the `TurnkeyProvider`, you can access Turnkey utilities using the `useTurnkey` hook: + +```tsx +import { useTurnkey } from "@turnkey/sdk-react"; + +function ExampleComponent() { + const { turnkey, passkeyClient, authIframeClient } = useTurnkey(); + + const loginWithPasskey = async () => { + // Creates a read only session with passkey + await passkeyClient?.login(); + }; + + const initEmailAuth = async () => { + await turnkey?.serverSign("emailAuth", [ + { + email: "", + targetPublicKey: authIframeClient.iframePublicKey, + organizationId: "", + }, + ]); + }; + + const loginWithIframe = async (credentialBundle: string) => { + await authIframeClient?.loginWithAuthBundle(credentialBundle); // Creates a read write session using a credential bundle returned from OTP Auth, Oauth, or Create Read Write session activities + }; + + return ( +
+ + +
+ ); +} + +export default ExampleComponent; +``` + +## Components + +All components require **Next.js 13+** with the [/app directory structure](https://nextjs.org/docs/app) to leverage server actions. Before using components be sure to Import Turnkey's default styles in your `layout.tsx` or equivalent entry point: + +```tsx +import "@turnkey/sdk-react/styles"; +``` + +### Authentication + +The `Auth` component provides a complete authentication solution with support for various login methods. + +#### Example + +```tsx +import { Auth } from "@turnkey/sdk-react"; +import { toast } from "sonner"; + +function AuthPage() { + const handleAuthSuccess = () => { + console.log("Auth successful!"); + }; + + const handleAuthError = (errorMessage: string) => { + toast.error(errorMessage); + }; + + const authConfig = { + emailEnabled: true, + passkeyEnabled: true, + phoneEnabled: false, + googleEnabled: true, + appleEnabled: false, + facebookEnabled: false, + }; + + const configOrder = ["socials", "email", "phone", "passkey"]; + + return ( + + ); +} + +export default AuthPage; +``` + +### Wallet Import and Export + +#### Import Wallet Example + +```tsx +import { Import } from "@turnkey/sdk-react"; +import { toast } from "sonner"; + +function ImportWallet() { + const handleImportSuccess = () => { + 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 = () => { + toast.success("Wallet successfully exported!"); + }; + + const handleExportError = (errorMessage: string) => { + toast.error(errorMessage); + }; + + return ( + + ); +} + +export default ExportWallet; +``` + +## Theming with `TurnkeyThemeProvider` + +Customize Turnkey components using CSS variables with the `TurnkeyThemeProvider`. + +#### 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 ( + + + + ); +} +``` + +## Code Examples + +For detailed examples and advanced use cases, refer to the our documentation [here](https://docs.turnkey.com/) From 0da96aaa4bed7d014c08cc9ec949c73c4f38a3c8 Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Wed, 18 Dec 2024 12:26:03 -0500 Subject: [PATCH 2/3] add changeset --- .changeset/three-clocks-switch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/three-clocks-switch.md diff --git a/.changeset/three-clocks-switch.md b/.changeset/three-clocks-switch.md new file mode 100644 index 000000000..8ac0180ec --- /dev/null +++ b/.changeset/three-clocks-switch.md @@ -0,0 +1,5 @@ +--- +"@turnkey/sdk-react": patch +--- + +Add README to react sdk From 7cf14f8655ac879cf3e9af74cbca57dd04238668 Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Wed, 18 Dec 2024 17:33:44 -0500 Subject: [PATCH 3/3] requested changes --- packages/sdk-react/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/sdk-react/README.md b/packages/sdk-react/README.md index ae282e438..cc1daf37e 100644 --- a/packages/sdk-react/README.md +++ b/packages/sdk-react/README.md @@ -7,8 +7,8 @@ The `@turnkey/sdk-react` package simplifies the integration of the Turnkey API i - **Authentication**: Supports email, passkey, phone, and social logins. - **Wallet Operations**: Import and export wallets securely. - **Client Utilities**: Includes `passkeyClient`, `authIframeClient`, and more. -- **Components**: Abstracts auth, session, import and export logic away from the developer and allows for simple easy to use imports -- **Customization**: Components theming options to align with your application's design. +- **Components**: Abstracts auth, session, import and export logic away from the developer and provides simple, easy to use plug-and-play components +- **Customization**: Theming options for your components to align with your application's design Use `@turnkey/sdk-react` when building Next/React applications that interact with the Turnkey API. @@ -32,7 +32,7 @@ const turnkeyConfig = { defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID, rpId: process.env.RPID, // Your application's domain for WebAuthn flows iframeUrl: "https://auth.turnkey.com", - serverSignUrl: "http://localhost:3000/api", // Backend endpoint for signing operations + serverSignUrl: "http://localhost:3000/api", // Backend endpoint for signing operations (optional) }; function App() { @@ -220,4 +220,4 @@ export default function App() { ## Code Examples -For detailed examples and advanced use cases, refer to the our documentation [here](https://docs.turnkey.com/) +For detailed examples and advanced use cases, refer to our documentation [here](https://docs.turnkey.com/)