Moralis Guide: Login With Unstoppable
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.
info
For a completed example of a Web3 Modal application, you can download this example project.
Step 1: Install the Libraries
Install with yarn
or npm
.
yarn add @uauth/moralis react-moralis moralis
npm install --save @uauth/moralis react-moralis moralis
Step 2: Configure the moralis
Library
Next, configure the moralis
library:
// 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, AbstractConnector> = {
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: Test the Usage
Once configured, the react-moralis
library can be used normally.
warning
Important: For Login with Unstoppable integrations, users must use Polygon Mainnet or Ethereum Mainnet as the network for the domain. Domains minted on Goerli Testnet will not work with the Login feature.
import React from 'react'
import {useMoralis} from 'react-moralis'
import {uauth} from './connectors'
// On login button click...
async function handleUAuthConnect() {
const {authenticate} = useMoralis()
await authenticate(uauth)
}
Step 4: Configure the Login UI
Login with Unstoppable has UI requirements that must be configured to properly display the authenticated user's domain name after a successful login. Please follow the instructions in the Login UI Configuration Guide to complete this final step in the integration process.
Congratulations!
You just implemented Login with Unstoppable.