Implementing Particle's Wallet-as-a-Service within Web Applications

(est. time: less than 5 minutes)

Particle's Wallet-as-a-Service has over 32 SDKs, many of which are specific to integration within web applications. Particle Auth and Particle Connect both have extensive web support, as web is usually the most popular platform for implementing these SDKs. Getting started and integrating Particle Network's Wallet-as-a-Service within your web application often takes less than five minutes or 20 lines of code. This is due to a core focus on developer experience and fundamental abstraction of complexity, resulting in a simple implementation flow.

Below is a quick rundown on installing, configuring, and facilitating social logins within your web application. For a more in-depth rundown, go to Introduction to API & SDK overview.

‎

Installing WaaS-related libraries

Currently, Particle Network has roughly seven core web SDKs across Particle Auth, Particle Connect, and the Particle AA SDK. To understand which SDK may be most relevant to you and the application you're building, see the table below:

‎

Configuring Particle Auth

The specifics of configuration deviate somewhat depending on whether you're using Particle Auth or Particle Auth Core, although universally, across all SDKs and platforms, three values are always required: projectId, clientKey, and appId. These values fundamentally link your application with the Particle dashboard, enabling customization, analytics, tracking, etc.

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

1. Sign up/log in to the Particle dashboard.

‎

‎

‎

‎

‎

‎

2. Create a new project or enter an existing project.

‎

‎

‎

‎

‎

‎

3. Create a new web application, or skip this step if you already have one.

‎

‎

‎

‎

‎

4. Retrieve the project ID (projectId), the client key (clientKey), and the application ID (appId).

‎

‎

‎

‎

‎

‎

‎

‎

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

With your projectId, clientKey, and appId retrieved, you'll need to configure Particle Auth within your application according to the SDK you're using. For Particle Auth, a new instance of ParticleNetwork can be created for central control over the whole SDK, including facilitating social logins. To initialize ParticleNetwork, use a snippet similar to the example below:

import { ParticleNetwork } from '@particle-network/auth';

const particle = new ParticleNetwork({
    projectId: process.env.REACT_APP_PROJECT_ID,
    clientKey: process.env.REACT_APP_CLIENT_KEY,
    appId: process.env.REACT_APP_APP_ID,
    chainName: 'Ethereum',
    chainId: 5, // Goerli
    wallet: { displayWalletEntry: true },
  });

Or, more likely, if you're using the new Auth Core SDK and configuring your application through AuthCoreContextProvider (imported from @particle-network/auth-core-modal), which wraps your primary React component within the index file, you can follow a structure such as the one below:

import { AuthCoreContextProvider } from '@particle-network/auth-core-modal';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <AuthCoreContextProvider
      options={{
        projectId: process.env.REACT_APP_PROJECT_ID,
        clientKey: process.env.REACT_APP_CLIENT_KEY,
        appId: process.env.REACT_APP_APP_ID,
        wallet: {
          visible: true,
        },
      }}
    >
      <App />
    </AuthCoreContextProvider>
  </React.StrictMode>
)

‎

Facilitating logins

With the SDK configured, you can move on to initiating social logins within your application. Once again, this will deviate between Particle Auth and Particle Auth Core, but the general idea remains the same: If you're using Particle Auth, social login can be requested through the same instance of ParticleNetwork that was recently configured, such as with:

await particle.auth.login({authType}); // authType can be 'google', 'twitter', 'email', 'github', 'facebook', etc.

If you're using Particle Auth Core, you can use connect from the useConnect hook imported from @particle-network/auth-core-modal. Doing so looks like this:

import { useConnect } from '@particle-network/auth-core-modal';
import { X1Testnet } from '@particle-network/chains';

const { connect } = useConnect();

await connect({
	socialType: authType, // authType can be 'google', 'twitter', 'email', 'github', 'facebook', etc.
	chain: X1Testnet,
});

‎

📘

The complete Web SDK reference is available at Web (JavaScript/TypeScript)