@web3auth/ws-embed/README.md

Embed script

# Wallet Services Embed (by [Web3Auth](https://web3auth.io/docs))

[![npm version](https://badge.fury.io/js/@web3auth%ws-embed.svg)](https://badge.fury.io/js/@web3auth%ws-embed)
![npm](https://img.shields.io/npm/dw/@web3auth/ws-embed)

> [Web3Auth](https://web3auth.io) is where passwordless auth meets non-custodial key infrastructure for Web3 apps and wallets. By aggregating OAuth (Google, Twitter, Discord) logins, different wallets and innovative Multi Party Computation (MPC) - Web3Auth provides a seamless login experience to every user on your application.

## 🔗 Installation

```shell
npm install --save @web3auth/ws-embed
```

## ⚡ Quick Start

### Get your Client ID from Web3Auth Dashboard

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

// TODO: Add Image

## Initialize & Login

```ts
import WsEmbed from "@web3auth/ws-embed";

const embed = new WsEmbed({ web3AuthClientId: "clientId", web3AuthNetwork: "sapphire_devnet" });
await embed.init({
  buildEnv: "production", // default: production
  chainConfig: {}, // Provide your chain config
});
await embed.login();
```

## 🌐 Demo

Checkout the [WS Embed Demo](https://demo-wallet.web3auth.io/) to see how `WS Embed` can be used in your application.

## 💬 Troubleshooting and Discussions

- Have a look at our [GitHub Discussions](https://github.com/Web3Auth/Web3Auth/discussions?discussions_q=sort%3Atop) to see if anyone has any questions or issues you might be having.
- Checkout our [Troubleshooting Documentation Page](https://web3auth.io/docs/troubleshooting) to know the common issues and solutions
- Join our [Discord](https://discord.gg/web3auth) to join our community and get private integration support or help with your integration.

## Introduction

This module generates the javascript to include in a DApp via a script tag.
It creates an iframe that loads the Torus page and sets up communication streams between
the iframe and the DApp javascript context.

## Features

- Typescript compatible. Includes Type definitions

## Installation

### Bundling

This module is distributed in 3 formats

- `esm` build `dist/embed.esm.js` is es6 format
- `commonjs` build `dist/embed.cjs.js` in es5 format
- `umd` build `dist/embed.umd.min.js` in es5 format without polyfilling corejs minified

By default, the appropriate format is used for your specified usecase
You can use a different format (if you know what you're doing) by referencing the correct file

The cjs build is not polyfilled with core-js.
It is upto the user to polyfill based on the browserlist they target

### Directly in Browser

CDN's serve the non-core-js polyfilled version by default. You can use a different

jsdeliver

```js
<script src="https://cdn.jsdelivr.net/npm/@web3auth/ws-embed"></script>
```

unpkg

```js
<script src="https://unpkg.com/@web3auth/ws-embed"></script>
```

### Tips for NUXT

This is a plugin that works [only on the client side](https://nuxtjs.org/guide/plugins/#client-side-only). So please register it as a ssr-free plugin.

## Usage

Please refer to the [examples](examples) folder for details on usage using dynamic import.

## Requirements

- This package requires a peer dependency of `@babel/runtime`
- Node 18+