How To Build A Web3 Auth Login In Angular

What is Web3 Login?

Web3 Login is a common and crucial feature to have in an application with public data. Sometimes the term Web3 authentication is used instead of Web3 login. Web3 login increases security by one more level.

Step-1:

Create an angular project in terminal by using following command.

ng new web3-login

Now go into the project Directory(web3-login) and do ng serve and then open webpage with localhost:4200.

Step-2:

Now install web3.js and web3auth by using following commands

npm install --save web3
npm install --save @web3auth/modal @web3auth/base

Step-3:

Add the below code to execute login, logout, transactions, fetch user data and so on... Change the code depending on your requirement.

app.component.ts:

import { Component } from "@angular/core";
import { Web3Auth } from "@web3auth/modal";
import { CHAIN_NAMESPACES, SafeEventEmitterProvider } from "@web3auth/base";
import RPC from "./web3RPC";
const clientId = "YOUR_WEB3AUTH_CLIENT_ID"; // get from     
https://dashboard.web3auth.io

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})

export class AppComponent {
 title = "angular-app";
 web3auth: Web3Auth | null = null;
 provider: SafeEventEmitterProvider | null = null;
 isModalLoaded = false;

async ngOnInit() {
  this.web3auth = new Web3Auth({
    clientId,
    chainConfig: {
      chainNamespace: CHAIN_NAMESPACES.EIP155,
      chainId: "0x1",
      rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
    },
  });
  const web3auth = this.web3auth;


  await web3auth.initModal();
  if (web3auth.provider) {
    this.provider = web3auth.provider;
  }
  this.isModalLoaded = true;
}

login = async () => {
if (!this.web3auth) {
  console.log("web3auth not initialized yet");
  return;
}
const web3auth = this.web3auth;
this.provider = await web3auth.connect();
console.log("logged in");
};

getUserInfo = async () => {
  if (!this.web3auth) {
    console.log("web3auth not initialized yet");
    return;
  }
  const user = await this.web3auth.getUserInfo();
  console.log(user);
};

logout = async () => {
  if (!this.web3auth) {
    console.log("web3auth not initialized yet");
    return;
  }
  await this.web3auth.logout();
  this.provider = null;
  console.log("logged out");
};

getChainId = async () => {
  if (!this.provider) {
    console.log("provider not initialized yet");
    return;
  }
  const rpc = new RPC(this.provider);
  const chainId = await rpc.getChainId();
  console.log(chainId);
};
getAccounts = async () => {
  if (!this.provider) {
    console.log("provider not initialized yet");
    return;
  }
  const rpc = new RPC(this.provider);
  const address = await rpc.getAccounts();
  console.log(address);
};

getBalance = async () => {
  if (!this.provider) {
    console.log("provider not initialized yet");
    return;
  }
  const rpc = new RPC(this.provider);
  const balance = await rpc.getBalance();
  console.log(balance);
};

sendTransaction = async () => {
  if (!this.provider) {
    console.log("provider not initialized yet");
    return;
  }
  const rpc = new RPC(this.provider);
  const receipt = await rpc.sendTransaction();
  console.log(receipt);
};

signMessage = async () => {
  if (!this.provider) {
    console.log("provider not initialized yet");
    return;
  }
  const rpc = new RPC(this.provider);
  const signedMessage = await rpc.signMessage();
  console.log(signedMessage);
};

getPrivateKey = async () => {
  if (!this.provider) {
    console.log("provider not initialized yet");
    return;
  }
  const rpc = new RPC(this.provider);
  const privateKey = await rpc.getPrivateKey();
  console.log(privateKey);
};
}

In the above example, add the clientId from web3 auth dashboard.Go to dashboard and then create a project in web3 auth and we will be getting clientId. Add that in the above example and track the logged in users.

package.json:

Change your package file by adding web3 and web3 auth.

Create a file name called web3RPC.ts

app.component.html:

polyfills.ts:

tsconfig.json:

app.component.css:

After adding all these things you will get one error. To rectify that, go to angular.json file and enable "true" for both "buildOptimizer" and "aot".

After login you can fetch whatever data you need.

This is how we can build web3 login in angular applications.

Thank you!!!