Edit this page

Moralis Guide: Unstoppable Login

This is the basic installation guide for the moralis library and is best used for single page applications (SPAs). For more information about this library, please see the associated github repo.

Step 1: Install the Libraries

Install with yarn or npm.

yarnnpm
Copy
Copied
yarn add @uauth/moralis react-moralis moralis
Copy
Copied
npm install --save @uauth/moralis react-moralis moralis

Step 2: Configure the moralis Library

Next, configure the moralis library:

Copy
Copied
// connectors.ts

import { UAuthMoralisConnector } from "@uauth/moralis";

// Instantiate your other connectors.
export const injected = {};

export const walletconnect = { provider: "walletconnect" };

UAuthMoralisConnector.setUAuthOptions({
  clientID: process.env.REACT_APP_CLIENT_ID!,
  redirectUri: process.env.REACT_APP_REDIRECT_URI!,
  fallbackIssuer: process.env.REACT_APP_FALLBACK_ISSUER!,

  // Scope must include openid and wallet
  scope: "openid wallet",
  // Injected and walletconnect connectors are required
  connectors: { injected, walletconnect },
});

export const uauth = { connector: UAuthMoralisConnector };

const connectors: Record<string, any> = {
  injected,
  walletconnect,
  uauth,
};

export default connectors;
info

Because pop-ups are a more integration friendly approach, the @uauth/moralis library now uses them by default. If you want the "old" redirect functionality, you need to set shouldLoginWithRedirect: true in the options passed to setUAthOptions() and create a callback page.

Step 3: Unstoppable Login

Once configured, the react-moralis library can be used normally.

warning

Unstoppable Login can be integrated with any EVM-compatible DApp (as well as Solana DApps). However, domains minted on testnets (e.g. Amoy or Sepolia) are not supported.

Copy
Copied
import React from "react";
import { useMoralis } from "react-moralis";
import { uauth } from "./connectors";

// On login button click...
async function handleLogin() {
  const { authenticate } = useMoralis();

  await authenticate(uauth);
}

// On logout button click...
async function handleLogout() {
  const { logout } = useMoralis();

  logout();
}
Congratulations!

You have implemented Unstoppable Login with Moralis.

Next to Display the User's Domain