Use Firebase Authentication for Web2 logins and Metamask/Walletconnect for Web3 in the same application

Moralis General
#1

Is there an example that shows how to integrated Firebase authentication and Metamask/Walletconnect authentication in the same application? What I’d like to achieve is the following:

  • If the user chooses any login type that isn’t Metamask/Walletconnect, then Firebase authentication provider manages the login such that in Firebase, I’m able to configure the Web2 logins that I’d like to support. For instance, Web3Auth has an example showing how they handle it https://web3auth.io/docs/guides/firebase. I’m wondering if Moralis is able to do this without needing Web3Auth in the mix. If not, I can use Web3Auth to manage this flow, but in that case, I’m not sure how to handle the next use case:
  • If the user chooses a web3 wallet login type, then it’d behave as shown in https://docs.moralis.io/docs/web3-firebase-authentication.

If I have to use Web3Auth to achieve the above, then I’m looking at the example here, and I am wondering how would I integrate the setUser() logic in this example with the example using NextJS/NextAuth based setting of the user in session shown here.

Help is much appreciated. Thank you in advance!

#2

Hey @deepak.k.ghosh,

based on your specification, you won’t be able to only use Moralis for the first one as we don’t really have full web2 integration w/ Firebase. Your options might be to follow web3auth or make an if statement that will handle firebase authentication logic

For 2nd one, as it is web3 wallet login that should be no problem as you can follow that tutorial.

Also quick question are you using Moralis server or not? as you mentioned setUser which does not exist in the NextJS/NextAuth setting which use Moralis v2 (no server)

#3

Understood. I’m not using Moralis server. My plan is to host on firebase, and I can follow the example from the web3 wallet login example to do so, but the web3auth example uses next.js, and I’m wondering what might be the best way to bring them together, and if there’s any example/resource you can point me to. Thanks so much for your time!

#4

Hey @deepak.k.ghosh, from quick glance looks like both tutorial should be compatible to integrate at the same time :raised_hands:

You will just need to setup one firebase project and the app you build will use Firebase Hosting, Firebase Cloud Function, and Firebase Authentication. Also do not forget to install Moralis Authentication Firebase Extension as shown in the tutorial

Then you should follow the step by steps, but on the high level the way you handle it should be using simple if statement:

if (loginMode === "web2") {
  // sign in w/ Google + Web3Auth
} else {
  // sign in w/ Moralis + Firebase Auth Extension
}

The tutorial might be a bit different since one used NextJS and the other is using VanillaJS, but overall whatever JS Frontend framework you choose, they should work as expected as long as you configure everything correctly and copy paste the right code

#5

Great thank you! I think we made it work!

#6

Amazing! How are you finding moralis services so far?