Giter VIP home page Giter VIP logo

web3auth-web's Introduction

Web3Auth

lerna code style: prettier npm GitHub Workflow Status

Web3Auth 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.

๐Ÿ“– Documentation

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

๐Ÿ’ก Features

  • Plug and Play, OAuth based Web3 Authentication Service
  • Fully decentralized, non-custodial key infrastructure
  • End to end Whitelabelable solution
  • Threshold Cryptography based Key Reconstruction
  • Multi Factor Authentication Setup & Recovery (Includes password, backup phrase, device factor editing/deletion etc)
  • Support for WebAuthn & Passwordless Login
  • Support for connecting to multiple wallets
  • DApp Active Session Management

...and a lot more

๐Ÿ’ญ Choosing Between SDKs

For using Web3Auth in the web, you have two choices of SDKs to get started with.

Web3Auth Plug and Play Modal SDK @web3auth/modal: A simple and easy to use SDK that will give you a simple modular way of implementing Web3Auth directly within your application. You can use the pre-configured Web3Auth Modal UI and whitelabel it according to your needs.

Web3Auth Plug and Play NoModal SDK @web3auth/no-modal: The nomodal module implementing all the Web3Auth features you need and giving you the flexibility of using your own UI with the Web3Auth SDK working in the backend.

โšก Quick Start

Installation (Web3Auth Plug and Play Modal)

npm install --save @web3auth/modal

Get your Client ID from Web3Auth Dashboard

Hop on to the Web3Auth Dashboard and create a new project. Use the Client ID of the project to start your integration.

Web3Auth Dashboard

Initialize Web3Auth for your preferred blockchain

Web3Auth needs to initialise as soon as your app loads up to enable the user to log in. Preferably done within a constructor, initialisation is the step where you can pass on all the configurations for Web3Auth you want. A simple integration for Ethereum blockchain will look like this:

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

//Initialize within your constructor
const web3auth = new Web3Auth({
  clientId: "", // Get your Client ID from Web3Auth Dashboard
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
  },
});

await web3auth.initModal();

Login your User

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

await web3auth.connect();

๐Ÿ“ฆ Packages within this repository

Packages @latest Version Size Description
๐Ÿ  No-Modal
@web3auth/no-modal npm version minzip 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/modal npm version minzip Provides the main class for using default web3auth modal. It inherits @web3auth/no-modal package. So you can still call all the functions available in the @web3auth/no-modal 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 npm version minzip Adds coinbase login functionality
@web3auth/metamask-adapter npm version minzip Adds metamask chrome extension login functionality
@web3auth/openlogin-adapter npm version minzip Adds social logins with MFA functionality
@web3auth/phantom-adapter npm version minzip Adds phantom chrome extension login functionality
@web3auth/torus-evm-adapter npm version minzip Adds Torus Wallet login functionality (https://app.tor.us)
@web3auth/torus-solana-adapter npm version minzip Adds Solana Torus Wallet login functionality (https://solana.tor.us)
@web3auth/wallet-connect-v1-adapter npm version minzip Adds wallet connect v1 login functionality + all supported adapters (eg: Metamask mobile, rainbow etc.)
๐Ÿ‰ Providers
@web3auth/base-provider npm version minzip Base implementation of JRPC provider
@web3auth/ethereum-provider npm version minzip EIP-1193 compatible JRPC provider
@web3auth/solana-provider npm version minzip Solana chain compatible JRPC provider
๐Ÿ‰ Plugins
@web3auth/base-plugin npm version minzip Base implementation of plugin
@web3auth/torus-wallet-connector-plugin npm version minzip Allows to inject your web3auth scoped private key into torus wallet UI (https://app.tor.us)
@web3auth/solana-wallet-connector-plugin npm version minzip Allows to inject your web3auth scoped private key into torus solana wallet UI (https://solana.tor.us)
๐Ÿ‰ Low-Level
@web3auth/base npm version minzip Base reusable functionalities for creating a web3auth instance
@web3auth/ui npm version minzip Provides the UI used for creating the modal

โช Requirements

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

๐Ÿงณ 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>

๐Ÿฉน Examples

Checkout the examples for your preferred blockchain and platform in our examples repository

๐ŸŒ Demo

Checkout the Web3Auth Demo to see how Web3Auth can be used in your application.

Further checkout the demo folder within this repository, which contains other hosted demos for different usecases.

๐Ÿ’ฌ Troubleshooting and Support

  • Have a look at our Community Portal to see if anyone has any questions or issues you might be having. Feel free to reate new topics and we'll help you out as soon as possible.
  • Checkout our Troubleshooting Documentation Page to know the common issues and solutions.
  • For Priority Support, please have a look at our Pricing Page for the plan that suits your needs.

web3auth-web's People

Contributors

chaitanyapotti avatar himanshuchawla009 avatar lionellbriones avatar dependabot[bot] avatar rinzler99 avatar arch1995 avatar tainguyentt avatar yashovardhan avatar bboystatix avatar shahbaz17 avatar ieow avatar phuctm97 avatar saviour1001 avatar metallicalfa2 avatar cacampbell avatar sarimarcus avatar pgbrandao avatar snigdha920 avatar taylorbeeston avatar motxx avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.