# Social Login using Etherspot SDK

{% hint style="success" %}
Before we continue, please ensure that you have had a look at [Social Logins](/master/social-logins.md) to better understand how it works and our [Supported Ethereum Chains](broken://pages/-MeAyzR2e2VKsOneDqAi), followed the steps in [Install Etherspot SDK](/getting-started/install-sdk.md) and how to [Bootstrap Etherspot SDK](/getting-started/bootstrap-etherspot-sdk.md). We're assuming that you have completed these steps before going forward.
{% endhint %}

In this article, we would take a look at how we can implement social logins using our Etherspot SDK to make use of both, the power of social login by creating a wallet with your social account sign-in and the power of Etherspot SDK to make that wallet, an Account Abstracted smart wallet

First, let us create a wallet using Web3Auth for Social Login. For this, we have to sign-up in <https://dashboard.web3auth.io/> for creating an account to create a web3Auth ClientId which is available after you are signed into the dashboard and created a project under 'Plug and Play'. Copy the ClientId shown and keep it ready before continuing.

Install Web3Auth package

{% tabs %}
{% tab title="NPM" %}

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

{% endtab %}

{% tab title="YARN" %}

```
yarn add @web3auth/modal
```

{% endtab %}
{% endtabs %}

Initialising Web3Auth for Social Login using the above created web3Auth ClientId

```javascript
import { Web3AuthCore } from '@web3auth/core'

const web3AuthInstance = new Web3AuthCore({
  clientId: web3AuthClientId, // created in the Web3Auth Dashboard as described above
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: '0x1', // ChainID in hexadecimal
  },
  storageKey: 'local',
})
```

{% hint style="info" %}
You can view a detailed steps on how to get started with Web3Auth [here](https://web3auth.io/docs/quick-start)
{% endhint %}

Defining the Web3Auth openLogin Adapter which is reponsible for sign-in options. You can see the list of all sign-in options provided [here](https://web3auth.io/docs/custom-authentication/social-providers/).

```javascript
const openLoginAdapter = new OpenloginAdapter({
  adapterSettings: {
    network: 'mainnet',
    clientId: web3AuthClientId,
  },
  loginSettings: {
    mfaLevel: 'none',
  },
})

web3AuthInstance.configureAdapter(openLoginAdapter)

// Listen to events emitted by the Web3Auth Adapter
web3AuthInstance.on(ADAPTER_EVENTS.CONNECTED, () => {
  if (!web3AuthInstance?.provider) {
    return
  }
})

web3AuthInstance.on(ADAPTER_EVENTS.ERRORED, (error) => {
  console.log(error)
})

// Initialise the web3Auth instance after setting up the Adapter Configuration
await web3AuthInstance.init()
```

Initialise the Etherspot SDK with the provider after connecting the web3Auth with valid credentials of any of the above supported social platforms listed.&#x20;

For this Example, Let us take Google as the social platform that we are looking to sign-in

<pre class="language-javascript" data-overflow="wrap"><code class="lang-javascript">try {
<strong>    // login_hint is optional parameter which accepts any string and can be set to null
</strong><strong>    const web3authProvider = await web3Auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, { 'google', login_hint })
</strong><strong>}
</strong>catch (e) {
  console.log(`Failed to login! Reason: ${e instanceof Error &#x26;&#x26; e?.message ? e.message : 'unknown'}.`)
  return
}

if (!web3authProvider) {
  console.log(`Failed to get the provider connected`)
  return
}
// Initialising web3Auth Provider as Web3 Injectable
const web3 = new Web3(web3authProvider as any)
const web3provider = new Web3WalletProvider(web3.currentProvider as any)
// Refresh the web3 Injectable to validate the provider
await web3provider.refresh()
// Initialise the Etherspot SDK
const etherspotSdk = new Sdk(web3provider, { networkName: NetworkNames.Mainnet, env: EnvNames.MainNets, omitWalletProviderNetworkCheck: true })
await etherspotSdk.computeContractAccount()
</code></pre>


---

# 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://v1.etherspot.io/getting-started/social-login-using-etherspot-sdk.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.