# Social Login using Etherspot SDK

{% hint style="success" %}
Before we continue, please ensure that you have had a look at [Social Logins](https://v1.etherspot.io/master/social-logins) to better understand how it works and our [Supported Ethereum Chains](https://v1.etherspot.io/getting-started/broken-reference), followed the steps in [Install Etherspot SDK](https://v1.etherspot.io/getting-started/install-sdk) and how to [Bootstrap Etherspot SDK](https://v1.etherspot.io/getting-started/bootstrap-etherspot-sdk). 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>