add support for custom auth server (#145)

* add support for login with custom auth endpoint

* error if using custom auth in react package

* add changesets

* refactor wanderers user fetching

Author: alecananian

.changeset/empty-planets-float.md

@@ -0,0 +1,5 @@
+---
+"@treasure-dev/tdk-react": patch
+---
+
+Updated to handle attempts to log in with custom auth endpoint

.changeset/orange-turkeys-walk.md

@@ -0,0 +1,5 @@
+---
+"@treasure-dev/tdk-core": patch
+---
+
+Added support for login with custom auth endpoint

apps/api/src/routes/auth.ts

@@ -9,25 +9,36 @@ import "../middleware/chain";
 import "../middleware/swagger";
 import type {
   LoginBody,
+  LoginCustomBody,
+  LoginCustomReply,
   LoginReply,
   ReadLoginPayloadQuerystring,
   ReadLoginPayloadReply,
 } from "../schema";
 import {
   type ErrorReply,
   loginBodySchema,
+  loginCustomBodySchema,
+  loginCustomReplySchema,
   loginReplySchema,
   readLoginPayloadQuerystringSchema,
   readLoginPayloadReplySchema,
 } from "../schema";
 import type { TdkApiContext } from "../types";
 import { USER_PROFILE_SELECT_FIELDS, USER_SELECT_FIELDS } from "../utils/db";
+import { throwUnauthorizedError } from "../utils/error";
 import { log } from "../utils/log";
 import {
   getThirdwebUser,
   parseThirdwebUserEmail,
   transformUserProfileResponseFields,
 } from "../utils/user";
+import { validateWanderersUser } from "../utils/wanderers";
+
+type LoginCustomPayload = {
+  wanderersCookie?: string;
+  wanderersToken?: string;
+};
 
 export const authRoutes =
   ({
@@ -193,4 +204,37 @@ export const authRoutes =
         });
       },
     );
+
+    app.post<{ Body: LoginCustomBody; Reply: LoginCustomReply | ErrorReply }>(
+      "/login/custom",
+      {
+        schema: {
+          summary: "Log in with custom auth",
+          description: "Log in with a custom auth payload",
+          body: loginCustomBodySchema,
+          response: {
+            200: loginCustomReplySchema,
+          },
+        },
+      },
+      async (req, reply) => {
+        let payload: LoginCustomPayload | undefined;
+
+        try {
+          payload = JSON.parse(req.body.payload);
+        } catch (err) {
+          log.error("Error parsing custom login payload:", err);
+        }
+
+        if (payload?.wanderersCookie || payload?.wanderersToken) {
+          const user = await validateWanderersUser(
+            payload.wanderersCookie,
+            payload.wanderersToken,
+          );
+          return reply.send(user);
+        }
+
+        throwUnauthorizedError("Invalid request");
+      },
+    );
   };

apps/api/src/schema/auth.ts

@@ -49,9 +49,21 @@ export const loginReplySchema = Type.Object({
   ]),
 });
 
+export const loginCustomBodySchema = Type.Object({
+  payload: Type.String(),
+});
+
+export const loginCustomReplySchema = Type.Object({
+  userId: Type.String(),
+  email: Type.String(),
+  exp: Type.Number(),
+});
+
 export type ReadLoginPayloadQuerystring = Static<
   typeof readLoginPayloadQuerystringSchema
 >;
 export type ReadLoginPayloadReply = Static<typeof readLoginPayloadReplySchema>;
 export type LoginBody = Static<typeof loginBodySchema>;
 export type LoginReply = Static<typeof loginReplySchema>;
+export type LoginCustomBody = Static<typeof loginCustomBodySchema>;
+export type LoginCustomReply = Static<typeof loginCustomReplySchema>;

apps/api/src/utils/wanderers.ts

@@ -0,0 +1,35 @@
+import type { LoginCustomReply } from "../schema";
+
+const WANDERERS_API_URL = "https://id.wanderers.ai/sessions/whoami";
+
+type WanderersSession = {
+  active: boolean;
+  expires_at: string;
+  identity: {
+    id: string;
+    traits: {
+      email: string;
+    };
+  };
+};
+
+export const validateWanderersUser = async (
+  cookie?: string,
+  token?: string,
+): Promise<LoginCustomReply | undefined> => {
+  const response = await fetch(WANDERERS_API_URL, {
+    headers: cookie ? { Cookie: cookie } : { "X-Session-Token": token ?? "" },
+  });
+
+  const session: WanderersSession = await response.json();
+  const expiresAt = new Date(session.expires_at).getTime();
+  if (!session.active || expiresAt < Date.now()) {
+    return undefined;
+  }
+
+  return {
+    userId: session.identity.id,
+    email: session.identity.traits.email,
+    exp: Math.floor(expiresAt / 1000),
+  };
+};

examples/connect-core/src/main.ts

@@ -57,6 +57,27 @@ document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
           </button>
         </div>
       </div>
+      <p>
+        or
+      </p>
+      <div id="custom-auth-container">
+        <h2>Connect with Custom Auth</h2>
+        <div>
+          <input
+            id="custom-auth-key"
+            type="text"
+            placeholder="Auth key name"
+          />
+          <input
+            id="custom-auth-value"
+            type="text"
+            placeholder="Auth value"
+          />
+          <button type="button">
+            Connect
+          </button>
+        </div>
+      </div>
     </div>
     <div id="user-container">
       <h2>Logged in as <span id="user-email" /></h2>
@@ -86,6 +107,13 @@ document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
   const emailButton = emailContainer.querySelector<HTMLButtonElement>("button");
   const codeInput = codeContainer.querySelector<HTMLInputElement>("input")!;
   const codeButton = codeContainer.querySelector<HTMLButtonElement>("button");
+  const customAuthKeyInput =
+    document.querySelector<HTMLInputElement>("#custom-auth-key")!;
+  const customAuthValueInput =
+    document.querySelector<HTMLInputElement>("#custom-auth-value")!;
+  const customAuthButton = document.querySelector<HTMLButtonElement>(
+    "#custom-auth-container button",
+  );
   const mintButton = userContainer.querySelector<HTMLButtonElement>("#mint");
   const logOutButton =
     userContainer.querySelector<HTMLButtonElement>("#log-out");
@@ -169,6 +197,34 @@ document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
     codeButton.disabled = false;
   });
 
+  // Set up Connect with Custom Auth flow
+  customAuthButton?.addEventListener("click", async () => {
+    customAuthButton.disabled = true;
+    try {
+      const result = await logIn({
+        client,
+        ecosystemId: import.meta.env.VITE_TDK_ECOSYSTEM_ID,
+        ecosystemPartnerId: import.meta.env.VITE_TDK_ECOSYSTEM_PARTNER_ID,
+        method: "auth_endpoint",
+        payload: JSON.stringify({
+          [customAuthKeyInput.value]: customAuthValueInput.value,
+        }),
+        apiUri,
+        chainId,
+        sessionOptions,
+      });
+      tdk = result.tdk;
+      user = result.user;
+      userEmail.innerHTML = user.email || user.id;
+      connectContainer.hidden = true;
+      userContainer.hidden = false;
+    } catch (err) {
+      console.error("Error logging in with email:", err);
+    }
+
+    customAuthButton.disabled = false;
+  });
+
   // Set up Mint button
   mintButton?.addEventListener("click", async () => {
     mintButton.disabled = true;

package.json

@@ -15,6 +15,7 @@
     "dev:launcher": "pnpm --filter ./packages/launcher dev",
     "dev:api": "pnpm --filter ./apps/api dev",
     "dev:react": "pnpm --filter ./packages/react dev",
+    "dev:connect-core": "pnpm --filter ./examples/connect-core dev",
     "dev:connect-electron": "pnpm --filter ./examples/connect-electron dev",
     "dev:connect-react": "pnpm --filter ./examples/connect-react dev",
     "start:api": "pnpm --filter ./apps/api start",

packages/core/src/connect/login.ts

@@ -47,7 +47,8 @@ export type ConnectMethod =
   | (typeof SUPPORTED_SOCIAL_OPTIONS)[number]
   | "email"
   | "passkey"
-  | "wallet";
+  | "wallet"
+  | "auth_endpoint";
 
 type ConnectWalletConfig = {
   client: TreasureConnectClient;
@@ -70,6 +71,10 @@ type ConnectWalletConfig = {
       passkeyName?: string;
       hasStoredPasskey?: boolean;
     }
+  | {
+      method: "auth_endpoint";
+      payload: string;
+    }
 );
 
 export const isSocialConnectMethod = (method: ConnectMethod) =>
@@ -115,6 +120,15 @@ export const connectEcosystemWallet = async (params: ConnectWalletConfig) => {
       type: hasPasskey ? "sign-in" : "sign-up",
       passkeyName: params.passkeyName,
     });
+  } else if (params.method === "auth_endpoint") {
+    // Connect with auth endpoint
+    await wallet.connect({
+      client,
+      chain,
+      strategy: "auth_endpoint",
+      payload: params.payload,
+      encryptionKey: "any", // Unused with enclave ecosystem wallets
+    });
   } else {
     // Connect with social
     await wallet.connect({
@@ -214,7 +228,11 @@ export const logIn = async (params: ConnectWalletConfig & ConnectConfig) => {
     ...connectWalletParams
   } = params;
 
-  const wallet = await connectWallet({ client, ...connectWalletParams });
+  const wallet = await connectWallet({
+    client,
+    chainId,
+    ...connectWalletParams,
+  });
 
   const tdk = new TDKAPI({
     baseUri: apiUri,

packages/react/src/components/connect/ConnectModal.tsx

@@ -214,6 +214,10 @@ export const ConnectModal = ({
         setError(err);
         onConnectError?.(method, err);
       }
+    } else if (method === "auth_endpoint") {
+      throw new Error(
+        "Auth endpoint not supported in Treasure Connect modal. Use TDK Core package to connect.",
+      );
     } else {
       // Handle connecting with social / passkey
       try {