• How to Authentic𝙖te Sol𝙖na Users with the Ph𝙖ntom W𝙖llet

    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: