# Using social login

Social logins like Google, Facebook, X, Discord etc, can be used to create wallet for users and use the signer provided by them

There are services like [**Web3Auth**](https://web3auth.io/docs/index.html) and [**Particle**](https://docs.particle.network/developers/auth-service)[ **Auth**](https://docs.particle.network/developers/auth-service) that provides the functionality of creating ethereum wallets using social login.

1. Particle Auth

Particle Auth is dedicated to simplifying the transition of Web2 users into the Web3 environment by providing them with familiar login options. This means that users can access your dApp using well-known methods such as Google, Apple ID, Facebook, Twitter, and various other social platforms. Additionally, they have the option to log in using their email address or mobile number without the need for a password.

### Step 1: Include Particle Network SDK Script

Download Particle Network SDK to your project via Yarn

```bash
yarn add @particle-network/auth

//if you need support evm-chains
yarn add @particle-network/provider

//if you need support solana chain
yarn add @particle-network/solana-wallet

```

```html
browser

<script src="https://static.particle.network/sdks/web/auth/1.2.1/auth.min.js"></script>
<!-- Optional: Add EVM Chains suport -->
<script src="https://static.particle.network/sdks/web/provider/1.2.0/provider.min.js"></script>
<!-- Optional: Add Solana Chain suport -->
<script src="https://static.particle.network/sdks/web/solana-wallet/1.0.2/solana-wallet.min.js"></script>
```

### Step 2: Setup Developer API Key

Before you can add Auth Service to your app, you need to create a Particle project to connect to your app. Visit [Particle Dashboard](https://0xgaslesss-organization.gitbook.io/0xgasless-sdk-docs/getting-started/broken-reference) to learn more about Particle projects and apps.

[👉 Sign up/log in and create your project now](https://dashboard.particle.network/#/login)

[👉 chainId and chainName configs](https://0xgaslesss-organization.gitbook.io/0xgasless-sdk-docs/getting-started/broken-reference)

<pre class="language-typescript"><code class="lang-typescript">import { ParticleNetwork, WalletEntryPosition } from "@particle-network/auth";
import { ParticleProvider } from "@particle-network/provider";
import { SolanaWallet } from "@particle-network/solana-wallet";
import { Ethereum } from "@particle-network/chains";
import Web3 from "web3";

const particle = new ParticleNetwork({
  projectId: "xx",
  clientKey: "xx",
  appId: "xx",
  chainName: Ethereum.name, //optional: current chain name, default Ethereum.
  chainId: Ethereum.id, //optional: current chain id, default 1.
  wallet: {   //optional: by default, the wallet entry is displayed in the bottom right corner of the webpage.
    displayWalletEntry: true,  //show wallet entry when connect particle.
    defaultWalletEntryPosition: WalletEntryPosition.BR, //wallet entry position
    uiMode: "dark",  //optional: light or dark, if not set, the default is the same as web auth.
    supportChains: [{ id: 1, name: "Ethereum"}, { id: 5, name: "Ethereum"}], // optional: web wallet support chains.
<strong>    customStyle: {}, //optional: custom wallet style
</strong>  },
  securityAccount: { //optional: particle security account config
    //prompt set payment password. 0: None, 1: Once(default), 2: Always
    promptSettingWhenSign: 1,
    //prompt set master password. 0: None(default), 1: Once, 2: Always
    promptMasterPasswordSettingWhenLogin: 1
  },
});

const particleProvider = new ParticleProvider(particle.auth);
//if you need support solana chain
const solanaWallet = new SolanaWallet(particle.auth);

//if you use web3.js
window.web3 = new Web3(particleProvider);
window.web3.currentProvider.isParticleNetwork // => true

//if you use ethers.js
import { ethers } from "ethers";
const ethersProvider = new ethers.providers.Web3Provider(particleProvider)
</code></pre>

Use this `ethersProvider while initalizaing the 0xGasless SDK.`&#x20;

```javascript
const address = await client.init(ethersProvider, options);
```

Then follow the same instructions as given in the other modules.

2. ### Web3Auth

Similarly, Web3Auth simplifies the onboarding process for both mainstream and crypto-native users within minutes. It offers a seamless experience, supporting OAuth-based login systems, and works seamlessly on web and mobile platforms for your users.

#### 1. Install Web3Auth[​](https://web3auth.io/docs/quick-start?product=Plug+and+Play\&sdk=Plug+and+Play+Web+Modal+SDK\&platform=React#1-install-web3auth) <a href="#id-1-install-web3auth" id="id-1-install-web3auth"></a>

Install the Web3Auth package in your React project.

```
npm install --save @web3auth/modal
```

#### 2. Get your Client ID from the Web3Auth Dashboard[​](https://web3auth.io/docs/quick-start?product=Plug+and+Play\&sdk=Plug+and+Play+Web+Modal+SDK\&platform=React#2-get-your-client-id-from-the-web3auth-dashboard) <a href="#id-2-get-your-client-id-from-the-web3auth-dashboard" id="id-2-get-your-client-id-from-the-web3auth-dashboard"></a>

Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io/) and create a new project. Use the Client ID of the project to start your integration.

#### 3. Initialize Web3Auth for your preferred blockchain[​](https://web3auth.io/docs/quick-start?product=Plug+and+Play\&sdk=Plug+and+Play+Web+Modal+SDK\&platform=React#3-initialize-web3auth-for-your-preferred-blockchain) <a href="#id-3-initialize-web3auth-for-your-preferred-blockchain" id="id-3-initialize-web3auth-for-your-preferred-blockchain"></a>

Web3Auth needs to be initialized as soon as your app loads up to enable the user to log in. Preferably done within a constructor, initialization is the step where you can pass on all the configurations for Web3Auth you want. A simple integration for some of the popular blockchains will look like this:

* Ethereum
* Polygon
* Solana
* Other Chains

```javascript
import { Web3Auth } from "@web3auth/modal";

// Initialize within useEffect()
const web3auth = new Web3Auth({
  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // Get your Client ID from the Web3Auth Dashboard
  web3AuthNetwork: "sapphire_mainnet", // Web3Auth Network
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
    displayName: "Ethereum Mainnet",
    blockExplorer: "https://goerli.etherscan.io",
    ticker: "ETH",
    tickerName: "Ethereum",
  },
});

await web3auth.initModal();
```

#### 4. Login your User[​](https://web3auth.io/docs/quick-start?product=Plug+and+Play\&sdk=Plug+and+Play+Web+Modal+SDK\&platform=React#4-login-your-user) and get the Provider <a href="#id-4-login-your-user" id="id-4-login-your-user"></a>

Once you're done initializing, just create a button that triggers to open the login modal for the user on their request. Logging in is as easy as:

```javascript
 const web3authProvider  = await web3auth.connect();

//if you use ethers
import { ethers } from "ethers";
const ethersProvider = new ethers.providers.Web3Provider(web3authProvider)

```

After getting web3auth provider, initalize the 0xGasless SDK.

```javascript
const address = await client.init(ethersProvider, options);
```

Then follow the steps to send transaction as per your requirement.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://0xgaslesss-organization.gitbook.io/0xgasless-sdk-docs/getting-started/using-social-login.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.