How to link two JS bundles to a two different html pages?

[IgorWolkov]

I'm very new to Scala JS ecosystem, and I need to split my JS App on two separate application: one for a login page and one for the rest.
If I understood correctly Scala JS App is linked to a certain page via Vite's index.js

import 'scalajs:main.js'

and vite.config.js

injectHtmlVarsPlugin({
  SCRIPT_URL: './index.js'
}),

and then it's just used in a certain html page i.e. index.html

<script type="module" src="<%=SCRIPT_URL%>"></script>

I see the solution in having two points in vite.config.js

injectHtmlVarsPlugin({
  LOGIN_URL: './login.js',
  REST_URL: './rest.js'
}),

but how should I configure two Scala JS Apps to have smth. like

import 'scalajs:login.js'

and

import 'scalajs:rest.js'

accordingly?
Thanks in advance.

[raquo]

I assume you're using the scalajs vite plugin. Then, the logic that resolves the "scalajs:main.js" name is here:

https://github.com/scala-js/vite-plugin-scalajs/blob/main/index.ts#L75

(fullURIPrefix is "scalajs:" as defined higher up in the file)

So, basically, "scalajs:main.js" resolves to "<scalaJSOutputDir>/main.js", and this main.js is the default name for the file that Scala.js outputs.

To change that name, you need to set something like the following in your build.sbt, for both the login and rest scala.js projects (hold that thought):

import org.scalajs.linker.interface.OutputPatterns
scalaJSLinkerConfig ~= {
  _.withModuleKind(ModuleKind.ESModule)
    .withOutputPatterns(OutputPatterns.withJSFile("login.js"))   // or "rest.js" for the other project
}

Then you should be able to refer to your login app's file as scalajs:login.js.

And to be clear, you need your login scalajs app and rest scalajs app to be separate subprojects / submodules in your sbt build, and each of those needs to have a main file (with def main(args: Array[String]): Unit = ...) that scala.js will pick up as its entry point.

Full disclosure – I haven't tried this myself, I found the bits and pieces for this here and here. So, if something's wrong in what I said, please let me know.

[raquo]

Also, when you want to hide source code like this, it's a good practice to make sure that your login sbt project does not depend on any other projects with sensitive stuff. For example, if your login project depends on the rest project, then you can accidentally import something from rest into your login app, that shouldn't be exposed there. So, it's common to have a project like clientCommon that both login and rest sbt projects depend on, that contains your frontend code that you're ok to share between both projects. In that case, clientCommon doesn't need its own entry point. Or, you can just put all shared code into the login project as it's the less privileged one, but that's not super elegant IMO.

Anyway, you can figure this out as the next step, you should get the basic multi-project build working first.

[IgorWolkov]

Thank you very much for a such detailed and fast answer.
I'll check the solution, if it works, I'll share with you a minimal setup, maybe someone is also interested in it.

[Lukah0173]

It may be worth considering also, that even with two endpoints like this you may still need some server-side capability to manage the authentication validation following login - That is, rest needs a way to check that an authentication has occurred and check that this is valid.

An example would be:

login: performs OAuth 2.0 Authorization Code Grant and prepares this to send to rest
rest: Validates OAuth JWT token and following validation serves the rest app.

How rigorous you want to go depends on your use-case but noting that rest needs a way to not serve its assets unless it can confirm authentication.

Typically I'd suggest you not create a login app yourself, as that can be delicate to get all the security details right. You could use a lightweight login app that uses keycloak npm package for example, where you would manage authentication with a dedicated authentication server (or use your GitHub credentials through GitHub auth, or something like Okta). Another approach is to skip a login app altogether and use OAuth 2 Proxy to provide the authentication challenge as a reverse-proxy.

Both of these approaches could then pass a OAuth JWT to rest which would then confirm validity of the authentication. If you are willing to invest the time, you may want to look at serving static assets with the Tapir framework, which is working well for us. You can then implement the security logic to perform the authentication check. In this example the rest assets would be served by Tapir with some corresponding backend server capability.

That's quite an advanced setup though, since you would need some form of server-side capability to process the authentication token and serve the static assets. If you provide us more info about what you're trying to do we may be able to guide you in the right direction 👍

[Lukah0173]

It also looks like it's possible to use OAuth 2 Proxy to serve static files, which may be another approach that doesn't require a backend server stack (you would still need to deploy the container somewhere). I haven't tested this though and it may have limitations. Hope it helps.

[IgorWolkov]

@Lukah0173 thank your for your extended comment. For my case the application will be used in a local network with a limited access to the internet, so external auth service such as Google is not a case for this project. The idea is to use a backend to issue JWT tokens and then use them on an api backend layer with Rest Js App.

[Lukah0173]

Interesting, thanks for the info @IgorWolkov - If you don't already have a solution in mind for the JWT issuance, I can recommend containerised Keycloak for a local network deployment. We use this in our development networks to issue JWT and are using the Tapir approach above to secure the protected assets 👍

[IgorWolkov]

@Lukah0173, thanks, it's an interesting idea, I'll look at containerised Keycloak. The current solution is built on top of tsec lib.

[Lukah0173]

Happy to help @IgorWolkov. Also to add, for JWT / cryptography we are using nimbus-jose-jwt and have also implemented this with PAC4J (core and JWT libs). Let us know if we can help further 👍