If users want to enter the Web3 realm and interact with a blockchain, each user must authenticate themselves using a verification tool. While most users authenticate with MetaMask when interacting with Ethereum dapps (decentralized applications), the number one wallet to authenticate Solana users with is Phantom. That’s also the case when building Web3 apps. When you decide to build Ethereum dapps, you utilize MetaMask for developers, but when creating Solana dapps, you utilize the Phantom wallet to authenticate users. Since Solana might be the primary contender to all programmable blockchains, we’ve decided to provide a straightforward authentication solution to those who want to utilize its network. Thus, follow along as we discover how to authenticate Solana users with the Phantom wallet!
In the upcoming tutorial, we will show you how to use Moralis to make Web3 development a whole lot simpler. When using Moralis’ SDK, you can save time and valuable resources. This ultimate Web3 backend platform is all about cross-chain and cross-platform interoperability. Thus, you can use this pinnacle of the current Web3 tech stack for Ethereum, EVM-compatible chains, and even Solana. Furthermore, Moralis lets you become a Web3 developer using your JavaScript or Unity proficiency.
Herein, we will use Next.js to create a Moralis dapp that will authenticate Solana users. However, before we dive into this article’s example project, let’s go through some basics. We will first explore Solana authentication and cover the basics of the Phantom wallet. Moreover, to get ready for the upcoming tutorial, create your free Moralis account!
Exploring Solana Authentication
If you are new to Web3, you might wonder, “why is it necessary to authenticate users?”. Without digging too deep into the functionality of blockchain technology, you need to know that cryptography plays a vital role in the crypto realm. Further, there needs to be some sort of gateway that determines who gets to interact with any particular chain. This is where users’ wallet addresses come into the picture.
Web3 or crypto wallets come in many forms, although primarily, they are split into two categories: hot and cold wallets. Both types of wallets store a collection of keys and are used to receive, send, and track ownership of cryptocurrencies. When creating a new wallet, a key pair of a private key and a public key is securely generated. So, a wallet provides the means to interact with these keys. Furthermore, you ought to know that public keys are usually referred to as “wallet addresses”. The word “public” suggests that these addresses can be shared and displayed freely. For instance, you’d share this address with someone when you want them to send you some SOL tokens. In addition, public addresses are also what blockchain apps use to authenticate users. As such, it is important to use a wallet that supports the chain you want to interact with.
It’s essential to point out that not all wallets support all chains. For instance, you can’t authenticate with MetaMask on Solana. When you want to explore Solana authentication options, you need to check out Solana’s ecosystem. Moreover, when it comes to using crypto wallets to authenticate users for devs, wallets that offer browser extensions are the way to go. With that said, Phantom is currently the most popular tool to authenticate Solana users.
What is the Phantom Wallet?
Phantom is one of the most popular Solana crypto wallets. It is the go-to tool to store, buy, send, and receive SPL tokens (SPL vs ERC20 tokens). Hence, it is also a tool to use to authenticate Solana users. Like MetaMask, Phantom is also available as a mobile application and a browser extension. That way, users can choose their preferred option. However, as far as developers go, using the browser extension option tends to be the right choice. Currently, Phantom supports Chrome, Brave, Firefox, and Edge:
Furthermore, these are the key aspects of Phantom:
- Non-Custodial – Phantom ensures that the team behind it never has access to any of your data or funds.
- Ledger Support – For additional security, Phantom enables you to connect your hardware (cold) wallet.
- Privacy – Phantom ensures that it doesn’t track any personally identifiable information, users’ account addresses, or asset balances.
- Biometric Authentication – With Phantom, you get to protect your assets on the go with the convenience of using your biometrics.
If you are interested in rolling up your sleeves and following our lead to take on the upcoming example project, make sure to download your Phantom wallet now. Just visit the official Phantom website (phantom.app) and follow the on-site instructions.
Authenticate Solana Users with the Phantom Wallet – Moralis and Next.js Example Project
We are happy to have you join us as we take on our example project. To get the most out of the following sections, we encourage you first to read the content and then go through it again, only this time to take action yourself. We will use Phantom, Moralis, and Visual Studio Code (VSC) as tools. As such, we recommend getting these tools ready before moving forward.
Authenticate Solana Users – The Initial Project Setup
We will start our example project by creating a new Next.js application. To do this, use your terminal window and type in “npx create-next-app [project name]“:
Once all dependencies are installed, we can clear the terminal. Then, we navigate to the previously created folder (project name) using “cd” and open it in VSC:
Now that we are inside VSC, we want to clean up our project folder by deleting some of the files and subfolders that we don’t need. As such, we go ahead and delete the “styles” and the “api” (inside “pages”) folders. Next, we open the “app.js” file and delete the top “import” line:
The above screenshot shows what our project structure looks like at this stage. As far as the “_app.js” and the “index.js” files go, this is what we want to start with:
With the initial project setup completed, we want to ensure that our Next.js app is running smoothly. As such, we use VSC’s terminal to run it:
Hence, we can now use our browser and paste in the above URL to preview our app locally:
Getting Started with Moralis
Now that our Next.js app (in its initial form) is running properly, it’s time to complete the initial Moralis setup. At this point, you probably have your free Moralis account ready. So, log in to your Moralis admin area by entering your credentials:
However, in case you haven’t created your free Moralis account yet, do so now. As a new user, you will see this screen once inside your admin area:
Follow the instructions and click on “+ Create a new Server”. From the drop-down menu, select the “Testnet Server” option:
Next, enter your server’s details. The name can be anything you want. Select the location closest to you and click on the chain you prefer (we are going with Rinkeby, one of the Ethereum testnets). Finally, spin up your server with the “Add Instance” button:
It won’t take long before your server is up and running. Then you get to access its details via the “View Details” button:
The Key to Authenticate Solana Users Easily – Connecting to Moralis’ SDK
To connect the Moralis backend with the above-created Next.js app, we must paste the above details into our code. However, we must first install “react-moralis” using VSC’s terminal:
Next, we open the “_app.js” file and import the above-installed component. We do this with the “import {MoralisProvider} from ‘react-moralis’” line of code:
Then, we wrap our component inside “MoralisProvider”:
We must also create “appId” and “serverURL” props to store our server’s details. However, instead of directly pasting the values inside the “_app.js” file, we want to show you a cleaner option that offers more consistency. As such, we create a new file, “.env.local”, where we store our environment variables:
Note: Make sure to use your server’s details, not the ones displayed in the image above.
Finally, we must point “appId” and “serverUrl” to the variables inside “.env.local”:
Nonetheless, we must also load the variables into our application using the “npm run dev” command inside VSC’s terminal:
Note: If the console returns a warning regarding the need to install the “Web3Connector” package, you can ignore it. We will not need this package for the sake of our tutorial.
The Code to Authenticate Solana Users
Now that we’ve successfully completed the initial setup and connected our app to the Moralis SDK, we can create our dapp. Let’s remind you that the main purpose of this tutorial is to show you how to authenticate Solana users. Thus, we will keep things simple and stick to pretty basic UI styling. So, to cover the logic related to our dapp’s Web3 authentication, we will use the “index.js” file.
First, we check for any authenticated users. Fortunately, the “useMoralis” hook makes this as straightforward. It enables us to use the “isAuthenticated” method. Moreover, if users are not authenticated, we want them to see the “Auth” button. However, we want authenticated users to see the “Welcome” message.
In order to give the “Auth” button the actual power to authenticate Solana users, we get to use Moralis’ “authenticate” method. We use “sol” in this method, informing it to focus on Solana. The latter ensures that users’ Web3 wallets are prompted when they click the button.
Here’s the entire code we use in the “index.js” file:
import {useMoralis} from “react-moralis”
export default function Home() {
const {
isAuthenticated,
authenticate
} = useMoralis()
if(!isAuthenticated) {
return(
<button onClick={() => authenticate({
type: “sol”
})}>Auth</button>
)
}
return (
<div>
<p>Welcome</p>
</div>
)
}These few simple lines of code give our “Auth” button the power to authenticate Solana users using the Phantom wallet. Let’s do a quick demo that will show you this feature in action.
Our Dapp – Preview
So, if we return to “localhost”, we can test our dapp. We start by clicking on the “Auth” button, which triggers our Phantom extension:
Since our wallet is locked, we must first enter our password and click on the “Unlock” button. As soon as we do this, Phantom prompts us with a signature request. The latter was initiated by our click on the “Auth” button:
Once we approve the above signature request, our example dapp greats us with the “Welcome” message:
Taking Solana Programming Further
If you enjoyed the above example project and want to take things further, we recommend watching the video below. There, you’ll have a chance to look over the shoulders of a Moralis expert taking on a more advanced project. He will first show you how to create a Solana token in minutes. Then, the expert will show you how to build a Solana token dashboard. Also, you will use React if you take on the example project below. Along the way, you’ll get to use and practice the skills acquired from this tutorial!
How to Authenticate Solana Users with the Phantom Wallet – Summary
Today, you learned everything there is to know about how to authenticate Solana users. You now know that you can have your Solana dapp running in minutes by using the Phantom wallet and Moralis. Furthermore, you also had a chance to take your Solana programming further. As such, you might have created your own SPL token and a Solana token dashboard. Nonetheless, you can use the knowledge acquired from this article to develop killer dapps on other popular chains. Of course, if you decide to focus on Ethereum or other EVM-compatible chains, you’ll be using MetaMask instead of Phantom. So, in case you want to explore other blockchain development tutorials, make sure to visit the Moralis YouTube channel and the Moralis blog.
Aside from various example projects, these two outlets also provide you with simple explanations of various crypto topics. Hence, they may serve as a source of your continuous free blockchain development education. For instance, some of the latest topics include a Solidity smart contracts tutorial, a decentralized Twitter, a Web3 game that enables players to buy NFTs in-game, an EIP 1559 example, the full decentralized finance guide, how to mint game assets as NFTs, building a decentralized autonomous organization (DAO), creating your own metaverse, and all you need to know about a BNB NFT. However, if you are determined to become a blockchain developer with confidence, you should consider taking a more professional approach. Therefore, enrolling in Moralis Academy might be the right path for you.
