Web3Auth

Web3Auth is pluggable auth infrastructure for Web3 wallets and applications. It streamlines the onboarding of both mainstream and crypto native users under a minute by providing experiences that they're most comfortable with.

With support for all social logins, web & mobile native platforms, wallets and other key management methods, Web3Auth results in a standard cryptographic key provider specific to the user and application.

Checkout the official Web3Auth Documentation and API Reference to get started!

Choosing Between SDKs

For using Web3Auth you have multiple choices to get started with. If you're just starting up and want to experience how it will look like within your application, we recommend you to use our Plug n Play SDK @web3auth/web3auth which is a simple and easy to use SDK that will give you a simple modular way of implementing Web3Auth directly within your application.

For more customised usage, we have our Custom Login UI Module @web3auth/core, which is the core module implementing the features you need and giving you the flexibilty of using your own UI with the Web3Auth SDK working in the backend.

Plug n Play SDK

`@web3auth/web3auth`

This package provides main class for using default web3auth modal. It inherits @web3auth/core package. So you can still call all the functions available in the @web3auth/core api reference. The package includes all of our packages and gives you a simple way of implementing Web3Auth within your interface.

Installation

npm

npm i --save @web3auth/web3auth

yarn

yarn add @web3auth/web3auth

Head on to the Plug n Play API Reference to get started.

Custom Login UI SDK

`@web3auth/core`

This package provides the core logic for handling adapters within web3auth. This package acts as a manager for all the adapters. You should use this package to build your custom login UI on top of web3auth.

Installation

npm

npm i --save @web3auth/core

yarn

yarn add @web3auth/core

Head on to the Custom Login UI API Reference to get started.

Other packages included in our SDK

`@web3auth/base`

This package gives access to common types and interfaces for web3auth. It is included as a dependency in both our Custom UI and Plug n Play SDKs.

`@web3auth/ui`

This package includes the default Web3Auth modal UI for modular access within the Plug n Play SDK. It is included as a dependency in our Plug n Play SDK.

Adapter packages

Adapter acts as a connector between the Web3Auth and underlying wallet provider. Every adapter follows a common interface which is required by Web3Auth to communicate with the wallet.

To understand what they are and what they're for: Check out Adapters

Currently we have the following adapters available for utilisation:

Provider packages

Each adapter in web3auth exposes a provider on successful user authentication. This provider can be use to interact with wallet or connected chain using rpc calls. Currently web3auth supports providers for both EVM and Solana chains. For other chains, one can easily get the private key from the web3auth SDK. You can learn more about providers here.

Plugin packages

Each plugin in web3auth enhances the functionality of web3auth sdk by providing additional features. Currently web3auth supports plugins for both EVM and Solana wallets.

Bundling

This module is distributed in 4 formats

esm build dist/package.esm.js in es6 format
commonjs build dist/package.cjs.js in es5 format
umd build dist/package.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

Please replace package and version with the appropriate package name

jsdeliver

<script src="https://cdn.jsdelivr.net/npm/@web3auth/PACKAGE@VERSION"></script>

unpkg

<script src="https://unpkg.com/@web3auth/PACKAGE@VERSION"></script>

Packages	`@latest` Version	Size	Description
🏠 Core
`@web3auth/core`			Provides the core logic for handling adapters within web3auth. This package acts as a manager for all the adapters. You should use this package to build your custom login UI on top of web3auth.
`@web3auth/web3auth`			Provides the main class for using default web3auth modal. It inherits `@web3auth/core` package. So you can still call all the functions available in the `@web3auth/core` api reference. The package includes all of our packages and gives you a simple way of implementing Web3Auth within your interface.
🔌 Adapters
`@web3auth/coinbase-adapter`			Adds coinbase login functionality
`@web3auth/metamask-adapter`			Adds metamask chrome extension login functionality
`@web3auth/openlogin-adapter`			Adds social logins with MFA functionality
`@web3auth/phantom-adapter`			Adds phantom chrome extension login functionality
`@web3auth/torus-evm-adapter`			Adds Torus Wallet login functionality (https://app.tor.us)
`@web3auth/torus-solana-adapter`			Adds Solana Torus Wallet login functionality (https://solana.tor.us)
`@web3auth/wallet-connect-v1-adapter`			Adds wallet connect v1 login functionality + all supported adapters (eg: Metamask mobile, rainbow etc.)
🐉 Providers
`@web3auth/base-provider`			Base implementation of JRPC provider
`@web3auth/ethereum-provider`			EIP-1193 compatible JRPC provider
`@web3auth/solana-provider`			Solana chain compatible JRPC provider
🐉 Plugins
`@web3auth/base-plugin`			Base implementation of plugin
`@web3auth/torus-wallet-connector-plugin`			Allows to inject your web3auth scoped private key into torus wallet UI (https://app.tor.us)
`@web3auth/solana-wallet-connector-plugin`			Allows to inject your web3auth scoped private key into torus solana wallet UI (https://solana.tor.us)
🐉 Low-Level
`@web3auth/base`			Base reusable functionalities for creating a web3auth instance
`@web3auth/ui`			Provides the UI used for creating the modal

Examples

Please refer to examples

Hosted Example for testing

Full fledged example

Requirements

All packages require a peer dependency of @babel/runtime
Node 14+

Troubleshooting and known issues.

Web3Auth and Create-react-app

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

Create config-overrides.js in the root of your project folder with the content:

const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
};

Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired

before:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

after:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

The missing Nodejs polyfills should be included now and your app should be functional with web3.

If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings = [/Failed to parse source map/];

If you're using craco, similar changes need to be made to craco.config.js

Web3Auth and Angular

If you are using Angular version >11, you may run into issues building. This is because polyfills are not included in the newest version of Angular.

Install the required dependencies within your angular project:

npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify process buffer url

Within tsconfig.json add the following paths in compilerOptions so Webpack can get the correct dependencies

{
    "compilerOptions": {
        "paths" : {
        "crypto": ["./node_modules/crypto-browserify"],
        "stream": ["./node_modules/stream-browserify"],
        "assert": ["./node_modules/assert"],
        "http": ["./node_modules/stream-http"],
        "https": ["./node_modules/https-browserify"],
        "os": ["./node_modules/os-browserify"],
    }
}

Add the following lines to polyfills.ts file:

import { Buffer } from "buffer";

(window as any).global = window;
global.Buffer = Buffer;
global.process = {
  env: { DEBUG: undefined },
  version: "",
  nextTick: require("next-tick"),
} as any;

Web3Auth and Vue

If you are using vue.js you may run into issues building. This is because NodeJS polyfills are not included in the latest version of vue-cli (webpack 5).

Solution

Install the missing modules

If you are using yarn:

yarn add --dev process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

Add the following lines to vue.config.js

module.exports = {
  configureWebpack: (config) => {
    config.resolve.fallback = {
      crypto: require.resolve("crypto-browserify"),
      stream: require.resolve("stream-browserify"),
      assert: require.resolve("assert"),
      os: require.resolve("os-browserify/browser"),
      https: require.resolve("https-browserify"),
      http: require.resolve("stream-http"),
    };
    config.resolve.alias = {
      ...config.resolve.alias,
      "bn.js": path.resolve(__dirname, "node_modules/bn.js"),
    };
    config.plugins.push(new ProvidePlugin({ Buffer: ["buffer", "Buffer"] }));
    config.plugins.push(new ProvidePlugin({ process: ["process/browser"] }));
  },
};

Web3Auth and Vite/Svelte/Rollup

If you are using vite/svelte/rollup you may run into issues building. This is because NodeJS polyfills are not included.

Solution

Install the missing modules

If you are using yarn:

yarn add --dev process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

Add the following lines to svelte.config.js or rollup.config.js or vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
import builtins from "rollup-plugin-node-builtins";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
        NodeModulesPolyfillPlugin(),
      ],
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        // Enable rollup polyfills plugin
        // used during production bundling
        builtins(),
        rollupNodePolyFill(),
      ],
    },
  },
});

Name		Name	Last commit message	Last commit date
Latest commit History 794 Commits
.github		.github
.husky		.husky
.vscode		.vscode
examples		examples
packages		packages
.browserslistrc		.browserslistrc
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.mocharc.json		.mocharc.json
.npmignore		.npmignore
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.prettierrc.yaml		.prettierrc.yaml
README.md		README.md
lerna.json		lerna.json
package.json		package.json
torus.config.js		torus.config.js
tsconfig.json		tsconfig.json
webpack.config.js		webpack.config.js
yarn.lock		yarn.lock

geoshak/Web3Auth

Folders and files

Latest commit

History

Repository files navigation

Web3Auth

Checkout the official Web3Auth Documentation and API Reference to get started!

Choosing Between SDKs

Plug n Play SDK

@web3auth/web3auth

Installation

npm

yarn

Head on to the Plug n Play API Reference to get started.

Custom Login UI SDK

@web3auth/core

Installation

npm

yarn

Head on to the Custom Login UI API Reference to get started.

Other packages included in our SDK

@web3auth/base

@web3auth/ui

Adapter packages

Provider packages

Plugin packages

Bundling

Directly in Browser

Examples

Requirements

Troubleshooting and known issues.

Web3Auth and Create-react-app

Solution

Web3Auth and Angular

Web3Auth and Vue

Solution

Web3Auth and Vite/Svelte/Rollup

Solution

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

`@web3auth/web3auth`

`@web3auth/core`

`@web3auth/base`

`@web3auth/ui`

Packages