How to Pass an Auth Token

[ballcoach12]

My editor is cloud-based and will run in a browser. I need to pass an auth token to my language server, which is running in a web worker, so that I can use it while making a call to an external REST API during scoping. Think of it like calling npm install, except on-the-fly with credentials. I'm not exactly sure how I should go about passing the token from the browser request to the worker.

My first thought was to hand it in during dependency injection and then access it via shared services. But that seems like a possible misuse of the DI mechanism. Is there a recommended way for me to safely pass information like this to my scope provider and then update it when the token needs a refresh?

[msujew]

Hey @ballcoach12, good to see you back :)

First off, it's probably best to pass the token during the initialize request of the language client. You can use the initializationOptions provided by the language client and receive those on the language server side. See here. Afterwards, create a new DI service that holds the token and registers a callback to shared.lsp.LanguageServer.onInitialize(params => ...) in the constructor.

Then during runtime, if the token changes, you can just send a notification to the language server. You can always listen to any custom notification:

shared.lsp.Connection?.onNotification('newToken', token => {
  ...
});

[msujew]

What I seem to be misunderstanding is how to give the token to the language server during initialization. main-browser.ts seems like the most logical place to do that.

Once you have the TokenService set up, you are done with the language server. The rest needs to be done on the language client side. When initializing the language client, you just need to set the initializationOptions (see here for monaco-languageclient), and just perform sendNotification when you notice that the auth token has changed in the main thread.

[ballcoach12]

Ah! OK, now I understand. I was making it harder than it needed to be. I just need to spin up a language client in my calling app and use it to pass the token.

[msujew]

I just need to spin up a language client in my calling app and use it to pass the token.

Wait, what? How are you using Langium as a language server without a language client in place? It at least sounds like you're not using a language client right now?

[ballcoach12]

Sorry. I misstated that. I'm looking to use the language client from the monaco-editor-wrapper instance.

[msujew]

Ah, I see. Then you can pass the token in the language client config object, see here.

[ballcoach12]

For anyone else who has a similar requirement, here is how I implemented this. In my case, I am using a worker to run the language server in the browser, which means that I am unable to obtain the cookie that contains the token because browser-side code cannot access a cookie.

My implementation follows these steps:

1. The user logs in and gets a token that is stored in the browser cookie.
2. When the browser loads the editor, it sends a request back to the hosting server to send the token in a header in the response, which can then be accessed by the requesting code in the browser.
3. The browser-side application code gets a language client from the monaco-editor-wrapper and sends a notification to the language server. The token is included in the notification contents.
4. The language server (worker) receives the notification and hands the token off to a custom Token Service that caches it.
5. When my import scope provider needs to make an HTTP request to resolve a package in an imported scope, it obtains the token from the Token Service and places it in a cookie that part of the request that is sent to my package repository.
6. The package repository checks the token and authorizes all requests.