Web3Auth
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 Email and Mobile Passwordless Login
-
Support for connecting to multiple wallets
-
DApp Active Session Management
...and a lot more
🎯 Web3Auth Modal SDK
Web3Auth Plug and Play Modal SDK @web3auth/modal provides 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.
⚡ Quick Start
Installation
npm install --save @web3auth/modal
Prerequisites
Before you start, make sure you have registered on the Web3Auth Dashboard and have set up your project. Use the Client ID of the project to start your integration.
React Integration
Web3Auth provides React Hooks for seamless integration with React applications.
1. Create Configuration
// web3authContext.tsx
import { type Web3AuthContextConfig } from "@web3auth/modal/react";
import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal";
const web3AuthOptions: Web3AuthOptions = {
clientId: "YOUR_CLIENT_ID", // Get your Client ID from Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
};
const web3AuthContextConfig: Web3AuthContextConfig = {
web3AuthOptions,
};
export default web3AuthContextConfig;
2. Setup Provider
// main.tsx or index.tsx
import ReactDOM from "react-dom/client";
import { Web3AuthProvider } from "@web3auth/modal/react";
import web3AuthContextConfig from "./web3authContext";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<Web3AuthProvider config={web3AuthContextConfig}>
<App />
</Web3AuthProvider>
);
3. Use Web3Auth Hooks
// App.tsx
import { useWeb3AuthConnect } from "@web3auth/modal/react";
function ConnectButton() {
const { connect, loading, isConnected, error } = useWeb3AuthConnect();
return (
<button onClick={() => connect()} disabled={loading || isConnected}>
{loading ? "Connecting..." : isConnected ? "Connected" : "Connect"}
</button>
{error && <div>{error.message}</div>}
);
}
Vue Integration
Web3Auth provides Vue Composables for seamless integration with Vue applications.
1. Create Configuration
// web3authContext.ts
import { type Web3AuthContextConfig } from "@web3auth/modal/vue";
import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal";
const web3AuthOptions: Web3AuthOptions = {
clientId: "YOUR_CLIENT_ID", // Get your Client ID from Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
};
const web3AuthContextConfig: Web3AuthContextConfig = {
web3AuthOptions,
};
export default web3AuthContextConfig;
2. Setup Provider
<!-- App.vue -->
<script setup lang="ts">
import Home from "./Home.vue";
import { Web3AuthProvider } from "@web3auth/modal/vue";
import web3AuthContextConfig from "./web3authContext";
</script>
<template>
<Web3AuthProvider :config="web3AuthContextConfig">
<Home />
</Web3AuthProvider>
</template>
3. Use Web3Auth Composables
<!-- Home.vue -->
<script setup lang="ts">
import { useWeb3AuthConnect } from "@web3auth/modal/vue";
const { connect, loading, isConnected, error } = useWeb3AuthConnect();
</script>
<template>
<button @click="connect" :disabled="loading || isConnected">
<span v-if="loading">Connecting...</span>
<span v-else-if="isConnected">Connected</span>
<span v-else>Connect</span>
</button>
<div v-if="error">{{ error.message }}</div>
</template>
JavaScript Integration
For vanilla JavaScript or other frameworks, use the standard Web3Auth Modal SDK.
1. Initialize Web3Auth
import { Web3Auth, WEB3AUTH_NETWORK } from "@web3auth/modal";
const web3auth = new Web3Auth({
clientId: "YOUR_CLIENT_ID", // Get your Client ID from Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
});
// Initialize the SDK
await web3auth.init();
2. Login User
// Login
await web3auth.connect();
// Get user info
const user = await web3auth.getUserInfo();
// Logout
await web3auth.logout();
🔧 Advanced Configuration
The Web3Auth Modal SDK offers a rich set of advanced configuration options:
- Smart Accounts: Configure account abstraction parameters
- Custom Authentication: Define authentication methods
- Whitelabeling & UI Customization: Personalize the modal's appearance
- Multi-Factor Authentication (MFA): Set up and manage MFA
- Wallet Services: Integrate additional wallet services
⏪ Requirements
- All packages require a peer dependency of
@babel/runtime
- Node 18+
🧳 Bundling
This module is distributed in 4 formats
esm build dist/package.esm.js in es6 formatcommonjs build dist/package.cjs.js in es5 formatumd 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
Check out the examples for your preferred blockchain and platform on our examples page.
🌐 Demo
Checkout the Web3Auth Demo to see how Web3Auth can be used in your application.
For more detailed examples, visit our Web3Auth Examples repository. This repository contains a comprehensive collection of sample projects to help you get started with your Web3Auth integration.
💬 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 create 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.
