/firebase-crossmint

Create in under 5 minutes a fully functional user account system where each user has NFT custodial wallets created. This sample code uses Firebase for authentication and Crossmint for wallet creation.

Primary LanguageJavaScriptMIT LicenseMIT

Firebase logo

Crossmint x Firebase starter

Create in under 5 minutes a fully functional user account system where each user has NFT custodial wallets created. This sample code uses Firebase for authentication and Crossmint for wallet creation.

Demo GIF

1. Firebase set up

Firebase dashboard

  1. Create a Firebase account and your first project
  2. Click on "Web", below "Get started by adding Firebase to your app"
  3. Select a name for your App and click "Continue"
  4. In the second step ("Add Firebase SDK") you will get a code snippet. Copy the values inside firebaseConfig as we will need them later.
  5. From the left sidebar, click on "Build" and select "Authentication". After that, click on "Get started"
  6. Enable "Email/Password" as login method

On your machine

In your terminal, clone the project and install dependencies:

git clone https://github.com/Crossmint/firebase-crossmint.git
cd firebase-crossmint
yarn

Next, create an .env file at the project root folder, and copy paste the following lines inside with the values we got in the step above:

NEXT_PUBLIC_FIREBASE_API_KEY=YOUR_FIREBASE_API_KEY_HERE
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN_HERE
NEXT_PUBLIC_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID_HERE

2. Crossmint set up

Now we are going to sign up to Crossmint and create an API key that allows us to create and manage wallet for our users. During development, we're going to create wallets in the free sandbox environment ('staging').

In the Crossmint console

  1. Go to staging.crossmint.com/console and follow the steps to create an account.

  2. Navigate to API keys and click on New API Key. Then check the wallets.read and wallets.create scopes -- this will give your API key permission to create and manage crypto wallets for your users. Finally save your new key and copy the CLIENT SECRET and Project ID values for later.

On your machine

Go back to your project, open again the .env.local file, and enter the following three lines:

CROSSMINT_BASEURL=https://staging.crossmint.com
CROSSMINT_X_CLIENT_SECRET=YOUR_CROSSMINT_CLIENT_SECRET_HERE
CROSSMINT_X_PROJECT_ID=YOUR_CROSSMINT_PROJECT_ID_HERE

And then save.

Please note: make sure the clent secret doesn't get leaked, as it would allow others to create wallets for your users.

Running locally

After completing all the set up steps above the application can be run with the command:

yarn dev

The application will be available at http://localhost:3000.

You'll be able to login and register using an Email/Password combination.

Deploy via Vercel

Deploy with Vercel