[solved] Service functions is not available: Angular app + Firebase Auth Ext

afrotonder · March 7, 2023, 5:10pm

Heyyo!

Trying to get the Moralis Firebase Auth Extension to work with my Angular project by following Jays tutorial and am stuck in an issue similar to this one where I’m getting the following error on trying to connect to metamask. moralis_firebase_err .

To connect to the service from the client side I’m doing the following: moralis_firebase_err1

That code snippet is what’s causing the “Service functions is not available” error above.

The solution presented in the issue similar to this one was adding the correct “regionOrCustomDomain” param when calling getMoralisAuth. This didn’t solve the issue for me.

What did change the error for me was when I defined firebase functions like so,

but the error that followed is what brought me here.

After that error I installed @angular/fire and imported it from the app.modules file but the error keeps persisting.

I feel that I might need to install the whole angular/fire suite but I don’t think I have to go that far to interact with the extension. Hopefully someone can shed some light on this issue.

Thanks!

cryptokid · March 3, 2023, 4:27pm

Maybe this thread helps. It seems to have a similar title

afrotonder · March 3, 2023, 4:53pm

Hey! That one didn’t help. I mention in the first sentence I’m facing an issue similar to that one you pointed out (its the same issue xD) and a few points later I stated that the solution, which was changing the region param, didn’t help.

Thanks a lot for the quick reply tho! I’m assuming there’s something extra I have to invoke for Angular to accept the connection to the Firebase Extension but I’m not really sure.

afrotonder · March 3, 2023, 7:22pm

Small update.

After properly injecting the functions from the app.module.ts NgModule the above error stating something about AngularFileModule is gone. Now I’m facing some errors that seem to be web3 provider issues, which are hella easier & more verbose than the errors I was facing before.

New Error

Example on how I’m using ethers to get the current web3 provider.

Will keep updating until I find the solution.

Thanks for reading!

afrotonder · March 3, 2023, 11:42pm

Another update. My main problem was my @moralisweb3/client-firebase-evm-auth import.

I was importing getMoralisAuth from @moralisweb3/client-firebase-auth but the correct package to import it from is @moralisweb3/client-firebase-EVM-auth. Totally missed that detail.

Now I’m facing a CORS issue but that should be even simpler to solve.

Here’s the error. Will post the final solution to close this thread.

afrotonder · March 7, 2023, 5:07pm

Final update. Solved.

Was finally able to make this work by redoing every step again twice. What i did different was that after installing the moralis firebase extension on my existing project, i deleted my node modules & my package-lock.json & it ended up working.

Apparently installing all the necessary firebase packages as you develop will make certain dependencies not sync correctly.

This is how i connect to the extension in Angular (same as react)

This is how I connect to metamask in Angular.

The CORS error I was receiving before just went away after I reinstalled everything.

TLDR

Do everything in the tutorial BUT you must delete/reinstall node_modules & package-lock.json for it to work correctly.

This wasn’t necessary in the tutorial video because Jay used a pre-prepared project that already had all necessary dependencies. In my case I just went along and added what I was missing to my already existing Angular project with already had a firebase version, didn’t have the moralisweb3 package, etc.

Thanks to everyone who took a look at this! Hope it helps.

anand_jaat · June 8, 2023, 6:40am

still you have not used @moralisweb3/client-firebase-EVM-auth .instead you are using @moralisweb3/client-firebase-auth in your latest repy and you were saying earlier, to use @moralisweb3/client-firebase-EVM-auth .

johnversus · June 8, 2023, 7:00am

Hi @anand_jaat

Can you please create a new post in case if the users solutions does not work?

Also you can have a look the demo code from our github, if that helps.

github.com

MoralisWeb3/Moralis-JS-SDK/blob/main/demos/firebase-nextjs/hosting/components/Firebase.ts

import { FirebaseApp, initializeApp } from 'firebase/app';
import { Auth, browserSessionPersistence, getAuth } from 'firebase/auth';
import { connectFunctionsEmulator, Functions, getFunctions } from 'firebase/functions';
import { getMoralisAuth, MoralisAuth } from '@moralisweb3/client-firebase-auth-utils';

export interface Firebase {
  app: FirebaseApp;
  auth: Auth;
  functions: Functions;
  moralisAuth: MoralisAuth;
}

export async function initializeFirebase(): Promise<Firebase> {
  const app = initializeApp({
    apiKey: String(process.env.NEXT_PUBLIC_FIREBASE_API_KEY),
    authDomain: String(process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN),
    projectId: String(process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID),
    storageBucket: String(process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET),
    messagingSenderId: String(process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID),
    appId: String(process.env.NEXT_PUBLIC_FIREBASE_APP_ID),

This file has been truncated. show original

johnversus · June 10, 2023, 7:00am

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.