Autenticación Web3 con Next.js, React y Moralis

En este artículo, construiremos un sistema de autenticación Web3 con Next.js, React y Moralis. La autenticación es esencial para proporcionar servicios a usuarios válidos y, a menudo, se lleva a cabo utilizando un nombre de usuario y una contraseña.

Autenticación Web3 con Next, React y Moralis.

 

¿Qué es Moralis?

Si eres nuevo en Web3 o blockchain y lees este artículo, probablemente te preguntes qué es Moralis. Bueno, Moralis es una librería que permite crear dApps (aplicaciones descentralizadas) entre cadenas muy rápidamente.

Moralis ofrece un flujo de trabajo único para desarrollar dApps de alto rendimiento. Seguramente tus herramientas y servicios web3 preferidos son totalmente compatibles con Moralis.

Hay varios datos buenos al respecto:

  • Moralis es la forma más rápida de crear y desplegar aplicaciones descentralizadas (dApps) en Ethereum, BSC, Polygon, Solana, Elrond, etc.
  • De forma predeterminada, todas las dApps de Moralis son de cadena cruzada. Moralis asegura que su dApp estará preparada para el futuro. Tu dApp funcionará en cualquier cadena, incluso si se crean cadenas de bloques adicionales.
  • Moralis facilita el establecimiento,mantenimiento y crecimiento de sus aplicaciones blockchain.

 

Autenticación Web3 con Next.js, React y Moralis

Requisitos previos

Deberá tener Node.js y Next.js (versión 12) instalados en su máquina:

npm install -g next@12
# or
yarn add next@12

 

Para facilitar el seguimiento de este artículo, puedes encontrar:

Configurar el proyecto Next.js

Según la documentación oficial de Next.js, Next.js es un framework React flexible que le brinda elementos básicos para crear aplicaciones web rápidas.

Lo primero que debe hacer es ir a su terminal y crear una aplicación Next.js usando el siguiente comando:

npx create-next-app@latest

Una vez que ejecute este comando, se le preguntará, «“what is your project name?». Puedes ponerle el nombre que quieras, pero vamos a llamarlo «web3-auth-next-react-moralis» para este artículo. Como ya sabrás, el @latest al final del comando le permite obtener la última versión de Next.js que tengas instalada:  actualmente, la versión 12.

 

Ahora, el proyecto luce así:

vscode next.js project

Construyendo el frontend

En este artículo, crearemos una  página de inicio de sesión con Moralis, que se conecta a la billetera Metamask cada vez que hace clic en el botón de registro. Primero, edite su archivo index.js para que se vea así:

export default function Home() {
  return
    <div></div>
}

Luego, ve al fichero styles > globals.css y edítalo para que se vea así:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
* {
  box-sizing: border-box;
  margin: 0px;
}

Realmente, lo único que se hizo fue agregar el margen de 0px…

A continuación, cree otra carpeta llamada components en el directorio raíz del proyecto, hermano de pages y public. Cualquier cosa que no sea una página debe estar en componentes porque no queremos mezclar las cosas. Luego, cree un nuevo componente dentro de esa carpeta y asígnele el nombre Login.js.

También creamos dentro de componentsuna carpeta de images para albergar nuestro ícono de Moralis, que puede obtener desde el proyecto github referenciado al principio de este artículo. Así es como debería verse ahora su directorio:

vscode nextjs project components

El siguiente paso es editar su archivo index.js para que ahora se vea así:

import Login from "../components/Login";

export default function Home() {
  return (
    <div>
      <Login />
    </div>
  );
}

Para construir el estilo visual de la página de inicio de sesión, tenemos que revisar los estilos y crear un nuevo archivo styles > Login.module.css. Aquí es donde escribiremos la mayor parte de nuestro CSS, y debería tener el siguiente contenido:

.login_container {
  background-color: rgb(18, 94, 75);
  height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
}

.login_card {
  background-color: white;
  width: 300px;
  height: 250px;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
}

.sign_in_container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sign_in_container>button {
  padding: 10px;
  border: none;
  border-radius: 10px;
  background-color: rgb(18, 94, 75);
  color: white;
}

Ahora, vaya al archivo Login.js y edite el código para que se vea así:

import styles from "../styles/Login.module.css";
import Image from "next/image";
import icon from "./Images/moralis-logo.svg";

function Login() {
    
    return (
      <div className={styles.login_container}>
        <div className={styles.login_card}>
          <Image src={icon} width={100} height={100}/>
          <div className={styles.sign_in_container}>
          <button>Login with Moralis</button>
          </div>
        </div>
      </div>
    );
}

export default Login;

Aquí, se han importado los estilos de Login.module.css y se crean los contenedores div> className que usamos para diseñar nuestra página de inicio de sesión en el archivo Login.module.css.

Después de hacer esto, ejecute el código usando el comando npm run dev, y debería poder ver esto al abrir la url http://localhost:3000 :

web3-nextjs-react-moralis-auth-sigin

El siguiente paso es combinar esto con el login de Moralis.

Configurando Moralis

Lo primero que debe hacer aquí es instalar Moralis SDK para React. Para hacer esto, debe ejecutar los siguientes comandos:

npm install moralis --save
npm install react-moralis --save

Ahora vuelva a ejecutar el programa usando npm run dev y todo debería seguir funcionando.

Lo siguiente es crear un servidor Moralis. Si aún no sabe cómo hacerlo, siga los pasos a continuación:

  1. Haga click aquí para acceder al sitio web oficial de Moralis. Debe tener un aspecto como este:
    moralis web
  2. El siguiente paso es crear una cuenta e iniciar sesión en el panel de administración. Ahora verá algo como esto:
    moralis web admin panel
  3. Luego debe hacer clic en «create a new server» y «Local Devchain Server» porque no se trata de una red principal (mainnet) o de prueba (testnet). Ahora deberías ver esto:
    moralis web server
  4. Ahora pon el nombre que quieras darle a tu servidor. Seleccione su región (si no vio su región, puede poner cualquier región más cercana a usted), luego haga clic en Eth (LocalDevChain) y, finalmente, haga clic en «Agregar instancia». Ahora debería ver esto en su tablero:
    moralis ganache server
  5. Para verificar la configuración del servidor en Moralis, haga clic en ver detalles, y ahora debería ver una ventana emergente similar a esta:
    Moralis ganache server details

¡Hemos terminado! Ahora, veamos cómo integrarlo en nuestro software.

Integrar Moralis

Para que esto funcione, vaya a su archivo App.js, que es el archivo que representa todo su componente en Next.js, y edite su código para que quede así:

import '../styles/globals.css'
import {MoralisProvider} from "react-moralis"
function MyApp({Component, pageProps}) {
  return(

    <MoralisProvider
    appId='4VKOzQbGEkUuHkw9kp2eRJdZGa4yUuLS6FgTPoao'
    serverUrl='https://whhkyzq4kz2e.usemoralis.com:2053/server'>
      {
        <Component {...pageProps} />
      }
    </MoralisProvider>
    );
  }

export default MyApp

Aquí, envolvimos todo el componente con MoralisProvider. MoralisProvider toma los argumentos appId y severUrldel servidor Moralis que se creó en el paso anterior. Debe copiar «appId» y «serverUrl» de su servidor Moralis creado y pegarlos en su archivo App.js. Para implementar la autenticación de usuario, edite su archivo Login.js para que se vea así:

import styles from "../styles/Login.module.css";
import Image from "next/image";
import icon from "./images/moralis-logo.svg";
import {useMoralis}from "react-moralis";

function Login() {
    const {authenticate, authError} = useMoralis();
    return (
      <div className={styles.login_container}>
        <div className={styles.login_card}>
          <Image src={icon} width={100} height={100}/>
          <div className={styles.sign_in_container}>
          <button onClick={authenticate}>Login with Moralis</button>
          </div>
        </div>
      </div>
    );
}
export default Login;

Después de eso, vaya a su terminal y ejecute los siguientes comandos:

npm i magic-sdk --save
npm i @walletconnect/web3-provider --save
npm i @web3auth/web3auth --save

El siguiente y más importante paso es instalar la extensión Metamask en su navegador. Una vez que ejecute el código con npm run dev como anteriormente, debería poder obtener algo como esto al pulsar sobre el botón de login (sino lo tiene ya, MetaMask le pedirá que cree cuenta y guarde sus frases de recuperación):

web3-nextjs-react-moralis-auth-metamask

Manejo de errores

Supongamos que hay un error con la aplicación y desea que se muestre en la página de inicio de sesión. Para hacer esto, debe editar su archivo Login.js de esta manera:

import styles from "../styles/Login.module.css";
import Image from "next/image";
import icon from "./images/moralis-logo.svg";
import {useMoralis}from "react-moralis";

function Login() {
    const {authenticate, authError} = useMoralis();
return (
      <div className={styles.login_container}>
        <div className={styles.login_card}>
          <Image src={icon} width={100} height={100}/>
          <div className={styles.sign_in_container}>
            {authError && (
              <p className={styles.error}>
                {authError.name}
                {authError.message}
              </p>
            )}
            <button onClick={authenticate}>Login with Moralis</button>
          </div>
        </div>
      </div>
    );
}
export default Login;

Para que los mensajes de error se vean mejor, vaya a su archivo Login.module.css y agregue el siguiente código css como la última parte del código:

.error{
    color: red;
    text-align: center;
    font-style:italic;
    margin: 5px;
}

Ahora, cuando ocurra un error en el proceso de inicio de sesión se verá así:

web3-nextjs-react-moralis-auth-error

Cerrar sesión

Ahora, digamos que un usuario ha iniciado sesión y quiere cerrar sesión. Para hacer esto, vaya a su archivo index.js y edítelo para que se vea así:

import Login from "../components/Login";
import {useMoralis} from "react-moralis";

export default function Home() {
  const {isAuthenticated, logout} = useMoralis();
  return <div>{isAuthenticated ? (
  <p>
    You are logged in
    <button onClick= {logout}>Sign Out</button>
  </p>
    ):(
    <Login/>
  )}
  
  </div>;
}

Una vez que esto esté implementado y ejecutes el código, después de iniciar sesión deberías obtener esto:

web3-nextjs-react-moralis-auth-logout

 

Conclusión

Este artículo nos enseñó cómo crear una página web de inicio de sesión Web3 usando Next.js, React y Moralis, todo esto con MetaMask como monedero y su extensión para navegadores web.

Recuerda que tienes todo el código fuente del proyecto en mi repositorio Github y la demo aquí.

 


 

Espero que el artículo «Autenticación Web3 con Next.js, React y Moralis» te haya sido de ayuda ❤️

Compartir:

Deja un comentario