Revolutionize dApp Onboarding: Seamlessly Build on Morph with Privy SDK

Introduction

Unlock the full potential of Morph by seamlessly integrating the Privy SDK. Picture this: you can make user onboarding in your dApp a breeze with options like social logins, email sign-ups, and Google Sign-In—those familiar, Web2-friendly methods that everyone appreciates. When Morph teams up with Privy, developing decentralized applications becomes not just easier, but genuinely intuitive and smooth. It’s all about making the experience better for users while keeping things efficient for developers.

You get the best of Privy’s embedded wallet system on Morph, meaning:

• Onboard users with email, sms and social for your app.

• Link multiple social profiles to a given Morph account.

• Generate (or pregenerate) self-custodial Morph wallets for your users.

• Leverage Privy UIs or fully customize signature generation for their wallets.

Prerequisite

• A working Next.js project. You can clone this create-next-app template to follow along in this tutorial.

• Project Structure:

•   morph-privy/
    ├── .next/
    ├── app/
    │   ├── Components/
    │   │   ├── auth/
    │   │   │   ├── AuthStatus.tsx
    │   │   │   ├── UserProfile.tsx
    │   │   ├── providers/
    │   │       ├── PrivyProvider.tsx
    │   ├── fonts/
    │   ├── public/
    │   ├── favicon.ico
    │   ├── globals.css
    │   ├── layout.tsx
    │   ├── page.tsx
    ├── node_modules/
    ├── .env.example
    ├── .env.local
    ├── .eslintrc.json
    ├── .gitignore
    ├── next-env.d.ts
    ├── next.config.ts
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.mjs
    ├── README.md
    ├── tailwind.config.ts
    ├── tsconfig.json
  

• An appID from the Privy developer console

  Getting Started

  The cloned template is a simple Next.js Privy Auth Starter template setup for Morph Holesky Testnet with three main core files:

• AuthStatus.tsx: Checks auth status for authenticated or not.

• UserProfile.tsx: This is the page users are redirected to after logging in.

• PrivyProvider.tsx: It handles about login method and defaultChain: (ex morphHolesky), supportedChains etc.

• Layout.tsx: this file handles the initialization of Privy SDK and wraps our components with a PrivyProvider.

• .env.local or .env.example: Your_Privy_API_ID_Goes_Here

  Installation

• To make use of Privy in your dApp, you must install the required libraries and SDK first. Hence, you'll need to set up ethers.js, and the Privy React Auth SDK. You can use Privy together with either ethers.js, web3.js, viem libraries to communicate with the Morph blockchain. For ease of use just run

npm install

Initializing Privy and Privy Provider

After successfully installing the needed libraries, setup the PrivyProvider.tsx

To do so, open up the PrivyProvider.tsx file and paste the code below:

'use client';

import { PrivyProvider as Provider } from '@privy-io/react-auth';
import { holesky, mainnet, morphHolesky, sepolia } from 'viem/chains';

interface PrivyProviderProps {
  children: React.ReactNode;
}

export default function PrivyProvider({ children }: PrivyProviderProps) {
  return (
    <Provider
      appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!}
      config={{
        loginMethods: ["wallet", "google"],
        appearance: {
          theme: 'light',
          accentColor: '#676FFF',
          showWalletLoginFirst: false,
          logo: 'https://morph.ghost.io/content/images/2024/09/Morph.logo_Horizontal_Green.png',
        },
         // Create embedded wallets for users who don't have a wallet
         embeddedWallets: {
          createOnLogin: 'users-without-wallets',
        },
        defaultChain: morphHolesky,
        supportedChains: [morphHolesky, sepolia, mainnet, holesky]
      }}
    >
      {children}
    </Provider>
  );
}

It’s important to note that the Privy provider takes the following properties:

• Your appID, which needs to be updated in your .env file.

•   NEXT_PUBLIC_PRIVY_APP_ID= *Enter your App ID -> https://dashboard.privy.io/*
  

• An optional onSuccess callback which will execute once a user successfully logs in.

• You can customize loginMethods: ["wallet", "google"] as you want,

• An optional config property to customize your onboarding experience.

Wrap Privy Provider

// This remains a server component
import PrivyProvider from '@/app/Components/providers/PrivyProvider';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="bg-white">
        <PrivyProvider>
          {children}
        </PrivyProvider>
      </body>
    </html>
  );
}

Connecting Wallet & Disconnecting Wallet

This in AuthStatus.tsx calls the login method which opens the Privy login modal and prompts the user to login.

'use client';

import { usePrivy } from '@privy-io/react-auth';

export default function AuthButton() {
  const { login, logout, authenticated, ready } = usePrivy();

  if (!ready) return null;

  return (
    <button
      onClick={authenticated ? logout : login}
    >
    <p className='bg-green-700 text-white rounded-lg p-5'>  {authenticated ? 'Disconnect' : 'Connect Wallet'}</p>
    </button>
  );
}

Logged in

After successfully logging in, the user is redirected to a page displaying their wallet address in UserProfile.tsx

'use client';

import { usePrivy } from '@privy-io/react-auth';

export default function UserProfile() {
  const { user, ready } = usePrivy();

  if (!ready) return null;

  return user ? (
    <div className="p-6 rounded-lg shadow text-center font-bold text-green-400 text-3xl">
      <p className='m-5'>Wallet Address: {user.wallet?.address}</p>
      {user.email && <p>Email: {String(user.email)}</p>}
    </div>
  ) : null;
}

Next Steps

We’ve already implemented an increment-decrement counter and integrated wallet functionality using the RainbowKit SDK with Morph. Feel free to check it out

[Click here]

and For detailed guidance on using Privy, explore the Privy Docs and the Privy GitHub repository. Additionally, the full implementation of the code for this guide is available on GitHub here.