⚛️Connect with React

Once you have your Moralis Server launched it's time to connect to it via the Moralis SDK. This guide will show you how you can do it in just a few easy steps.

For move details on using React with Moralis check the react-moralis github repo.

1. Creating React App

To start a new Create React App project with TypeScript, you can run:

npx

npx create-react-app my-app --template typescript

yarn

yarn create react-app my-app --template typescript

2. Install the SDK

Make sure to have react, react-dom and moralis installed as dependencies. Then install react-moralis:

npm

npm install moralis-v1 react-moralis

yarn

yarn add moralis-v1 react-moralis

3. Initialize the SDK

You will see the following code:

src/index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Import Moralis Provider in your project and add <MoralisProvider> component as shown below

src/index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { MoralisProvider } from "react-moralis";

ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider serverUrl="https://xxxxx/server" appId="YOUR_APP_ID">
      <App />
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Server (Dapp) URL and APP ID you can get from your Moralis Dashboard. Go to your Moralis Dashboard and click on View Details next to the server name of your server.

Click on Settings below the server name of your server.

Dapp Details

4. Authenticate User

Now that the SDK is successfully connected we can use the power of Moralis. Let's login a user and instantly get all their tokens, transactions and NFTs from all chains in your Moralis Database.

Call the useMoralis hooks inside your app in App.tsx enter the below code:

src/App.tsx

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import { useMoralis } from "react-moralis";

function App() {

    const { authenticate, isAuthenticated, isAuthenticating, user, account, logout } = useMoralis();

    useEffect(() => {
    if (isAuthenticated) {
      // add your logic here
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAuthenticated]);

    const login = async () => {
      if (!isAuthenticated) {

        await authenticate({signingMessage: "Log in using Moralis" })
          .then(function (user) {
            console.log("logged in user:", user);
            console.log(user!.get("ethAddress"));
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }

    const logOut = async () => {
      await logout();
      console.log("logged out");
    }

  return (
    <div>
      <h1>Moralis Hello World!</h1>
      <button onClick={login}>Moralis Metamask Login</button>
      <button onClick={logOut} disabled={isAuthenticating}>Logout</button>
    </div>
  );
}

export default App;

5. View the page from localhost

Run your app on localhost with the following command in your project directory where package.json is located

npm

npm start

yarn

yarn start

6. Login with Metamask

Visit the webpage and click Login. Your Metamask will popup and ask you to sign in.

To connect other wallets other than MetaMask, check out: Web3 Authentication

Metamask popping up when user clicks Login.

7. See all User Assets in the Moralis Database

As soon as the user logs in Moralis fetches all the on-chain data about that user from all chains and puts it into the Moralis Database. To see the Moralis Database go to your server and click on Dashboard.

You will see the database of that server once you click Dashboard. Moralis fetches data from all blockchains where the address of the user has been active and you can see and query all tokens, NFTs and past transactions of the user all in one database.

Moralis Database fetches all user data from all chains and updates it in real time in case users move their assets on chain.

Working code

Live Demo

Move Assets

Try moving the assets in your Metamask Wallet and observe how the Moralis Database will update the records in real-time.

Tip of the iceberg

As you can probably already see Moralis is a true superpower for blockchain developers. But this small demo is just the tip of the iceberg. Moralis provides endless tools and features for any blockchain use-case. Most importantly, everything is cross-chain by default.

Feel free to explore the rest of the documentation in order to grasp the full power of Moralis.

Check out React Boilerplate for instant setup and all features built-in! 🚀