Blazor Dependency Injection for JS Runtime

I have been using Blazor in several webassembly applications. I have created some utility projects to share across applications.

One such project is a Firebase wrapper over the firebase javascript libraries.

For this project in my application Program.cs, I add a singleton service instance.

 public class Program
 {
     public static void Main(string[] args)
     {
         var builder = WebApplication.CreateBuilder(args);

         // Add services to the container.
         builder.Services.AddRazorComponents()
             .AddInteractiveServerComponents();

        // -- POINT OF FAILURE BELOW -- 
        builder.Services.AddSingleton<FirebaseGoogleAuthServic>();

Inside this service I use DI for IJSRuntime in the constructor.

public FirebaseGoogleAuthService(IJSRuntime jsr, ILogger<FirebaseGoogleAuthService> logger)
{

Above Dependency Injection fails with below error,

Cannot consume scoped service 'Microsoft.JSInterop.IJSRuntime' from singleton 'BlazorUtils.Firebase.IFirestoreService'.

Basically I have been using this library in webassembly projects so far, and the scope of IJSRuntime is different in webassembly vs server projects.

This is where I found the details.

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/dependency-injection?view=aspnetcore-8.0

So long story short, I had to remove the Injection of IJSRuntime from my service and pass it instead from each razor component to the individual service calls.

Not an ideal solution, but this is the only thing I could get working.

Please drop in your comment if you've come across any better solution.