Part 2 - Social login via Particle Auth

This 2-part tutorial will guide you through integrating with Bastion SDK in your Next.js app through Metamask and using social login via Particle Auth.

This is Part 2 of the tutorial.

Note: You can find the complete code for this app in this Github repo.

Prerequisites

1. Node.js and npm installed

2. Basic understanding of Next.js and React

3. A Bastion account for API key

4. A Particle Network account

5. IMP - You should've finished Part 1 of this tutorial

What are Social Logins and MPC?

Social logins have become a popular way to authenticate users and manage private keys without passwords or secret recovery phrases, which are cumbersome. They allow you to leverage your existing accounts on platforms like Facebook, Google, Twitter, etc., to log into crypto apps and services.

MPC (multi-party computation) splits a private key into shares across multiple servers. This protects the key even if some servers are compromised.

Bastion SDK can be natively integrated with several MPC providers such as Particle Auth, web3 auth, amongst others. This part of the tutorial focuses on Particle Auth.

Step 1: Get Particle Network Credentials

1. Go to the Particle Network Dashboard.

2. Create a new project and navigate to the API section.

3. Generate a new API key and note down the projectId, clientKey, and appId.

Step 2: Add Environment Variables

Add the additional required environment variable to .env.local file at the root of your Next.js project. It should now look like this

NEXT_PUBLIC_PARTICLE_PROJECT_ID=your_project_id
NEXT_PUBLIC_PARTICLE_CLIENT_KEY=your_client_key
NEXT_PUBLIC_PARTICLE_APP_ID=your_app_id
NEXT_PUBLIC_BASTION_API_KEY=your_bastion_api_key

Replace the placeholder values with your actual Particle Network and Bastion API keys.

Step 3: Implement Particle Auth and Bastion in Next.js

Now, add the following code to the file pages/index.tsx

// pages/index.tsx

import { useState } from "react";
import { ethers } from "ethers";
import { Bastion } from "bastion-wallet-sdk";
import { ParticleNetwork } from "@particle-network/auth";
import { ParticleProvider } from "@particle-network/provider";

export default function Home() {
  // Existing state variables
  
  // Existing login with Metamask function

  
	const loginWithParticleAuth = async () => {
		try {
			const particle = new ParticleNetwork({
				projectId: process.env.NEXT_PUBLIC_PARTICLE_PROJECT_ID as string,
				clientKey: process.env.NEXT_PUBLIC_PARTICLE_CLIENT_KEY as string,
				appId: process.env.NEXT_PUBLIC_PARTICLE_APP_ID as string,
				chainName: "arbitrum",
				chainId: 421613,
			});

			const userInfo = await particle.auth.login();
			const particleProvider = new ParticleProvider(particle.auth);
			const tempProvider = new ethers.providers.Web3Provider(particleProvider, "any");
			const address = await tempProvider.getSigner().getAddress();
			setAddress(address);

			const bastion = new Bastion();
			const bastionConnect = await bastion.bastionConnect;

			await bastionConnect.init(tempProvider, {
				privateKey: "", // Add as needed
				rpcUrl: "", // Add as needed
				chainId: 421613,
				apiKey: process.env.NEXT_PUBLIC_BASTION_API_KEY || "",
			});

			setBastionConnect(bastionConnect);
		} catch (e) {
			console.error(e);
		}
	};
	
	return (
		<div>
			{address ? (
				<div>
					<h1>Welcome to Bastion!</h1>
					<h4>Logged in as {address}</h4>
					{isMinting && <h3>Minting...</h3>}
					{userOpHash && <h3>Minted NFT! User Operation Hash: {userOpHash}</h3>}
					<button onClick={mintNFT} className="rounded-2 bg-gradient-to-r from-[#6C1EB0] to-[#DE389F] mx-4 my-4 px-10 py-4 h-full rounded-xl">
						Mint NFT
					</button>
				</div>
			) : (
				<div>
					<h1>Welcome to Bastion!</h1>
					<button onClick={loginWithParticleAuth} className="rounded-2 bg-gradient-to-r from-[#6C1EB0] to-[#DE389F] mx-4 my-4 px-10 py-4 h-full rounded-xl">
						Login with Particle Auth
					</button>
					<button onClick={loginWithMetamask} className="rounded-2 bg-gradient-to-r from-[#6C1EB0] to-[#DE389F] mx-4 my-4 px-10 py-4 h-full rounded-xl">
						Login with Metamask
					</button>
				</div>
			)}
		</div>
	);
}

Step 4: Test Your Application

Run your Next.js app:

npm run dev

Navigate to http://localhost:3000 and click on the "Login with Particle Auth" button. Follow the Particle Auth login procedure, and you should see your Ethereum address displayed on the screen, indicating a successful login.

That's it! You've successfully integrated Particle Auth with the Bastion SDK in a Next.js application. You can now proceed to build more complex functionalities into your decentralized application.