[SOLVED] Web3 Auth Firebase Extension in Next.JS

Moralis General
#1

Hello!

I’m trying to setup a Web3 Auth with Firebase Extension in a Next.JS application but I’m having some problems.

I followed this tutorial https://www.youtube.com/watch?v=2HLxYYmZp94&ab_channel=MoralisWeb3 up to a point. I have created the extension and it looks fine in the Firebase admin area. The problem is when I’m trying to connect it to the Nextjs application.

In the tutorial, there’s no wrapper or provider over the entire app and I’m curios how this works. I have some errors and I don’t know how or where exactly to connect the extension in my front-end project.

Here’s the error that I’m having:

image
image1904×778 70.1 KB

If someone did this in a next.js app and managed to make it work, please leave a reply! I did not find a solution, yet…

Thanks! :slight_smile:

1 Like
#2

In case if your firebase config variable are stored in env, then make sure they are available for client side usage by adding NEXT_PUBLIC_ prefix

If thats not the case then maybe try updating the packages as mentioned here

#3

will give it a try in a few moments! Thanks for the hint

#4

nothing works unfortunetly…this is weird, I’m really curios what could be the problem here…

I still think I need some kind of Firebase provider over the entire application inside my app.tsx file.
Don’t we need something like that in order to connect to the firebase?

#5

I’m having the same error.

#6

As a workaround for this issue (it seems to happen only in Next.js, not React), try:

// inside a component somewhere e.g. main layout or signin page
const [auth, setAuth] = useState(null);
const [moralisAuth, setMoralisAuth] = useState(null);

useEffect(() => {
  const app = initializeApp(firebaseConfig);
  setAuth(getAuth(app));
  setMoralisAuth(getMoralisAuth(app));
}, []);
#7

So, I made a custom hook that looks like this:

import { useState, useEffect } from "react";
import { initializeApp } from "firebase/app";
import { Auth, getAuth } from "@firebase/auth";
import { getMoralisAuth, MoralisAuth } from '@moralisweb3/client-firebase-auth-utils';

import { firebaseConfig } from "@/root/config/firebaseConfig";

const useFirebaseInit = () => {
  const [auth, setAuth] = useState<Auth | null>(null);
  const [moralisAuth, setMoralisAuth] = useState<MoralisAuth | null>(null);

  useEffect(() => {
    const app = initializeApp(firebaseConfig);
    setAuth(getAuth(app));
    setMoralisAuth(getMoralisAuth(app));
  }, []);

  return {auth, moralisAuth}

}

export default useFirebaseInit;

but when I try to use it, now I get this error:

image
image1906×876 66.6 KB

Not sure how do I get the auth registered in Next.js…

#8

that error is referring to this auth or to something else?

#9

I am not sure to be honest, it’s a vague error :frowning:

I made some adjusments to the function, I made it async like this

const useFirebaseInit = () => {
  const [auth, setAuth] = useState<Auth | null>(null);
  const [moralisAuth, setMoralisAuth] = useState<MoralisAuth | null>(null);

  useEffect(() => {
    const initFirebase = async () => {
      try {
        const app = await initializeApp(firebaseConfig);

        if (app) {
          setAuth(getAuth(app));
          setMoralisAuth(getMoralisAuth(app));
        }
      } catch (e) {
        alert('something went wrong')
      }

    }

    initFirebase();
  }, []);

  return {auth, moralisAuth}
}

but on the UI, it’s always going in the catch block…It seems that for some reason the initializeApp it’s not fired

image
image1380×388 28.3 KB

#10

I’m thinking maybe I need to initialize it on the server somehow using getStaticProps or getServerSideProps…

#11

you could try to add a console.log before this line to see how many time it gets called

#12

I tried to do this on the server using getServerSideProps, like this:

export async function getServerSideProps() {
  const app = await initializeApp(firebaseConfig);
  console.log('AAPPPPPPP!!!', app);
  const auth = await getAuth(app);
  const moralisAuth = await getMoralisAuth(app);

  return {
    props: {
      auth,
      moralisAuth
    }
  }
}

and when I look in the terminal to see the log for the app, it works, it gets initialized:

image

but again, on the client side I get this error which is so weird…what’s going on here!!! :))

image
image1940×946 164 KB

#13

I don’t know what happens, I’m not expert in next or react

1 Like
#14

What are your react and next package versions?
Not sure if these versions affect but I am able to use it on the client side with these versions.

"next": "12.2.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"firebase": "^9.10.0",

And this is my code in a .ts file.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);

firebase app is exported from .ts file and imported in other files.

#15

Any updates on using this with NextJS? I am having the same issue as @pogadev18

#16

This worked if anyone is wondering: https://github.com/MoralisWeb3/Moralis-JS-SDK/tree/main/demos/firebase-nextjs

2 Likes
#17