Web3 Firebase Authentication

This tutorial will teach you how to authenticate a user to your Firebase application by an EVM wallet or a Solana wallet. To simplify and speed up this process, we will use the Authenticate with Moralis Web3 extension for the Firebase.

Web3 Firebase Authentication DemoWeb3 Firebase Authentication Demo

Web3 Firebase Authentication Demo

At the beginning check our another tutorial: Your First Dapp for Firebase. This article won't explain the basic stuff like how to create a project or how to run the Firebase emulator.

In this tutorial we will use the following services:

Install Extension

How to generate and convert the Service Account certificateHow to generate and convert the Service Account certificate

How to generate and convert the Service Account certificate

Before we install the Moralis extension we need to create a service account certificate. This certificate allows the extension to issue custom tokens for the Firebase. You can generate the certificate in the Firebase console. Go to Project settings > Service account and click the Generate new private key button. Next, click the Generate key button.

Now when you have a valid certificate, we need to convert it to extension parameters. To simplify this step we've created an online converter. Open the converter and load your certificate. The app will return processed values which you can paste to the CLI during the installation of the extension.

We are ready to run the CLI command.

firebase ext:install moralis/moralis-auth

During the installation, the installer will ask you about the Moralis API key, a website URL and the previously processed certificate.

After this step you can deploy the extension or run your project in the emulator.

firebase deploy --only extensions

Front-End App Integration

At the beginning, we need to add our utils package for the extension to the front-end app. The package simplifies a usage of the extension.

npm install @moralisweb3/client-firebase-auth-utils

To initialise the package we need to create a new instance of the MoralisAuth. To do it, we need to call the getMoralisAuth function. This function requires an instance of the Firebase app. So, before you call this function, be sure that you have initialised the app correctly.

import { initializeApp } from '@firebase/app';
import { getMoralisAuth } from '@moralisweb3/client-firebase-auth';

export const app = initializeApp({
  // your configuration here
});

const moralisAuth = getMoralisAuth(app);

Authenticate by MetaMask (EVM)

Let's authenticate by the MetaMask! To start, we need to add a dedicated package: @moralisweb3/client-firebase-evm-auth. The package internally uses the ethers.js library to handle communication with a EVM provider.

npm install @moralisweb3/client-firebase-evm-auth

To authenticate a user we need to call the below function.

import { signInWithMoralis } from '@moralisweb3/client-firebase-evm-auth';

await signInWithMoralis(moralisAuth);

It's so simple!

The signInWithMoralis method by default supports the MetaMask provider only. If you want to use your own provider you can pass it by the options argument.

import { signInWithMoralis } from '@moralisweb3/client-firebase-evm-auth';
import { JsonRpcProvider } from '@ethersproject/providers';

const provider: JsonRpcProvider = /* ... */

await signInWithMoralis(moralisAuth, {
  provider
});

Authenticate by WalletConnect (EVM)

To handle the WalletConnect provider we need to install the @walletconnect/web3-provider package.

npm install @walletconnect/web3-provider

To authenticate a user we need to call the below code.

import { signInWithMoralis } from '@moralisweb3/client-firebase-evm-auth';
import { Web3Provider } from '@ethersproject/providers';
import WalletConnectProvider from "@walletconnect/web3-provider";

const provider = new WalletConnectProvider({
  rpc: {
    1: 'https://your_rpc_url_here/',
    // ...
  }
});

await provider.enable();

await signInWithMoralis(moralisAuth, {
  provider: new Web3Provider(provider)
});

More information how you can configure the WalletConnectProvider you can find here.

Authenticate by Phantom (Solana)

In the Solana case the solution is similar. To start, we need to install a dedicated package: @moralisweb3/client-firebase-sol-auth. The package by default supports the Phantom wallet only.

npm install @moralisweb3/client-firebase-sol-auth

To authenticate a user we need to call the below function.

import { signInWithMoralis } from '@moralisweb3/client-firebase-sol-auth';

await signInWithMoralis(moralisAuth);

That's it!

If you need to use a different provider than the Phantom provider, you can pass it by the options argument.

import { signInWithMoralis } from '@moralisweb3/client-firebase-sol-auth';
import { JsonRpcProvider } from '@ethersproject/providers';

const provider = /* ... */

await signInWithMoralis(moralisAuth, {
  provider
});

Demo Project

You can find the repository with the final code here: firebase-auth-ext.


Did this page help you?