How to add imports for JS in a Blazor WASM

Question

I'm trying to use firebase auth with a blazor WASM which hosted in a github page.

I'm loading all needed JS from CDN on my index.html, looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
   //lots of other stuff
</head>
<body>
  //some blazor
  <script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";

        import {
            getAuth,
            onAuthStateChanged,
            GoogleAuthProvider,
            signInWithPopup,
            signOut,
        } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js";

        import {
            getFirestore,
            collection,
            addDoc,
            query,
            orderBy,
            limit,
            onSnapshot,
            setDoc,
            updateDoc,
            doc,
            serverTimestamp,
        } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js';

        import {
            getStorage,
            ref,
            uploadBytesResumable,
            getDownloadURL,
        } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-storage.js';
        import { getMessaging, getToken, onMessage } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-messaging.js';
        import { getPerformance } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-performance.js';

        

        // Your web app's Firebase configuration
        const firebaseConfig = {
            apiKey: "AIzaSyB3EobtWgtzNrOL2Qde3nM-JCfsPdAqRGg",
            authDomain: "vikingarena-5fb20.firebaseapp.com",
            projectId: "vikingarena-5fb20",
            storageBucket: "vikingarena-5fb20.appspot.com",
            messagingSenderId: "127848345256",
            appId: "1:127848345256:web:d31f8969ea0806d04a1c9d"
        };

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
    </script>
    
   //other scripts
   <script src="js/VikingJS.js"></script>
</body>
</html>

Then I have my VikingJS.js file where I try to do things, like google loging:

async function signIn() {
    var provider = new Auth.GoogleAuthProvider();
    await Auth.signInWithPopup(Auth.getAuth(), provider);
}

I call it from blazor using JSInterop, but I get: ReferenceError: GoogleAuthProvider is not defined

Here is the calling bit:

private async Task Login() {
    await JSRuntime.InvokeVoidAsync("signIn");
}

How do I load all those methods from firebase to have them accessible in my js file?

Login() is bound to an onclick event I take it on a button or something? — jon.r, Jan 13 '23 at 16:17
For sure, and the fact that i get the reference error in the JS when I click seams to indicate that the hook is correct — javirs, Jan 14 '23 at 18:01
I don't know much about firebase but where is `Auth` defined/initialized? I am not quite sure but since you imported `GoogleAuthProvider` directly shouldn't you be using it directly too ? `var provider = new GoogleAuthProvider();` — T.Trassoudaine, Feb 14 '23 at 16:44
+1 to @T.Trassoudaine 's comment. And the same would apply for `signInWithPopup()` and `getAuth()` which means that second line would become: `await signInWithPopup(getAuth(), provider);` — Rosário Pereira Fernandes, Feb 15 '23 at 00:40
I'm copying from the documentation, I've no real clue about JS code. I'm a C# dev. What I try to do is to all the imports and all the const's once in the index.html and then have access to it in my js files. Kind of global scope. The script where I have the signIn method is loaded after the JS bit you see in the example. In the part where it says "other personal scripts" — javirs, Feb 15 '23 at 07:40
Could it be tha the solution is making a "module" or "class" (no idea of JS nomenclature) where I can create those objects and re-use them when needed? — javirs, Feb 15 '23 at 07:53
@javirs Well you have another issue, because the variables defined in a module script in JS are local to this module and not global. So either define signIn in your module or export/import the necessary variables from your module. [This](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-7.0#javascript-isolation-in-javascript-modules) should help you use it in Blazor. — T.Trassoudaine, Feb 15 '23 at 09:49
when creating a JS module and importing it to different pages, does the module keep its internal values and created objects ? — javirs, Feb 15 '23 at 10:09
[Is module export create a new instance each time when import](https://stackoverflow.com/questions/50073297/is-module-export-create-a-new-instance-each-time-when-import) — T.Trassoudaine, Feb 15 '23 at 10:25

score 1 · Answer 1 · answered Feb 15 '23 at 04:29

1

Try to add the app variable (Firebase app object you created in your index.html file) into the signIn function.

async function signIn() {
    const provider = new GoogleAuthProvider();
    const auth = getAuth(app);
    await signInWithPopup(auth, provider);
}

Same as well in JSInterop call to include the Firebase app object.

private async Task Login() {
    await JSRuntime.InvokeVoidAsync("signIn", app);
}

answered Feb 15 '23 at 04:29

Joshua Ooi

1,139
7
18

The calling bit (`private async Task Login()`) happens in the Component.razor where `app` does not exists – javirs Feb 15 '23 at 07:35
to clarify, "app" is created inside a js script. The Login() method is in a C# code. It has no references to the "app" thing. – javirs Feb 15 '23 at 07:37

How to add imports for JS in a Blazor WASM

1 Answers1