Merge pull request #27 from magiclabs/implement-reveal-pk-express-api

feat: implement reveal pk in express api

Author: Ethella

README.md

@@ -7,7 +7,7 @@ Add the following environment variables to your `.env.local` file:
 ```env
 GOOGLE_CLIENT_ID=your-google-client-id
 GOOGLE_CLIENT_SECRET=your-google-client-secret
-OIDC_PROVIDER_ID=your-magic-provider-id
+NEXT_PUBLIC_OIDC_PROVIDER_ID=your-magic-provider-id
 MAGIC_API_KEY=your-magic-secret-key
 NEXTAUTH_SECRET=your-next-auth-secret
 ```

package.json

@@ -13,6 +13,7 @@
     "@magic-ext/hedera": "^2.0.0",
     "@magic-ext/oauth2": "^13.0.0",
     "@magic-ext/solana": "^28.0.0",
+    "@magic-sdk/api-wallets": "^0.1.0",
     "@metamask/eth-sig-util": "^8.2.0",
     "@next/third-parties": "^16.0.3",
     "@radix-ui/react-tabs": "^1.1.13",
@@ -22,7 +23,7 @@
     "clsx": "^2.1.1",
     "ethers": "^6.15.0",
     "magic-sdk": "^31.0.0",
-    "next": "15.5.7",
+    "next": "15.5.8",
     "next-auth": "^4.24.11",
     "prismjs": "^1.30.0",
     "react": "19.1.0",

pnpm-lock.yaml

@@ -7,6 +7,7 @@ import { UserInfo } from "@/components/api-wallet/UserInfo";
 import { useApiWallet } from "@/contexts/ApiWalletContext";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
+import UserMethods from "@/components/api-wallet/UserMethods";
 
 export default function ApiWalletPage() {
   const { selectedNetwork, isAuthenticated, isLoading } = useApiWallet();
@@ -33,14 +34,16 @@ export default function ApiWalletPage() {
           </div>
 
           {/* Right Side - Signing Methods */}
-          <div className="w-full lg:w-2/3">
+          <div className="w-full lg:w-2/3 flex flex-col gap-18">
             {/* Show Solana methods if Solana network is selected */}
             {selectedNetwork === "solana" ? (
               <SolanaSignMethods />
             ) : (
               /* Default to EVM methods for Ethereum and other EVM networks */
               <EVMSignMethods />
             )}
+
+            <UserMethods />
           </div>
         </div>
       </div>

src/app/(demo)/api-wallet/wallet/page.tsx

@@ -0,0 +1,62 @@
+import { useApiWallet } from "@/contexts/ApiWalletContext";
+import MagicApiWalletSDK, { WalletType } from "@magic-sdk/api-wallets";
+import { MethodsCard } from "../MethodsCard";
+
+export default function UserMethods() {
+  const { selectedNetwork, session } = useApiWallet();
+  const oidcProviderId = process.env.NEXT_PUBLIC_OIDC_PROVIDER_ID ?? "";
+
+  const tabs = [
+    {
+      value: "reveal-private-key",
+      label: "Reveal Private Key",
+      functionName:
+        "magic.wallet.exportPrivateKey({ walletType, bearerToken })",
+      payload: null,
+      handler: () =>
+        revealPrivateKey(
+          networkToWalletType(selectedNetwork ?? "ETH"),
+          session?.idToken,
+          oidcProviderId
+        ),
+    },
+  ];
+
+  return (
+    <MethodsCard
+      title="User Methods"
+      description="Test various user methods with Magic SDK"
+      defaultTab={tabs[0].value}
+      tabs={tabs}
+    />
+  );
+}
+
+async function revealPrivateKey(
+  walletType: WalletType,
+  bearerToken?: string,
+  oidcProviderId?: string
+) {
+  if (!bearerToken || !oidcProviderId) return;
+  const magic = new MagicApiWalletSDK(process.env.NEXT_PUBLIC_MAGIC_API_WALLET_KEY);
+
+  await magic.wallet.exportPrivateKey({
+    walletType,
+    bearerToken,
+    oidcProviderId,
+  });
+}
+
+const NETWORK_TO_TYPE: Record<string, WalletType> = {
+  ethereum: "ETH",
+  eth: "ETH",
+  bitcoin: "BITCOIN",
+  btc: "BITCOIN",
+  solana: "SOLANA",
+  sol: "SOLANA",
+};
+
+export function networkToWalletType(network?: string): WalletType {
+  if (!network) return "ETH";
+  return NETWORK_TO_TYPE[network.toLowerCase()];
+}

src/components/api-wallet/UserMethods.tsx

@@ -1,4 +1,7 @@
-import { TeeEndpoint as ExpressEndpoint, TeeProxyEndpoint } from "../../types/tee-types";
+import {
+  TeeEndpoint as ExpressEndpoint,
+  TeeProxyEndpoint,
+} from "../../types/tee-types";
 
 export const TEE_BASE = "https://tee.express.magiclabs.com";
 
@@ -10,18 +13,21 @@ export const TEE_BASE = "https://tee.express.magiclabs.com";
  * @returns Parsed JSON data from the response
  * @throws Error if response is not ok or contains error information
  */
-export async function express<T = any>(path: ExpressEndpoint, jwt: string, init?: RequestInit): Promise<T> {
-  const obj = JSON.parse(init?.body as string) as { chain: string }
+export async function express<T = any>(
+  path: ExpressEndpoint,
+  jwt: string,
+  init?: RequestInit
+): Promise<T> {
+  const obj = JSON.parse(init?.body as string) as { chain: string };
   const response = await fetch(TEE_BASE + path, {
     ...init,
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${jwt}`,
       "X-Magic-Secret-Key": process.env.MAGIC_API_KEY ?? "",
-      "X-OIDC-Provider-ID": process.env.OIDC_PROVIDER_ID ?? "",
+      "X-OIDC-Provider-ID": process.env.NEXT_PUBLIC_OIDC_PROVIDER_ID ?? "",
       "X-Magic-Chain": obj.chain,
-      "X-Magic-Referrer":
-        "https://demo.magic.link",
+      "X-Magic-Referrer": "https://demo.magic.link",
       ...(init?.headers || {}),
     },
     cache: "no-store",
@@ -30,7 +36,7 @@ export async function express<T = any>(path: ExpressEndpoint, jwt: string, init?
   // Handle response validation and JSON parsing
   if (!response.ok) {
     const data = await response.json().catch(() => ({}));
-    
+
     // For other errors, throw a generic error
     throw new Error(data.error || `HTTP error! status: ${response.status}`);
   }

src/lib/api-wallet/express.ts

@@ -22,7 +22,7 @@ export class MagicService {
 
   public static get magic(): any {
     if (!this._magic) {
-      this._magic = new Magic('pk_live_493172A4D3AFF148', {
+      this._magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_EMBEDDED_WALLET_KEY ?? "", {
         extensions: [
           new OAuthExtension(),
           new SolanaExtension({