​
Quickstart: Implementing Particle Auth within Web Applications

Getting started and integrating Particle Network’s Wallet-as-a-Service within your web application often takes less than five minutes.

Below is a quick rundown on installing, configuring, and facilitating social logins within a typical Next.js application. For a more in-depth explanation of each feature, go to Introduction to API & SDK overview.

1

Installing Particle Auth

Particle Auth is the primary mechanism of implementing Particle Network’s Wallet-as-a-Service and associated social authentication flow.

To install Particle Auth within your project, copy and execute the following command.

Terminal
npm install @particle-network/authkit @particle-network/wallet viem@2
2

Configuring Particle Auth

Once installed, you’re ready to configure the SDK.

Particle Auth requires three key values to be initiated: projectId, clientKey, and appId. These values fundamentally link your application with the Particle dashboard.

To retrieve these values for configuration within your application, follow these steps:

For more information on the Particle dashboard, take a look at this video or visit the dashboard quickstart.

With your projectId, clientKey, and appId retrieved, you’ll need to configure Particle Auth within your application through AuthCoreContextProvider from @particle-network/authkit, the primary React component responsible for initializing Particle Auth.

3

Configuring `AuthCoreContextProvider`

The AuthCoreContextProvider component handles the configuration for Particle Auth. It’s best practice to place this configuration in a dedicated AuthKit.tsx file within the src directory, where you can set up and export the component.

Once configured, you can use this export to wrap your main App component, ensuring authentication is available throughout your application.

Here’s an example of how to configure AuthCoreContextProvider:

Learn more about the Particle Auth configuration options in the Particle Auth SDK page.
4

Wrap your application with ParticleAuthkit

Wrap your main application component (where you use the Particle Auth hooks) with the ParticleAuthKit component, which is exported from AuthKit.

Here’s an example of how this might look in a layout.tsx file:

layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

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

import { ParticleAuthkit } from "./components/AuthKit";

export const metadata: Metadata = {
  title: "Particle Auth app",
  description: "App leveraging Particle Auth for social logins.",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ParticleAuthkit>{children}</ParticleAuthkit>
      </body>
    </html>
  );
}
5

Facilitating logins

With the SDK configured, you can move on to initiating social logins within your application. Particle Auth contains numerous relevant hooks, although we’ll specifically be focusing on useConnect, which contains a function, connect, that directly facilitates wallet creation through social login.

Upon logging in, the embedded wallet modal included with Particle Auth will be accessible through the button in the bottom right, unless otherwise specified through wallet within AuthCoreContextProvider.

page.tsx
"use client";

import { useConnect, useEthereum } from "@particle-network/authkit";

export default function Home() {
  const { connect, disconnect, connected, connectionStatus } = useConnect();
  const { address } = useEthereum();

  // Handle user login
  const handleLogin = async () => {
    if (!connected) {
      await connect({});
    }
  };

  // Handle user logout
  const handleDisconnect = async () => {
    if (connected) {
      await disconnect();
    }
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 p-24">
      <h1 className="text-4xl font-extrabold text-white mb-8">
        Build with Particle Auth
      </h1>
      <h2 className="mb-4 text-lg font-bold text-white">
        Account status: {connectionStatus}
      </h2>
      {!connected ? (
        <div className="login-section">
          <button
            className="bg-purple-600 hover:bg-purple-500 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"
            onClick={handleLogin}
          >
            Sign in with Particle
          </button>
        </div>
      ) : (
        <div className="text-center">
          <h2 className="mb-4 text-lg font-bold text-white">
            Address: {address}
          </h2>
          <button
            className="bg-purple-600 hover:bg-purple-500 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"
            onClick={handleDisconnect}
          >
            Logout
          </button>
        </div>
      )}
    </main>
  );
}

For the complete Particle Auth SDK reference, head over to the
Web (JavaScript/TypeScript) documentation. For practical examples, check out the following demo repositories:

Customization

Customizing Particle Auth.

Supported Blockchains

List of blockchains supported by Particle Auth.

Account Abstraction

Using Particle Auth to create smart accounts.

Was this page helpful?

React Native QuickstartTelegram Mini-App Quickstart