How do I get a access token outside of useLogto() with @logto/react

[isaced]

I'm trying to add an auth header to my fetch function but I'm finding it difficult.

I could use useLogto() but this is awkward I want to do something like

import { getAccessToken } from "@logto/react";

fetch('whatever', { headers: { Authorization: await getAccessToken() } })

Or is there any way I can get the LogtoClient instance in React to call its getAccessToken() method in my network library?

See also:

• https://github.com/orgs/clerk/discussions/1751
• feat(clerk-expo): Introduce getClerkInstance to access/create a Clerk instance clerk/javascript#3420

[isaced]

I've found a rather tricky approach, customize the LogtoClientClass through the LogtoProvider to globally hold its instance object, I'm not sure if there are any other more elegant ways.

// Path: src/main.tsx
import { LogtoProvider, LogtoConfig } from "@logto/react";
import LogtoClient from "@logto/browser";

// Store the global LogtoClient instance
let globalLogtoClientInstance: LogtoClient | null = null;

// Custom LogtoClient class to store the instance
class CustomLogtoClient extends LogtoClient {
  constructor(config: LogtoConfig) {
    super(config);
    globalLogtoClientInstance = this;
  }
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
      <LogtoProvider config={config} LogtoClientClass={CustomLogtoClient}>
        <RouterProvider router={router} />
      </LogtoProvider>
  </React.StrictMode>
);

// Path: src/services/network.ts
class NetworkService {
  async fetchSomething() {
    // Get the access token from the global LogtoClient instance
    const accessToken = globalLogtoClientInstance?.getAccessToken();
    // ...
  }
}