# Firebase Authentication using Wagmi in Next.js This guide will cover the basics of how to set up a Firebase project and integrate authentication (sign up and login) via an [Ethereum](https://ethereum.org/) wallet using [Wagmi](https://wagmi.sh/) and Firebase's [custom authentication system](https://firebase.google.com/docs/auth/admin/create-custom-tokens). **Prefer to just read the code? Check out the** [**repository here**](https://github.com/withbackdrop/firebase-wagmi-auth)**!** ## How It Works ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690812525728/5da12fa1-1fb1-4394-ac6d-8e4753ac64a4.png align="center") * A user can use their Ethereum wallet (for example Metamask) to verify their identity by signing a message * The signed message is then used to sign up (or login) the user to Firebase via a custom auth token * The signed message is used to ensure the wallet address submitted is that that was used by the user to sign a message * When we can verify that, then we can request the user via their address and log them in using a custom token * Alternatively, we create a **User** document and then log the user in ## Prerequisites * Knowledge of React and [Next.js](https://nextjs.org/) which is used to build the example application * An Ethereum wallet (e.g. [Metamask](https://metamask.io/)) * A [Firebase](https://firebase.google.com/) account and knowledge about [Firestore](https://firebase.google.com/docs/firestore) * Some knowledge about [Tailwindcss](https://tailwindcss.com/) (but not necessary) ## Setup *Assumption: You already have a* [*Firebase*](https://firebase.google.com/) *account.* **Setup your Firebase Project**[​](https://web3auth.io/docs/content-hub/guides/firebase#setup-your-firebase-project) * Navigate to the [Firebase console](https://console.firebase.google.com/) and add a new project ![Add new project](https://cdn.hashnode.com/res/hashnode/image/upload/v1690808992808/fba61e92-b67d-42fc-a111-d5ac6a5cbd9c.png align="center") * Give your project a name and click on **Continue** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690809099903/662015ef-74c8-40cf-996a-d754f6459636.png align="center") * Finally, click on **Create Project** **Configure Firebase for Web** * Once the project is created and authentication is configured. Let's use Firebase for Web by clicking on the `` button on the home screen of your project. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690809987482/8c4d4db2-2196-435c-9eb8-4c2744949b29.png align="center") * In the next screen, enter the **App nickname** and click on **Register app** button to register the app for Web. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690810027894/eeae9244-1538-4658-b4c6-49d868a17e13.png align="center") Next screen shows ways to add **Firebase** to your application. We will be using the config from here later in the guide. Please keep a note of the `firebaseConfig` object. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690810117989/a16f9191-eb7c-440d-89c9-dbe9eb165b9e.png align="center") **Create Cloud Firestore database** * Navigate to **Build** > **Firestore Database** in the left sidebar and create a new database ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690811459792/c16fb93b-0a80-4fc9-8191-ba0f894ee873.png align="center") **Clone repo** * Navigate to [https://github.com/withbackdrop/firebase-wagmi-auth](https://github.com/withbackdrop/firebase-wagmi-auth) and clone the repository * Follow the instructions in the readme * Rename the `.env.local.example` file to `.env.local` and provide the necessary values (see below for details). This will ensure your application is correctly configured. * Run `yarn install` to install all the required dependencies and set the stage for an amazing experience. * Finally, execute `yarn dev` to launch the application. **Environment variables** * Using the values from your `firebaseConfig` noted above, copy and replace the values in your `env.local` file * You will also need a **Service account** private key which will allow you to use `firebase-admin` * You can generate a new private key via **Project settings** > **Service accounts** > **Generate new private key** * Copy the value from the **json** file for the value of `NEXT_FIREBASE_SERVICE_ACCOUNT_KEY`. Make sure to remove all new lines. * ```plaintext # EXAMPLE env.local NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyBvcHAOPzWyCL2jqVz8w4RnUywfLv012Lg NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=fir-x-wagmi.firebaseapp.com NEXT_PUBLIC_FIREBASE_PROJECT_ID=fir-x-wagm NEXT_FIREBASE_SERVICE_ACCOUNT_KEY={ "type": "service_account", "project_id": "fir-x-wagmi", "private_key_id": "4ce2b61626f84fc74e15b2f3364db9bc351ee784", "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCnUGOZMba62h+M\n6T6EFuZQvb8nugm3sngVqvF/3MQWMKhbob14r5mEvZQlqnsoHzXPUpa2UBgWvYmq\nwr5dj7wj9kz4D8qR0WStK/x7b31EFkaC1NUxCfIy36ZpHsgpfmzB15M3q2O5S/Jv\nAoJrdQ3BD5/tbTjDoaIKT+AmGRIelo5RKfHlEx96fw4ZCXCBso9RtrtHNhKKfw5p\nLyVSwSXYWNsuuTz4dz65eMkDTOLNQkQQQ9inMqu2J2t8GbLSM5ckQbcHaLxyH0wF\nkfkWmK9w9CYAbke5xiUhmRubeeV69i03WiOKL8rrnPz4Rzpu3g5wGTF+poOXyONl\nKM+gFxVHAgMBAAECggEAEIVMYwQ40KgYum9jgrkczSHXSK3C0jaB9f3BnTL9fQVu\nnPxSUE2NK+wTlJ6J9527+03iiiZMIp6yLmrOpOq8Pz7NkybtWnWhv8Rang5AVmNE\nBhzMNOyQU5FS2160kVL68S7/Sd1sr49oulO18LSyWCWvUHXa8jI5D6nwbkKbz+o7\n0OmTMV4lrL/PuapfHIQ/H/+XoXiJimvSe/3XFBZ/stmKEauDfOKxwlsLGfOOg3Hh\n//6r5d1P3sOE5VH3nVZTgyO3symryf3klyBpE89onFmKoR5lW5Q2DcMtqa4sT8K9\nenQL5v38EsWi7tG46KJR+lv3hn+uCgV4WbaCPIvnqQKBgQDhb/BqGbdTsLyeRRwn\ngTOvVSXRHt7GO8ml17KfKaiWnDHlQJ4wSlWRU7rAXfira9/S0PWDW31EhRjGdbX0\nw1fI1+uyDkgQhTm8NGMqFNwC4N8qmtdEF6dGJcwblRvtSvXIiyKZYA4RAS8d6+0R\nTJ8RuRoeX0uFI39nYyCCMOGRmQKBgQC9/zcxNnef+Qp9bksNKkUlAl9wjc5XLnj6\nQXhJ0i+ZOSme+a4pJB5yjL/ykk0H7ZHiOquxUwTX+yeD2NQRvfKGoTxv3okABGGy\nuLcDN6bBGqRLwBAWvDbfRlYE+2ioWeuFvnCjIc8OZIyshMD5lpVPOTecUyoaT035\nE5iZld3p3wKBgQCoJmmJikLu3q3h06SrZriZeAZsE/2QmPnQhLHL/DOumzSwTeFw\nHZHzgyOR5sXbfuwFAC2QXAZ0vF39ccFVnvr0aPF57yMbh3PICL9KnSJ51yc+TR5x\nwL7ZGMpEbJTXCwmHGxiklDwJvPta8yXxuFgRzSJJM0VOOmsGP674zOMDSQKBgHBa\nkuXMQtNb7yMbbNBdNcRb8dpaUTHm7m12984XuEQQtJcpKR91F3g/2WZ1s43DpCg2\n778Ny+h4wfZK66WOQPPyNw4kd7mF3cxVRQxnBXpd6dhNvHXlWUGRk16g2VPs0MUn\nR+6AGLR3K2T9oCw4KxVNTaBo4ZXrXb20I+J26GLbAoGALkBSVAinw4GPnELIlGeH\nxM8D5/U1YrDcz1lnQsWKRXgwma/gXxYca2jm2dFH0j+JNqNYpXQj6VVCXZEZQ4em\nK1eDTt4nHNEdNab2bxFf8EnSx1rzBT9DKi1PlYIEnMMVpk3D9HC15QFFlBGPUn+8\nXwEi32D/EnJUAnfxHgATzoY=\n-----END PRIVATE KEY-----\n", "client_email": "firebase-adminsdk-xpgkz@fir-x-wagmi.iam.gserviceaccount.com", "client_id": "103756314493271925133", "auth_uri": "https://accounts.google.com/o/oauth2/auth", "token_uri": "https://oauth2.googleapis.com/token", "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-xpgkz%40fir-x-wagmi.iam.gserviceaccount.com", "universe_domain": "googleapis.com" } ``` ## Happy building! And with that all setup, you should be able to use your Ethereum wallet to connect to Firebase! We hope you find this informative and eager to see what you build! ## Questions & Feedback If you have any questions or feedback, please do not hesitate to [send them our way](https://github.com/withbackdrop/firebase-wagmi-auth)! There is always room for improvement!