Getting user auth token in Chrome extension background / content script

[jellohouse]

Hello,

I have successfully setup a chrome extension with @clerk/chrome-extension the user can login to the popup.
In the popup i can get the auth token using getToken().

But I need to make authenticated requests from the background/content script.

I tried saving to localstorage the auth token every time the user opens the popup.
But after 1 minute, the token expires and making requests with it from BG/content will then fail
Only if the user opens the popup then I get a new valid token for 1 minute....

How can i consistently get new/refreshed auth tokens from the BG/content scripts?

If i save the session ID in localstorage, is there some way to start a new Clerk instance with the session id in the BG/content script and get new tokens for the user?
I tried this and then doing setActive({session: session_id}); but it does not work - no session is actually set... I think because this session ID does not exist in the new Clerk instance in BG/Content script.

At the core, the issue is that the content script, background script, and popup all live in their own an isolated world.
Ideally Clerk should only be started once from the background script since both the popup and content scripts can communicate with it at all times.
The background and content script can only communicate with the popup if it is open :/

Been trying different things for a while but with no luck so far.
Any suggestions would be greatly appreciated.

[kaminskypavel]

Hi, you're not gonna like what I'm about to say..

at first I've tried to use @clerk/clerk-js as stated here https://clerk.com/docs/quickstarts/javascript,
unfortunatly this solution will NOT work , since the clerk.load is using "window" instead of "self", and since window object is not available in the background-script you'll get an exception.

my current solution is storing the token in chrome.storage.local when initializing the app , like so

function TRPCProivder({children}: {children: React.ReactNode}) {

    const {getToken} = useAuth();
    const [token, setToken] = useState<string | null>();

    useEffect(() => {
        getToken().then(async (token) => {
            setToken(token);

            //! this is a workaround so standalone-trpc will be able to get the token, else auth will fail. 
            await chrome.storage.sync.set({authToken: token});
        });
    }, [getToken]);

...
...

and attach the the token in your background script.

export const trpcSAClient = createTRPCProxyClient<AppRouter>({
    transformer: superjson,
    links: [
        httpBatchLink({
            url: `${baseUrl}/trpc`,

            // You can pass any HTTP headers you wish here
            async headers() {
                //! a workaround to get the token from the extension, since Clrek doesn not provide a way to get the token from the background script 😤. so we store it on initialization.
                const {authToken} = await chrome.storage.sync.get(["authToken"]);
                return {
                    Authorization: `Bearer ${authToken}`
                };
            },
        }),
    ],
});

hope this help.

[jescalan]

https://github.com/orgs/clerk/discussions/3829