feat(account-elements): add initial account api (#6684)

packages/account-elements/src/api/index.ts

@@ -0,0 +1,39 @@
+import { type UserProfileResponse } from '@logto/schemas';
+import ky, { type KyInstance } from 'ky';
+
+export type AccessTokenFetcher = () => Promise<string>;
+
+/**
+ * The API client for the Logto account elements
+ *
+ * Used internally to interact with Account-related backend APIs, including the Profile API.
+ */
+export class LogtoAccountApi {
+  private readonly ky: KyInstance;
+
+  constructor(
+    /**
+     * The endpoint of the Logto instance.
+     */
+    logtoEndpoint: string,
+    /**
+     * The function to fetch the account access token.
+     */
+    accessTokenFetcher: AccessTokenFetcher
+  ) {
+    this.ky = ky.create({
+      prefixUrl: logtoEndpoint,
+      hooks: {
+        beforeRequest: [
+          async (request) => {
+            request.headers.set('Authorization', `Bearer ${await accessTokenFetcher()}`);
+          },
+        ],
+      },
+    });
+  }
+
+  async fetchUserProfile() {
+    return this.ky.get('api/profile').json<UserProfileResponse>();
+  }
+}

packages/account-elements/src/index.ts

@@ -1 +1,3 @@
+export type { AccessTokenFetcher } from './api/index.js';
+
 export * from './providers/logto-account-provider.js';

packages/account-elements/src/react.ts

@@ -2,6 +2,8 @@ import { createComponent } from '@lit/react';
 
 import { LogtoAccountProvider } from './index.js';
 
+export type { AccessTokenFetcher } from './api/index.js';
+
 export const createReactComponents = (react: Parameters<typeof createComponent>[0]['react']) => {
   return {
     LogtoAccountProvider: createComponent({