Angular 15 : Fetching Client IP Address Using WebRTC, IP4 IP6

In this tutorial, you will learn how to easily fetch the Client IP address and show it on UI or send it to server-side in the Angular app. We can obtain the client’s IP address using WebRTC by using the RTCIceCandidate object to capture the IP address of the network interface used for the connection.

You can also check out our previous tutorial on “How to Get Client IP Address using a Third Part Service?”

How to Get User IP Address using WebRTC in Angular App?

Follow these quick steps to get user’s client IP address:

 

Disclaimer: Fetching the client’s IP address using WebRTC or any other method should only be done after obtaining the user’s consent and making them aware of it. IP addresses can potentially reveal sensitive information about the user, and tracking them without their knowledge or consent could be a violation of their privacy. Therefore, it’s essential to use IP address lookup methods responsibly and only for legitimate purposes. Additionally, it’s crucial to inform users that their IP address is being collected and explain how it will be used to prevent any confusion or privacy concerns. More details here.

 

Step 1 –  In the component class, create a new RTCPeerConnection object and add an event listener for the icecandidate event:

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  private rtcPeerConnection: RTCPeerConnection;

  ngOnInit() {
    // Create a new RTCPeerConnection object
    this.rtcPeerConnection = new RTCPeerConnection();

    // Add an event listener for the icecandidate event
    this.rtcPeerConnection.onicecandidate = this.handleIceCandidate;
  }

  // Event handler for the icecandidate event
  handleIceCandidate(event: RTCPeerConnectionIceEvent) {
    // Extract the IP address from the candidate attribute
    const ipAddress = event.candidate?.candidate.split(' ')[4];

    // Do something with the IP address
    console.log('IP address:', ipAddress);
  }

}

Step 2 –  When you are ready to start capturing the client’s IP address, add a new data channel to the RTCPeerConnection object and create an offer:

startCapturingIpAddress() {
    // Add a new data channel to the RTCPeerConnection object
    const dataChannel = this.rtcPeerConnection.createDataChannel('dataChannel');

    // Create an offer and set the local description
    this.rtcPeerConnection.createOffer()
      .then(offer => this.rtcPeerConnection.setLocalDescription(offer))
      .catch(error => console.error('Error creating offer:', error));
  }

Wait for the icecandidate event to be fired, and then extract the IP address from the candidate attribute of the event. You can then use the IP address for your desired purpose.

 

Step 3 –  Now let’s have a look on complete implementation inside the AppComponent class:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: ` <button (click)="startCapturingIpAddress()">
    Capture IP Address
  </button>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  private rtcPeerConnection!: RTCPeerConnection;

  ngOnInit() {
    // Create a new RTCPeerConnection object
    this.rtcPeerConnection = new RTCPeerConnection();

    // Add an event listener for the icecandidate event
    this.rtcPeerConnection.onicecandidate = this.handleIceCandidate;

    // Call to get IP Address
    setTimeout(() => {
      this.startCapturingIpAddress();
    }, 5000);
  }

  // Event handler for the icecandidate event
  handleIceCandidate(event: RTCPeerConnectionIceEvent) {
    // Extract the IP address from the candidate attribute
    const ipAddress = event.candidate?.candidate.split(' ')[4];

    // Do something with the IP address
    console.log('IP address:', ipAddress);
  }

  startCapturingIpAddress() {
    // Add a new data channel to the RTCPeerConnection object
    const dataChannel = this.rtcPeerConnection.createDataChannel('dataChannel');

    // Create an offer and set the local description
    this.rtcPeerConnection
      .createOffer()
      .then((offer) => this.rtcPeerConnection.setLocalDescription(offer))
      .catch((error) => console.error('Error creating offer:', error));
  }
}

You can call the startCapturingIpAddress method in response to a user action, such as clicking a button. For example, you can add a button to your component’s template, and us the (click) event binding to call the startCapturingIpAddress method when the user clicks the button.

Here’s an example of how you can modify the MyComponent template to include a button that triggers the startCapturingIpAddress method:

<h1>My Component</h1>

<button (click)="startCapturingIpAddress()">Capture IP Address</button>

When the user clicks the “Capture IP Address” button, the startCapturingIpAddress method will be called and the client’s IP address will be extracted and printed to the consol. We have just called this method in a set timeout for reference.

Note that this method may not work for all users, as some firewalls and network configurations may prevent WebRTC from establishing a connection. Additionaly, some users may use tools or techniques to obscure or fake their IP address. As a result, the client’s IP address should be used with caution and in conjunction with other methods of user identification and authentication.