Merge pull request #327 from Web3Auth/sfa-vanillajs-quick-start-added

Add SFA vanillajs quick start
Web3Auth · Nov 30, 2023 · 5ac73c9 · 5ac73c9
2 parents abf7ddb + d756f74
commit 5ac73c9
Show file tree

Hide file tree

Showing 7 changed files with 872 additions and 0 deletions.
diff --git a/single-factor-auth-web/quick-starts/sfa-vanillajs-quick-start/.gitignore b/single-factor-auth-web/quick-starts/sfa-vanillajs-quick-start/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/single-factor-auth-web/quick-starts/sfa-vanillajs-quick-start/README.md b/single-factor-auth-web/quick-starts/sfa-vanillajs-quick-start/README.md
@@ -0,0 +1,17 @@
+# Web3Auth (`@web3auth/single-factor-auth`) x EVM x JavaScript
+
+[![Web3Auth](https://img.shields.io/badge/Web3Auth-SDK-blue)](https://web3auth.io/docs/sdk/core-kit/sfa-web)
+[![Web3Auth](https://img.shields.io/badge/Web3Auth-Community-cyan)](https://community.web3auth.io)
+
+[Join our Community Portal](https://community.web3auth.io/) to get support and stay up to date with the latest news and updates.
+
+This example demonstrates how to use Web3Auth with EVM in JavaScript.
+
+## Important Links
+
+- [Website](https://web3auth.io)
+- [Docs](https://web3auth.io/docs)
+- [Guides](https://web3auth.io/docs/content-hub?type=guides)
+- [SDK / API References](https://web3auth.io/docs/sdk)
+- [Pricing](https://web3auth.io/pricing.html)
+- [Community Portal](https://community.web3auth.io)
diff --git a/single-factor-auth-web/quick-starts/sfa-vanillajs-quick-start/index.html b/single-factor-auth-web/quick-starts/sfa-vanillajs-quick-start/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Login</title>
+  <link rel = "stylesheet" href = "style.css">
+</head>
+<body>
+  <div class="container">
+    <h1 class="title">
+      <a target="_blank" href="https://web3auth.io/docs/sdk/pnp/web/modal">Web3Auth</a> & JS Ethereum
+      Example
+    </h1>
+    <!-- Logged In -->
+    <div class="grid btn-logged-in">
+      <button id="get-user-info" class="btn">Get User Info</button>
+      <button id="get-accounts" class="btn">Get Accounts</button>
+      <button id="get-balance" class="btn">Get Balance</button>
+      <button id="sign-message" class="btn">Sign Message</button>
+      <button id="logout" class="btn">Logout</button>
+    </div>
+    <div class="console" id="console">
+      <p id="code" class="code"></p>
+    </div>
+
+    <!-- Logged Logout -->
+    <div class="grid btn-logged-out">
+      <button id="login" class="btn">Login</button>
+    </div>
+    <footer class="footer">
+      <a
+        href="https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/vanillajs-modal-quick-start"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Source code
+      </a>
+    </footer>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/buffer@6"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@web3auth/single-factor-auth"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@web3auth/ethereum-provider"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
+  <script type = "module" src = "./script.js"></script>
+</body>
+</html>