How to Add Google Authentication to Your MultiversX Web3 App

From the exquisite penmanship of Andrei Budoi 

Simplifying Web3 Access with Google Accounts

The New Frontier of Web3

In the rapidly evolving world of Web3, integrating user-friendly features is key to attracting a diverse audience. Web3, the next generation of the internet, promises decentralized and blockchain-based experiences. However, its complexity often poses a challenge for widespread adoption, especially in industries like gaming and social finance (SoFi), where ease of use is crucial.

Enter xAlias: A Game-Changer for Easy Onboarding

Recently, MultiversX has introduced a revolutionary tool called xAlias, transforming how new users interact with blockchain technology. With xAlias, creating a blockchain wallet is now as simple as a click, using your Google Account. This innovation eliminates the need for users to understand seed phrases or the intricacies of blockchain wallets. It’s a seamless bridge for those new to blockchain, allowing them to dive straight into your product’s offerings.

The Appeal of Google Login in Web3

Google Login acts as a single sign-on solution, tailored for Web3 applications. It’s designed for users who might not be familiar with blockchain or wallets yet. What’s more, it’s non-custodial and can be integrated into a ‘real’ wallet like xPortal later. This approach not only simplifies the user experience but also maintains the integrity and security of blockchain technology.

How to Integrate Google Auth with xAlias in Your MultiversX DApp

Step-by-Step Tutorial for Developers

Here’s a straightforward guide for developers to integrate xAlias with a MultiversX DApp:

1. Initialize Your App: Start by setting up a React or Next.js application.
2. Install the SDK: Use npm install @multiversx/sdk-dapp or yarn add @multiversx/sdk-dapp to add the MultiversX SDK to your project.
3. Configure the SDK: Implement the SDK in your application with proper configurations for your environment (devnet, testnet, or mainnet).

    import { AxiosInterceptorContext } from '@multiversx/sdk-dapp/wrappers/AxiosInterceptorContext/AxiosInterceptorContext';
    import { DappProvider } from '@multiversx/sdk-dapp/wrappers/DappProvider/DappProvider';
    import { TransactionsToastList } from '@multiversx/sdk-dapp/UI/TransactionsToastList/TransactionsToastList';
    import { NotificationModal } from '@multiversx/sdk-dapp/UI/NotificationModal/NotificationModal';
    import { SignTransactionsModals } from '@multiversx/sdk-dapp/UI/SignTransactionsModals/SignTransactionsModals';
    import { AuthenticatedRoutesWrapper } from '@multiversx/sdk-dapp/wrappers/AuthenticatedRoutesWrapper/AuthenticatedRoutesWrapper';
    
    import { environment, walletConnectV2ProjectId } from 'config';
    
    <AxiosInterceptorContext.Provider>
        <AxiosInterceptorContext.Interceptor>
            <DappProvider
                environment={environment} // 'devnet' | 'testnet' | 'mainnet'
                customNetworkConfig={{
                    apiTimeout: 6000,
                     walletConnectV2ProjectId // Generate your own WalletConnect 2 ProjectId here: https://cloud.walletconnect.com/app
          }}
        >
        <AxiosInterceptorContext.Listener>
                 <TransactionsToastList />
                 <NotificationModal />
                 <SignTransactionsModals />
                    {yourApp}
                </AxiosInterceptorContext.Listener>
            </AxiosInterceptorContext.Interceptor>
        </AxiosInterceptorContext.Provider>

4. Add a Login Page: Incorporate the xAlias login button into your application.

import { XaliasLoginButton } from '@multiversx/sdk-dapp/UI/webWallet/XaliasLoginButton/XaliasLoginButton';

<XaliasLoginButton
  loginButtonText='xAlias'
  nativeAuth
	callbackRoute='/back-to-your-app'
/>

5.Customize the xAlias Login Logic: Tailor the login logic to fit the specific needs of your application.

    import type { NativeAuthConfigType } from '@multiversx/sdk-dapp/types';
    import { useXaliasLogin } from '@multiversx/sdk-dapp/hooks/login/useXaliasLogin'
    
    import { environment, walletConnectV2ProjectId } from 'config';
    
    const network = {
      devnet: {
        xAliasAddress: 'https://devnet.xalias.com'
      },
      testnet: {
        xAliasAddress: 'https://testnet.xalias.com'
      },
      mainnet: {
        xAliasAddress: 'https://xalias.com'
      }
    };
    
    type XAliasLoginProps = {
      callbackRoute?: string;
      nativeAuth?: NativeAuthConfigType | boolean;
    };
    
    const XAliasLogin = ({ nativeAuth, callbackRoute }: XAliasLoginProps) => {
      const [onInitiateLogin] = useXaliasLogin({
        callbackRoute,
        nativeAuth,
            customWalletAddress: network[environment].xAliasAddress
      });
    
      return <button onClick={onInitiateLogin}>xAlias login</button>;
    };

Related Resources for Further Exploration

1. MultiversX DApp SDK.
2. MultiversX Template DApp
3. MultiversX Template DApp for Next.js