himanshuchawla009 · April 11, 2022 04:13
diff --git a/web3auth.js b/web3auth.js
 <!DOCTYPE html>
 <html>
  <head>
    <title>Web3Auth Getting Started</title>
    <meta charset="UTF-8" />
  </head>

  <body
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    "
  >
    <h1>Web3Auth Integration Example</h1>
    <div>
      <p id="text">Loading...</p>
      <p id="error"></p>
      <p id="address"></p>
      <p id="balance"></p>
      <p id="privateKey"></p>
      <button id="login">Login</button>
      <button id="logout">Logout</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@web3auth/[email protected]/dist/web3auth.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/openlogin.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@web3auth/[email protected]/dist/openloginAdapter.umd.min.js"></script>
    <script>
      const web3authSdk = window.Web3auth;
      let web3AuthInstance = null;

      (async function init() {
        
        // get clientId and secret from https://dashboard.web3auth.io
        const clientId = "BPeo97qv4-bu-WIJmwpcb7myIcPJzZWwX_KP4RIEmldxmt9nvB559wnOwcbaaaW4s53jn3ET1SpbbSLxlP5tois";

        // Note: this is just a demo, you should not store clientSecret on frontend in production.
        const clientSecret = "8ae444ca944a24ecd252bfaf76a981b4f22102ca42ac595ae8144b1340f3bf7b";

        // generate signature for your domain using clientId and secret.
        // Note: You don't need to generate and pass signature like this if you have whitelisted your domain on https://dashboard.web3auth.io already.
        const signature = await window.Openlogin.whitelistUrl(clientId, clientSecret, window.location.origin);
        console.log("originDataisn", signature);
        $("#logout").hide();
        web3AuthInstance = new web3authSdk.Web3Auth({
          chainConfig: { chainNamespace: "eip155" },
          clientId,
        });
        const openloginAdapter = new window.OpenloginAdapter.OpenloginAdapter({
            adapterSettings: {
                originData: {
                    [window.location.origin]: signature
                },
                clientId
            }
        })

        web3AuthInstance.configureAdapter(openloginAdapter);

        subscribeAuthEvents(web3AuthInstance);

        await web3AuthInstance.initModal();

        if (web3AuthInstance.provider) {
          const user = await web3AuthInstance.getUserInfo();
          $("#text").text("Logged in as " + user.name + ".");
          $("#logout").show();
          await initWeb3();
        } else {
          $("#text").text("Didn't log in.");
          $("#login").show();
        }
      })();


      function subscribeAuthEvents(web3auth) {
        web3auth.on("connected", (data) => {
          console.log("Yeah!, you are successfully logged in", data);
        });

        web3auth.on("connecting", () => {
          console.log("connecting");
        });

        web3auth.on("disconnected", () => {
          console.log("disconnected");
        });

        web3auth.on("errored", (error) => {
          console.log("some error or user have cancelled login request", error);
        });

        web3auth.on("MODAL_VISIBILITY", (isVisible) => {
          console.log("modal visibility", isVisible);
        });
      }

      async function initWeb3() {
        const web3 = new Web3(web3AuthInstance.provider);
        const address = (await web3.eth.getAccounts())[0];
        const balance = await web3.eth.getBalance(address);
        // change the method to solanaPrivateKey if using solana chain.
        const privKey = await web3AuthInstance.provider.request({ method: "eth_private_key" })
        $("#address").text("Address: " + address + ".");
        $("#balance").text("Balance: " + balance + ".");
        $("#privateKey").text("Private Key: " + privKey + ".");
      }

      $("#login").click(async function (event) {
        try {
          const provider = await web3AuthInstance.connect();
          console.log("provider after login", provider);
          await initWeb3();
          const user = await web3AuthInstance.getUserInfo();
          $("#text").text("Logged in as " + user.name + ".");
          $("#error").hide();
          $("#logout").show();
          $("#login").hide();
        } catch (error) {
          $("#error").text(error.message);
        }
      });

      $("#logout").click(async function (event) {
        try {
          await web3AuthInstance.logout();
          $("#text").text("Logged out.");
          $("#address").text("");
          $("#balance").text("");
          $("#login").show();
          $("#logout").hide();
        } catch (error) {
          $("#error").text(error.message);
        }
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Web3Auth Getting Started</title>
	<meta charset="UTF-8" />
	</head>

	<body
	style="
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	"
	>
	<h1>Web3Auth Integration Example</h1>
	<div>
	<p id="text">Loading...</p>
	<p id="error"></p>
	<p id="address"></p>
	<p id="balance"></p>
	<p id="privateKey"></p>
	<button id="login">Login</button>
	<button id="logout">Logout</button>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@web3auth/[email protected]/dist/web3auth.umd.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/openlogin.umd.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@web3auth/[email protected]/dist/openloginAdapter.umd.min.js"></script>
	<script>
	const web3authSdk = window.Web3auth;
	let web3AuthInstance = null;

	(async function init() {

	// get clientId and secret from https://dashboard.web3auth.io
	const clientId = "BPeo97qv4-bu-WIJmwpcb7myIcPJzZWwX_KP4RIEmldxmt9nvB559wnOwcbaaaW4s53jn3ET1SpbbSLxlP5tois";

	// Note: this is just a demo, you should not store clientSecret on frontend in production.
	const clientSecret = "8ae444ca944a24ecd252bfaf76a981b4f22102ca42ac595ae8144b1340f3bf7b";

	// generate signature for your domain using clientId and secret.
	// Note: You don't need to generate and pass signature like this if you have whitelisted your domain on https://dashboard.web3auth.io already.
	const signature = await window.Openlogin.whitelistUrl(clientId, clientSecret, window.location.origin);
	console.log("originDataisn", signature);
	$("#logout").hide();
	web3AuthInstance = new web3authSdk.Web3Auth({
	chainConfig: { chainNamespace: "eip155" },
	clientId,
	});
	const openloginAdapter = new window.OpenloginAdapter.OpenloginAdapter({
	adapterSettings: {
	originData: {
	[window.location.origin]: signature
	},
	clientId
	}
	})

	web3AuthInstance.configureAdapter(openloginAdapter);

	subscribeAuthEvents(web3AuthInstance);

	await web3AuthInstance.initModal();

	if (web3AuthInstance.provider) {
	const user = await web3AuthInstance.getUserInfo();
	$("#text").text("Logged in as " + user.name + ".");
	$("#logout").show();
	await initWeb3();
	} else {
	$("#text").text("Didn't log in.");
	$("#login").show();
	}
	})();


	function subscribeAuthEvents(web3auth) {
	web3auth.on("connected", (data) => {
	console.log("Yeah!, you are successfully logged in", data);
	});

	web3auth.on("connecting", () => {
	console.log("connecting");
	});

	web3auth.on("disconnected", () => {
	console.log("disconnected");
	});

	web3auth.on("errored", (error) => {
	console.log("some error or user have cancelled login request", error);
	});

	web3auth.on("MODAL_VISIBILITY", (isVisible) => {
	console.log("modal visibility", isVisible);
	});
	}

	async function initWeb3() {
	const web3 = new Web3(web3AuthInstance.provider);
	const address = (await web3.eth.getAccounts())[0];
	const balance = await web3.eth.getBalance(address);
	// change the method to solanaPrivateKey if using solana chain.
	const privKey = await web3AuthInstance.provider.request({ method: "eth_private_key" })
	$("#address").text("Address: " + address + ".");
	$("#balance").text("Balance: " + balance + ".");
	$("#privateKey").text("Private Key: " + privKey + ".");
	}

	$("#login").click(async function (event) {
	try {
	const provider = await web3AuthInstance.connect();
	console.log("provider after login", provider);
	await initWeb3();
	const user = await web3AuthInstance.getUserInfo();
	$("#text").text("Logged in as " + user.name + ".");
	$("#error").hide();
	$("#logout").show();
	$("#login").hide();
	} catch (error) {
	$("#error").text(error.message);
	}
	});

	$("#logout").click(async function (event) {
	try {
	await web3AuthInstance.logout();
	$("#text").text("Logged out.");
	$("#address").text("");
	$("#balance").text("");
	$("#login").show();
	$("#logout").hide();
	} catch (error) {
	$("#error").text(error.message);
	}
	});
	</script>
	</body>
	</html>