;
}
};
# 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](/social-logins/auth/introduction).
***
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.
```bash yarn theme={null}
yarn add @particle-network/authkit @particle-network/wallet viem@2
```
```bash npm theme={null}
npm install @particle-network/authkit @particle-network/wallet viem@2
```
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](https://dashboard.particle.network/).
To retrieve these values for configuration within your application, follow these steps:
Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network/)
For more information on the Particle dashboard, take a look at [this video](https://www.youtube.com/watch?v=d7DYCMNDmjo\&ab_channel=ParticleNetwork) or visit the [dashboard quickstart](/social-logins/dashboard).
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.
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](/social-logins/auth/desktop-sdks/web).
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:
```tsx layout.tsx theme={null}
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 (
{children}
);
}
```
With the SDK configured, you can move on to initiating social logins within your application. Particle Auth contains [numerous relevant hooks](https://github.com/Particle-Network/particle-auth-ethers-demo/blob/7cf947b6c8a05731f285821b03134a6317e0e53f/particle-next-starter/src/app/page.tsx#L23), 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`.
```tsx page.tsx theme={null}
"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 (
Build with Particle Auth
Account status: {connectionStatus}
{!connected ? (
) : (
Address: {address}
)}
);
}
```
For the complete Particle Auth SDK reference, head over to the\
Web (JavaScript/TypeScript) documentation.
For practical examples, check out the following demo repositories:
