Skip to content

Commit 60d53a2

Browse files
yashovardhanyashovardhan
committed
Add vanillajs quick start
1 parent 81022db commit 60d53a2

File tree

9 files changed

+6942
-0
lines changed

9 files changed

+6942
-0
lines changed

‎quick-starts/vanillajs-quick-start/.gitignore‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
yarn.lock
10+
11+
node_modules
12+
dist
13+
dist-ssr
14+
*.local
15+
16+
# Editor directories and files
17+
.vscode/*
18+
!.vscode/extensions.json
19+
.idea
20+
.DS_Store
21+
*.suo
22+
*.ntvs*
23+
*.njsproj
24+
*.sln
25+
*.sw?
26+

‎quick-starts/vanillajs-quick-start/README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Web3Auth VanillaJS Quick Start
2+
3+
This example demonstrates how to integrate Web3Auth into a vanilla JavaScript application for EVM chains.
4+
5+
## Prerequisites
6+
- Node.js 20+
7+
- npm
8+
- A Web3Auth Client ID (get one from [Web3Auth Dashboard](https://dashboard.web3auth.io))
9+
10+
## Quick Start
11+
12+
### 1. Clone the repository
13+
```bash
14+
git clone https://github.com/Web3Auth/web3auth-examples.git
15+
```
16+
17+
### 2. Navigate to the example
18+
```bash
19+
cd web3auth-examples/quick-starts/vanillajs-quick-start
20+
```
21+
22+
### 3. Install dependencies
23+
```bash
24+
npm install
25+
```
26+
27+
### 4. Configure Web3Auth Client ID
28+
Open `src/main.js` and replace the `clientId` value with your Web3Auth Client ID:
29+
```javascript
30+
const clientId = "YOUR_WEB3AUTH_CLIENT_ID"; // get from https://dashboard.web3auth.io
31+
```
32+
33+
### 5. Run the application
34+
```bash
35+
npm run dev
36+
```
37+
38+
Visit `http://localhost:5173` in your browser to see the application running.
39+
40+
## 📚 Resources
41+
42+
- [Web3Auth Documentation](https://web3auth.io/docs)
43+
- [SDK References](https://web3auth.io/docs/sdk)
44+
- [Developer Dashboard](https://dashboard.web3auth.io)
45+
- [Web3Auth Community](https://web3auth.io/community)
46+
47+
## License
48+
MIT
49+

‎quick-starts/vanillajs-quick-start/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script type="module">
5+
// IMP START - Bundler Issues
6+
import { Buffer } from "buffer";
7+
import process from "process";
8+
window.Buffer = Buffer;
9+
window.process = process;
10+
// IMP END - Bundler Issues
11+
</script>
12+
<meta charset="UTF-8" />
13+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
15+
<title>Web3Auth VanillaJS Quick Start</title>
16+
<link rel="stylesheet" href="/src/style.css" />
17+
</head>
18+
<body>
19+
<div class="content">
20+
<h1 class="title">
21+
<a target="_blank" href="https://web3auth.io/docs/sdk/pnp/web/modal">Web3Auth</a> & VanillaJS
22+
Example
23+
</h1>
24+
<div class="setting">
25+
<div id="logged-in-view" class="card-container" style="display: none;">
26+
<button class="card card-small" id="get-user-info-btn">Get User Info</button>
27+
<button class="card card-small" id="get-accounts-btn">Get Accounts</button>
28+
<button class="card card-small" id="get-balance-btn">Get Balance</button>
29+
<button class="card card-small" id="sign-message-btn">Sign Message</button>
30+
<button class="card card-small" id="send-transaction-btn">Send Transaction</button>
31+
<button class="card card-small" id="logout-btn">Log Out</button>
32+
</div>
33+
<div id="logged-out-view" class="card-container">
34+
<button class="card card-small" id="login-btn">Login</button>
35+
</div>
36+
<div class="console" id="console-ui">
37+
<p class="code">Logged In</p>
38+
</div>
39+
</div>
40+
<footer class="footer">
41+
<a
42+
href="https://github.com/Web3Auth/web3auth-examples/tree/main/quick-starts/vanillajs-quick-start"
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
>
46+
Source code
47+
</a>
48+
</footer>
49+
</div>
50+
<script type="module" src="/src/main.js"></script>
51+
</body>
52+
</html>
53+

0 commit comments

Comments
 (0)