DEV Community: g4rry420

Authentication in Web Applications

g4rry420 — Fri, 04 Dec 2020 05:24:55 +0000

Hello Everyone,
In this post, I am going to show you how authentication and login persistance is implemented in web applications using mysql and next.js.I am gonna assume you have some basic knowledge of node and react.

Installation and Folder Structure

Open your favourite code editor and the the following code in the command line:

npx create-next-app hello-next

This will creatte your next application with the name of hello-next.

Your folder structure might look different. I recommend you should delete the files and create new files and folder as I have created in the picture.

Next, first we will setup our database which is mysql.

MySQL

If you are following my folder structure then you should have created models folder and in it user.js file.

I have also installed mysql locally in my computer and you can install from this link.
However, you can also setup the cloud for it. The choice is yours.

Now, we are going to create a Schema for our database.
For those of you, who don't know what Schema is, it is structure of our tables in the database about how and which data is going to be stored in the database.Schema is pretty everywhere, it is almost used with every database.

For our mysql database we are going to use sequelize for creating a schema.

npm install --save sequelize

First, we are going to connect sequelize with the database. In the hello-next folder, create a folder called utils and in it create a file called dbConnect.js.

import { Sequelize } from "sequelize";

module.exports = new Sequelize('signup_test', 'root', 'mysql_root_password', {
    host: 'localhost',
    dialect: "mysql"
});

Make to remove mysql_root_password with your root password.

Now, lets move to user.js file. Remember this file is created in the models folder.

const crypto = require("crypto");
const { v4: uuidv1 } = require("uuid")
const { DataTypes } = require("sequelize")

const db = require("../utils/dbConnect")

const User = db.define("User", {
    fullname: {
        type: DataTypes.STRING,
        allowNull: false
    },
    email: {
        type: DataTypes.STRING,
        allowNull: false,
        unique: true
    },
    salt: {
        type: DataTypes.STRING,
        get(){
            return () => this.getDataValue('salt')
        }
    },
    password: {
        type: DataTypes.STRING,
        get(){
            return () =>  this.getDataValue('password')
        }
    }
},{
    tableName: "Users"
})

User.generateSalt = function() {
    return uuidv1()
}

User.encryptPassword = function(plainPassword, salt) {
    return crypto.createHmac('sha256', salt).update(plainPassword).digest("hex");
}

const setSaltAndPassword = user => {
    if(user.changed('password')) {
        user.salt = User.generateSalt();
        user.password = User.encryptPassword(user.password(), user.salt())
    }
}
User.prototype.correctPassword = function(enteredPassword) {
    return User.encryptPassword(enteredPassword, this.salt()) === this.password()
}


User.beforeCreate(setSaltAndPassword);
User.beforeUpdate(setSaltAndPassword);

module.exports = User

You might been seeing an error,we haven't installed the uuid.

npm install uuid

okay, I am gonna walk you real quick about what we are doing in the above file.
We are gonna ask user for the three input values for the signup i.e, fullname, email and password.Now, you might be wondering what is this salt doing in the schema.

Salt

Salt is a value that is added to your cryptography function to make the password of the user encrypted and only salt can decode the password.The point of using salt is that even though we encrypt our password but there are some hackers that can decrypt the password by reverse engineering methods. So, if we add a salt of our choice, it nearly become impossible to crack the password.

Okay, now lets move on
User.generateSalt function is created so that it can generate a unique string of numbers every time when a new user is signuped.

User.encryptPassword = function(plainPassword, salt) {
    return crypto.createHmac('sha256', salt).update(plainPassword).digest("hex");
}

From the naming it is clear that this function receives the plain password and salt encrpt the password.If you want to learn more it, visit this link.

const setSaltAndPassword = user => {
    if(user.changed('password')) {
        user.salt = User.generateSalt();
        user.password = User.encryptPassword(user.password(), user.salt())
    }
}

And now, our final piece of encrpting the password is the setSaltAndPassword which takes the password that the user passed and salt that we generated to encrypt the password.

Remember, we are able to get password using this user.password() method because in our password field we added this get() line.

get(){
            return () =>  this.getDataValue('password')
        }

And the same case goes for the salt also.

Also, for all these functions to take place, we use these methods also. Before, creating any new user data will be passed through them.

User.beforeCreate(setSaltAndPassword);
User.beforeUpdate(setSaltAndPassword);

And finally to check if the password is correct or not, we use correctPassword function. This function encrypts the password passed by the user to check against the encrypt password stored in the database.
By doing this, we will never know about the original password.

API - signup.js, login.js, signout.js and db.js

Remember inside the api, you have to create these files.
Lets, first deal with signup.js file.

const User = require("../../models/user")

export default  (req, res) => {
    User.create(req.body)
        .then(data => {
            return res.json(data)
        })
        .catch(err => {
            if(err){
                return res.status(400).json({
                    error: "Not able to save user in db"
                })
            }
        })
}

Whenever user hits /api/signup/ with post method then new user will be created.
okay, This was simple.

const User = require("../../models/user")

const jwt = require("jsonwebtoken")

export default (req, res) => {
    const { email, password } = req.body;


    User.findOne({ where: { email }})
        .then(user => {
            if(!user.correctPassword(password)){
                return res.status(401).json({
                    error: "Email and Password is not correct"
                })
            }

            //create token
            const token = jwt.sign({id: user.id}, process.env.SECRET)

            //send response to front
            const { id, fullname, email } = user;
            return res.status(200).json({
                token, user: { id, fullname, email }
            })

        })
        .catch(err => {
            if(err){
                return res.status(400).json({
                    error: "User email doesn't exist",
                    log: err
                })
            }
        })
}

First things first, npm install jsonwebtoken run this command in your cli.

JsonWebToken (jwt)

Jwt generate a one time unique token generated which will help us to login the user.It maintains the session persistance and we are going to store this token in the cookie so that if a user refreshes the page, he/she is still logged in.
To learn more about the JWT, visit this link.

We are using findOne method of sequelize which find the user based on his email.Remember, in our schema we set the unique: true value for the email so that their will be no duplicates of the email.
Next, we are checking if the password passed by the user is correct or not with correctPassword function.
Next, we are generating a token for the user and sending the user's credentials and token in the frontend.

signout.js

export default (req, res) => {
    res.json({
        message: "remove token and user is signed out"
    })
}

Signout is simple, I am just send the message for now and but in the front end I will remove the cookie so that the user is not signed in.

db.js

import db from "../../utils/dbConnect"


export default function(req, res) {
    db.authenticate()
    .then(res => console.log("DB CONNECTED"))
    .catch(err => console.log("ERROR IN CONNECTING DB"))
    res.json({
        message: "db is connected"
    })
}

This file is to connect database with our application.

signup.js

Okay, moving to frontend, create a signup.js in pages folder.

import React,{ useState } from 'react'
import { useRouter } from "next/router"

export default function signup() {
    const [signup, setSignup] = useState({
        fullname: "",
        email: "",
        password: ""
    })

    const [message, setMessage ] = useState("");
    const router = useRouter();

    const { fullname, email, password } = signup;

    const handleChange = (event) => {
        const { name, value } = event.target;
        setSignup({ ...signup, [name]: value })
    }

    const handleSubmit = (event) => {
        event.preventDefault();

        const data = { fullname, email, password };

        fetch("/api/signup",{
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        }).then(res => res.json())
          .then(data => {
              if(!data.error){
                  setMessage("Please Login, You are signuped for the app")
              }
          })
          .catch(err => console.log(err))

        setSignup({
            fullname: "",
            email: "",
            password: ""
        })  

        router.push("/login")
    }

    return (
        <form onSubmit={handleSubmit}>
            {message}
            <input type="text" name="fullname" value={fullname} onChange={handleChange} placeholder="Full Name" />
            <br/> <br/>
            <input type="email" name="email" value={email} onChange={handleChange} placeholder='Email' />
            <br/> <br/>
            <input type="password" name="password" value={password} onChange={handleChange} placeholder="Password" />
            <br/> <br/>
            <input type="submit" value="Signup"/>
        </form>
    )
}

In this component, I am taking the fullname, email and password from the user and then on form submit save data to the /api/signup/ route.

Context

I have setup context in this as it turns out that you cannot do props drilling in next.js.
In the context folder, create a mainContext.js.

import React,{ createContext, useState } from 'react';

export const MainContext = createContext();

export default function MainContextProvider(props) {

    const [authenticated, setAuthenticated] = useState(null);

    return (
        <MainContext.Provider value={{ authenticated, setAuthenticated }}>
            {props.children}
        </MainContext.Provider>
    )
}

Now, in the _app.js, change the code.

import MainContextProvider from "../context/mainContext"
import { CookiesProvider } from "react-cookie"

export default function App({ Component, pageProps }){
    return (
        <MainContextProvider>
            <CookiesProvider>
                <Component {...pageProps} />
            </CookiesProvider>
        </MainContextProvider>
    )
}

As you can see we are using react-cookie, which will help us to access the cookie in the application.
So, in the cli, enter npm install react-cookie.

Login.js

Now, create Login.js file in pages folder.

import React,{ useContext, useState } from 'react'
import { useCookies } from "react-cookie"
import { useRouter } from "next/router"
import { MainContext } from '../context/mainContext';

export default function login() {
    const [login, setLogin] = useState({
        email: "",
        password: ""
    });
    const [cookie, setCookie] = useCookies(["token"]);
    const { setAuthenticated } = useContext(MainContext)
    const { email, password } = login;

    const router = useRouter();

    const handleChange = (event) => {
        const { name, value } = event.target;
        setLogin({ ...login, [name]: value })
    }

    const handleSubmit = (event) => {
        event.preventDefault();

        const data = { email, password };

        fetch("/api/login",{
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json()).then(data => {
            if(data.token){
                setCookie("token", `Bearer ${data.token}`, {
                    path: "/",
                    maxAge: 3600, //expires in 1 hour
                    sameSite: true
                })
                if(typeof window !== undefined){
                    localStorage.setItem("jwt", JSON.stringify(data));
                    setAuthenticated(data)
                }
            }
        })
        .catch(err => console.log(err))

        setLogin({
            email: "",
            password: ""
        })
        router.push("/")
    }

    return (
        <form onSubmit={handleSubmit}>
            <input type="email" name="email" value={email} onChange={handleChange} placeholder="Email" />
            <br/> <br/>
            <input type="password" name="password" value={password} onChange={handleChange} placeholder="Password" />
            <br/> <br/>
            <input type="submit" value="Login"/>
        </form>
    )
}

In this component, we are using react-cookie which gives us the use cookies hooks in which returns three things.

cookie:- The cookie which is curently stored in your browser.
setCookie:- To store a new cookie in the browser.
removeCookie:- To remove the cookie from the browser.

Although, in this component, we are using the first two only but in the index.js you will see the example of removeCookie.

Furthermore, I am taking the email and password as a input from the user and on form submit, checking the email and password with /api/login route.
In the success response from it, I got the token and user credentials in which I store the token using the setCookie which take some options like maxAge which describes when the cookie is gonna expires which in this case is 1 hour.

Next, I am also storing the data in the localStorage and in the autenticated state.

Finally, when the success is done, router is push backed to "/".

Index.js

This is the main component on which the application mounts on.

import { useEffect, Fragment, useContext } from "react"
import { useCookies } from "react-cookie"

import Link from "next/link"
import { MainContext } from "../context/mainContext";

export default function Home() {

  const { authenticated, setAuthenticated } = useContext(MainContext);

  const [cookie, setCookie, removeCookie] = useCookies(["token"]);


  useEffect(() => {
    dbCall()
  }, [])

  useEffect(() => {
    if(!authenticated){ 
      setAuthenticated(isAuthenticated())
    }
  },[authenticated])

  const dbCall = async () => {
    const response = await fetch("/api/db")
    const data = await response.json();
    console.log(data)
  }

  const handleSignout = () => {
    fetch("/api/signout").then(response => response.json())
    .then(data => {
      if(data.message === "remove token and user is signed out"){
        removeCookie("token")
        setAuthenticated(null)
      }
    })
    .catch(err => console.log(err))
  }

  const isAuthenticated = () => {
    if(typeof window !== undefined){
      if(localStorage.getItem("jwt") && cookie.token){
        return JSON.parse(localStorage.getItem("jwt"));

      }else{
        return false
      }
    }
  }

  return (
    <ul>
      <li><Link href="/">Home</Link></li>
      {
        authenticated && authenticated.user ? (
          <li onClick={handleSignout}>Signout</li>
        ) : (
          <Fragment>
            <li><Link href="/login">Login</Link></li>
            <li><Link href="/signup">SignUp</Link></li>
          </Fragment>
        )
      }
    </ul>
  )
}

In this component, there are two main functions isAuthenticated and handleSignout.

isAuthenticated() :- This function is invoked when the app is mounted for the first and it checks if the jwt key for the localStorage and cookie token is presented in it and then it will authenticate the user and setAuthenticated state is updated.Based on this, login, signup and signout is gonna be the present to the user.

handleSignout() :- When the user clicked on signout, we remove the token cookie and setAuthenticated state to null.

Also, in this component, we are connecting our database with dbCall function.

Conclusion

Now, you have the authenticated application with user persistance session.

If you think I might have mentioned something wrong, please feel free to comment. We all are learning here.

Thanks for your time to read this.
Happy Coding:)

Video Chat with WebRTC and Firebase

g4rry420 — Mon, 09 Nov 2020 21:33:32 +0000

Hello everyone,
Today I am going to talk about webRTC.

In this post, you will how can you implement webRTC in JS and the simple explaination behind this API.

Understanding WebRTC

webRTC stands for web real time communication. The way this works is called peer-to-peer connection between the browser with a signaling state which is done by the server.

Key Terms To understand in webRTC

navigator.mediaDevices :- navigator.mediaDevices provides the access to the media devices which are connected to your machine like microphone and cameras. In this , there is a method called getUserMedia({video: true, audio: true}) which basically ask permissions from the user about the devices.
MediaStream() :- MediaStream constructor create a empty stream in which we can add audio and video track which will coming from our remote friend.
RTCPeerConnection() :- This is the core constructor which will help us to make connection between the local device and the remote device.It accepts a configuration to it describing the iceservers urls.
IceServers :- I won't go too much depth into iceservers but I just want say that there are mainly two servers TURN and STUN which helps the local and remote network to exchange one time network information for connectivity. You can learn more about them in this post.
localDescription :- This is the read-only property of RTCPeerConnection.localDescription which is intially null if nothing is passed into it. In this property, we set up our offer which will be send remotely to our remote device.
Offer :- This offer is created by createOffer() method in RTCPeerConnection constructor. If we call this medthod, it creates an sdp (session description protocol) which automatically attaches the getUserMedia if they are accepted by the user. SDP basically represents the information of audio, video and host address.
setRemoteDescription :- This method will accept the offer send by the local user to remote user.
Answer :- After the remoteDescription is set, we can get the answer with the createAnswer method
icecandidate :- icecandidate is the main hook event that let two connection knows that something is changed. This events is fired to the RTCPeerConnection whenever localDescription is setted. icecandidate actually contains a node of your network which we send to remote device so that they can know what connection endpoints to connect to. For example, if you go to the new city, you don't know all streets and direction of the city, you just only know the address that you want to go in that city. So, you take the help google maps or maybe something else to reach your destination. In the same way, icecandidate tells the currents location and RTC connection then determines the path to it (shortest path).

Code

Html should be like this :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRtc</title>
</head>
<body>
    <div>
        <button id="open"  className="btn btn-open">Open Microphone and Camera</button>
        <button id="create"  className="btn btn-open"> Create Room</button>
        <button id="join"  className="btn btn-open">Join Room</button>
        <button id="hangup"  className="btn btn-open">Hang Up</button>
    </div>
    <div>
        <video id="localVideo" autoplay playsinline></video>
        <video id="remoteVideo" autoplay playsinline></video>
    </div>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-firestore.js"></script>
    <script>
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    var firebaseConfig = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: "",
        appId: "",
        measurementId: ""
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    let firestore = firebase.firestore();
    </script>
    <script src="./index.js"></script>
    <script src="./functions/openButtonFunc.js"></script>
    <script src="./functions/createButtonFunc.js"></script>
    <script src="./functions/joinButtonFunc.js"></script>
    <script src="./functions/hangupButtonFunc.js"></script>
    <script src="./events.js"></script>
</body>
</html>

Create your firebase project replace firebaseConfig with your file.

okay, we will start with index.js file.

let localStream;
let remoteStream;
let roomId;
let roomIdData = [];
let peerConnection;

let configuration = {
    'iceServers': [
      {'urls': 'stun:stun.services.mozilla.com'},
      {'urls': 'stun:stun.l.google.com:19302'},
    ]
  }

//Reference to the Buttons
let openButton = document.getElementById("open");
let createButton = document.getElementById("create");
let joinButton = document.getElementById("join");
let hangupButton = document.getElementById("hangup");

createButton.disabled = true;
joinButton.disabled = true;
hangupButton.disabled = true;

// Reference to the Video Tags
let localVideo = document.getElementById("localVideo");
let remoteVideo = document.getElementById("remoteVideo");

In this file, we have initialise some variables that we are going to be need in later in this project.

But one variable that I wanna talk about is configuration. Remember, I said that RTCPeerConnection requires a configuration, that configuration is in this variable.

Lets move, Now I want you to create new folder called functions and in it create a file called openButtonFunc.js
The content of it should be like this :-

const openButtonFunc = async () => {
    try {
        localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        localVideo.srcObject = localStream;

        remoteStream = new MediaStream();
        remoteVideo.srcObject = remoteStream;

        openButton.disabled = true;
        createButton.disabled = false;
        joinButton.disabled = false;
        hangupButton.disabled = false;
    } catch (error) {
        console.log(error)
    }
}

In this file, when a user click on openButton, it will ask user for permissions and then displays the stream to the localVideo reference of video tag. At the same time , I have created a remoteStream with MediaStream() which will be useful to us later.

Now, in the same functions folder, create a file called createButtonFunc.js.
The contents should be like this :-

const createButtonFunc = async () => {
    peerConnection = new RTCPeerConnection(configuration);

    localStream.getTracks().forEach(track => {
        peerConnection.addTrack(track, localStream)
    })

    // Code for collecting ICE candidates below
    const roomRef = firestore.collection("rooms").doc();
    const callerCandidatesCollection = roomRef.collection("callerCandidates");

    peerConnection.addEventListener("icecandidate", event => {
      if(!event.candidate){
       //  console.log("Got Final Candidate!");
        return;
      }
     //  console.log('Got candidate: ', event.candidate);
     callerCandidatesCollection.add(event.candidate.toJSON());
    })
    // Code for collecting ICE candidates above


     // Code for creating a room below
     const offer = await peerConnection.createOffer();
     await peerConnection.setLocalDescription(offer);

     const roomWithOffer = {
       'offer': {
         type: offer.type,
         sdp: offer.sdp,
       },
       roomId: roomRef.id
     };
     await roomRef.set(roomWithOffer);
     roomId = roomRef.id;
     console.log(roomId)
     // Code for creating a room above

     peerConnection.addEventListener("track", event => {
        // console.log('Got remote track:', event.streams[0]);
        event.streams[0].getTracks().forEach(track => {
          // console.log('Add a track to the remoteStream:', track);
          remoteStream.addTrack(track);
        })
       })

       // Listening for remote session description below
      let unsubscribe = roomRef.onSnapshot(async snapshot => {
        const data = snapshot.data();
        if(peerConnection.iceConnectionState !== "closed"){

          if(!peerConnection.currentRemoteDescription && data && data.answer){
            // console.log('Got remote description: ', data.answer);
          const rtcSessionDescription = new RTCSessionDescription(data.answer);
          await peerConnection.setRemoteDescription(rtcSessionDescription);
          }

        }
      })
       // Listening for remote session description above

       // Listen for remote ICE candidates below
       let unsubscribe2 = roomRef.collection('calleeCandidates').onSnapshot(snapshot => {
        snapshot.docChanges().forEach(async change => {
          if (change.type === 'added') {
            let data = change.doc.data();
            // console.log(`Got new remote ICE candidate: ${JSON.stringify(data)}`);
            await peerConnection.addIceCandidate(new RTCIceCandidate(data));
          }
        });
      });
      // Listen for remote ICE candidates above

      return () => {
          unsubscribe();
          unsubscribe2();
      }

}

In this file, first I have created a new RTCPeerConnection with the configuration variable.Then, I loop through the localStream.getTracks()(rememeber, localStream is the stream that we ask user for the permission) returns arrays of two tracks i.e, audio and video and then we pass it on the peerConnection.addTracks() method which accepts two parameters, a track and the stream(optional). In the second paramater, we pass the localStream, if we suppose didn't pass the stream the object then the method will run properly but in the remote device end, again we have to create a new MediaStream(). So, to maintain consistency, it is recommended to pass the stream.
Next, we get the reference to the rooms collection and in it we create a new collection called callerCandidates and added to icecandidate event Listener which will only get fired when setLocalDescription is setted in the peerConnection.

Side Note: I keep typing peerConnection variable which means I am talking about RTCPeerConnection that we created in the first place.

Moving ahead, in the icecandidate event listner, I have added event.candidate.toJson() to the callerCandiadates collection and it will only add data when event.candidate is null.

Next, I have created offer and setLocalDescription with the offer and also I have added the roomRef with the offer data.

Next, I added an another event listener to the peerConnection track which will only get fired when new track is added by the remote device user and then track is added to the remoteStream variable whose reference is to the remoteVideo.srcObject.

Moving further, I added onSnapshot listening method on the roomRef, which fires everytime something is changed in the roomRef document. If roomRef contains the answer object then it will set the answer object to the remoteSessionDescription which in turns calls the track event Listener and add the remote stream to it.

Okay, you might be thinking that, now with this method we got the remoteStream of the user and now there is no use of the last unsubscribe2 code. But you are wrong here. In the above the step, it tells the peerConnection that this is the answer and stream we got but then the peerConnection asks where is the location of it ? Then our last code for Listen for remote ICE candidates below came into help.

So, in the last step, we create a snapshot on the calleCandidates which is not created on our end, it will only created when a user joins the room and with we add a addIceCandidate which in turns triggers the icecandidate event.

I know the above explaination might sound confusing to you. Even I didn't understand the webRtc when I first read its documentation. But move to the joinButtonFunc.js code you will understand the links between them. You have only seen one side of the coin. Now, its time for the another.

Now, create a new file called joinButtonFunc.js in the functions folder and its contents are as follows :-

const joinButtonFunc = async () => {
    roomId = prompt("Enter a Room Id");

    peerConnection = new RTCPeerConnection(configuration);

    const roomRef = firestore.collection("rooms").doc(roomId);
    const roomSnapshot = await roomRef.get();

    if(roomSnapshot.exists){
        localStream.getTracks().forEach(track => {
            peerConnection.addTrack(track, localStream)
        })

        // Code for collecting ICE candidates below
        const calleeCandidatesCollection = roomRef.collection("calleCandidates");
        peerConnection.addEventListener("icecandidate", event => {
          if(!event.candidate){
            // console.log('Got final candidate!');
            return;
          }
          // console.log('Got candidate: ', event.candidate);
          calleeCandidatesCollection.add(event.candidate.toJSON());
        })
        // Code for collecting ICE candidates above

        peerConnection.addEventListener("track", event => {
            // console.log('Got remote track:', event.streams[0]);
            event.streams[0].getTracks().forEach(track => {
              // console.log('Add a track to the remoteStream:', track);
              remoteStream.addTrack(track);
            })
        })

        // Code for creating SDP answer below
        const offer = roomSnapshot.data().offer;
        // console.log('Got offer:', offer);
        await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
        const answer = await peerConnection.createAnswer();
        //   console.log('Created answer:', answer);
        await peerConnection.setLocalDescription(answer);

        const roomWithAnswer = {
          answer: {
            type: answer.type,
            sdp: answer.sdp,
          },
        };
        await roomRef.update(roomWithAnswer);
        // Code for creating SDP answer above

        // Listening for remote ICE candidates below
        let unsubscribe = roomRef.collection('callerCandidates').onSnapshot(snapshot => {
        snapshot.docChanges().forEach(async change => {
            if (change.type === 'added') {
            let data = change.doc.data();
            // console.log(`Got new remote ICE candidate: ${JSON.stringify(data)}`);
            await peerConnection.addIceCandidate(new RTCIceCandidate(data));
            }
        });
        });
        // Listening for remote ICE candidates 

        return () => unsubscribe()
    }
}

So, in this file we first prompts user to add roomId to join the room and then we create a new peerConnection with the same configuration.
Remember, in the createButtonFunc.js, we get the reference of the callerCandidates but in this case, we get the reference of the calleCandidates and add icecandidate event listener to it and the same process goes.

Same process goes through the track event listener too.

Next, we get the offer from the roomSnapshot where the local user store and setRemoteDescription with it. Once the remote description is setted with the offer, now , we can get the answer from it and update it to with roomRef.

Then, in the final call we listen for the callerCandidates collection and addIceCandidates with use of it.

Remember, these all events are interlinked, because of which the application is functiontioning properly.

Note that, in the createButtonFunc.js, we add icecandidate evenListener and in it the candidates are added to the callerCandidates collection.
And in the joinButtonFunc.js, in the final step of unsubscribe listener, we are looking for the changes in the callerCandidates document and adding addIceCandidate data to it which leads to trigger different events.
The point I am trying to make is that these all events are inter-connected.

Okay, Now adding our next file for hangupButton which you should create in the functions folder called hangupButtonFunc.js and contents are as follows:-

const hangupButtonFunc = async () => {
    const tracks = localVideo.srcObject.getTracks();
    tracks.forEach(track => track.stop());

    if(remoteStream){
        remoteStream.getTracks().forEach(track => track.stop())
    }

    if(peerConnection){
        peerConnection.close();
    }

    //Delete a room on hangup below
    if(roomId){
        const roomRef = firestore.collection("rooms").doc(roomId);
        const calleeCandidates = await roomRef.collection('calleeCandidates').get();
        calleeCandidates.forEach(async candidate => {
          await candidate.ref.delete();
        });
        const callerCandidates = await roomRef.collection('callerCandidates').get();
        callerCandidates.forEach(async candidate => {
          await candidate.ref.delete();
        });
        await roomRef.delete();
    }
    //Delete a room on hangup above

    openButton.disabled = false;
    createButton.disabled = true;
    joinButton.disabled = true;
    hangupButton.disabled = true;

    document.location.reload(true);
}

In this file, we are just grabbing the tracks from the localStream and remoteStream and are stopping them. Also we are closing our peerConnection and deleting the documents in the firebase that we have created.

Now, there is only final file remaining called events.js and created this file outside of functions folder.

openButton.addEventListener("click", openButtonFunc);
createButton.addEventListener("click", createButtonFunc);
joinButton.addEventListener("click", joinButtonFunc);
hangupButton.addEventListener("click", hangupButtonFunc);

Conclusion

I have showed you how to create a application with webRtc and firebase. To take application to the next level you can screen share functionality and you can learn about from this.

This post is inspired from the webRTC documentation.

Feel free to add any comment if you think I might have mentioned something wrong.

Thank You for your time to read this post.
Happy Coding:)

Hashtables (Objects) vs. Arrays

g4rry420 — Wed, 04 Nov 2020 17:57:48 +0000

Hello Everyone,

Today I wanted to talk about the two the data structures that we used mostly in our application to add data, get data and delete data.However, I am assuming most of us are familiar with the use case of arrays and most of you don't see much difference between them. But, what happens behind the scene is totally different.

By the end of this post you will enough knowledge to make a good decision about which data structure to choose.

Data

First, I wanted to show you data we are gonna use in both cases.

This is the random data that I get from wikipedia about the world's top movies.

What we want to implement is store this data retrieve net gross income of movies. For example, if I wanted to get the gross income of Frozen, I will get 1,290,000,000.

Arrays

Okay, lets get started with arrays that most people are familiar with. If we store the above data to array, it will be something like this :

let arrayMoviesData = [];

arrayMoviesData.push(["Avengers: Endgame", "2,797,800,564"]);
arrayMoviesData.push(["Avatar", "2,790,439,000"]);
arrayMoviesData.push(["Titanic", "2,194,439,542"]);
arrayMoviesData.push(["Star Wars: The Force Awakens", "2,068,223,624"]);
arrayMoviesData.push(["Avengers: Infinity War", "2,048,359,754"]);
arrayMoviesData.push(["Jurassic World", "1,671,713,208"]);
arrayMoviesData.push(["The Lion King", "1,656,943,394"]);
arrayMoviesData.push(["The Avengers", "1,518,812,988"]);
arrayMoviesData.push(["Furious 7", "1,516,045,911"]);
arrayMoviesData.push(["Frozen II", "1,450,026,933"]);
arrayMoviesData.push(["Avengers: Age of Ultron", "1,402,805,868"]);
arrayMoviesData.push(["Black Panther", "1,347,280,838"]);
arrayMoviesData.push(["Harry Potter and the Deathly Hallows – Part 2", "1,342,025,430"]);
arrayMoviesData.push(["Star Wars: The Last Jedi", "1,332,539,889"]);
arrayMoviesData.push(["Jurassic World: Fallen Kingdom", "1,309,484,461"]);
arrayMoviesData.push(["Frozen", "1,290,000,000"]);
arrayMoviesData.push(["Beauty and the Beast", "1,263,521,126"]);
arrayMoviesData.push(["Incredibles 2", "1,242,805,359"]);

Initially, I have created an empty set of array called arrayMoviesData and then I added items to it. Notice that the items that I added to arrayMoviesData are also arrays themselves. If you console.log(arrayMoviesData) it will be something like this.

What I wanted to do is access the gross income of a particular movie and the code for that will look something like this.

let movie = "Incredibles 2";

for (let index = 0; index < arrayMoviesData.length; index++) {
    if(arrayMoviesData[index][0] === movie){
        console.log(`The gross income of ${arrayMoviesData[index][0]} is ${arrayMoviesData[index][1]}.`)
    }

}

I have created a loop to go through each item and check if the value of arrayMoviesData array if it matches the value to the movie variable.However, this works very fine and efficient if there are only 18 or 100 items in the arrays.

But, the problem occurs when there are ten thousands and millions of items in the arrays. If the item we want to retrieve is in the beginning of the array, then you will find the result quickly but if the item is in the end of the array then its gonna take some time.

So, from the conclusion, we can say that the average amount of time to find an item in the array is directly proportional to the number of items in the array.

Hashtables (Objects)

Hastables almost works simliar to objects as they work in javscript. The code for adding the movies data in hashtables would look something like this:

let objectMoviesData = new Object();

objectMoviesData["Avengers: Endgame"] = "2,797,800,564";
objectMoviesData["Avatar"] = "2,790,439,000";
objectMoviesData["Titanic"] = "2,194,439,542";
objectMoviesData["Star Wars: The Force Awakens"] = "2,068,223,624";
objectMoviesData["Avengers: Infinity War"] = "2,048,359,754";
objectMoviesData["Jurassic World"] = "1,671,713,208";
objectMoviesData["The Lion King"] = "1,656,943,394";
objectMoviesData["The Avengers"] = "1,518,812,988";
objectMoviesData["Furious 7"] = "1,516,045,911";
objectMoviesData["Frozen II"] = "1,450,026,933";
objectMoviesData["Avengers: Age of Ultron"] = "1,402,805,868";
objectMoviesData["Black Panther"] = "1,347,280,838";
objectMoviesData["Harry Potter and the Deathly Hallows – Part 2"] = "1,342,025,430";
objectMoviesData["Star Wars: The Last Jedi"] = "1,332,539,889";
objectMoviesData["Jurassic World: Fallen Kingdom"] = "1,309,484,461";
objectMoviesData["Frozen"] = "1,290,000,000";
objectMoviesData["Beauty and the Beast"] = "1,263,521,126";
objectMoviesData["Incredibles 2"] = "1,242,805,359";

The hashing works with key/property and value pairs. In this case, I have taken movie name as a key and the gross income as value.
Hashing works by jumping the exact of value of the key that is provided by the user and gives the results instantaneously.

You might be wondering how does it work so fast then arrays ?

The answer to this when you add data to particular hashtable in javscript, the javascript engine keeps tracks of the data of the key, that it has stored in the hashtables. So, when pass something like this.

objectMoviesData["Incredibles 2"]

It instantaneously returns this 1,242,805,359.
But when you pass something like this.

objectMoviesData["fsafaf"];

It instantaneously knows that it doesn't store any key of this fsafaf, so it returns undefined.

If you think of arrays, they also works the same way but the difference is that in array the key/property is indexes and we can't change the value of indexes in array.

Also, if you want to loop through the object and display the data, you can use for of loop something like this:

for (const [key, value] of Object.entries(objectMoviesData)) {
    console.log(`The gross income of ${key} is ${value}`)
}

Conclusion

If you think of the performance, hashing definitely wins. Arrays are good for storing small amount of data but if your data becomes bigger, you should migrate to hashtables.

If you think I might have mentioned something wrong, please feel free to comment. We all are learning here.

This post is inspired from kirupa.

Thanks for your time to read this.
Happy Coding:)

Routing using react-router-dom

g4rry420 — Mon, 02 Nov 2020 15:26:05 +0000

In this post, I will talk about routing using react-router-dom in the react applications.
But, first, question arises, Why do we need to use routing in react ? And maybe you don't know what is React ?

What is React ?

React is a javascript framework that is developed and maintained by Facebook by providing single page applications.

Single Page Applications (SPA)?

In the early development of web applications, whenever a user clicks on a new page link, then the client side of the browser sends data to server and grabs a particular html file related to the link and reloads the page which takes time.

But with implementation of SPA, user only has one index.html file and whenever user clicks on a new link, the data re-renders on the same page without grabbing the entire new html file.

Why do we use routing in react ?

Since we are in the world of SPA, the routing helps us to display some template and hide another template based on the route.

Okay, I hope you know understand the use of routing in SPA.

Let's dive into the coding part of the simple project we are going to make to understand about react-router-dom.

Create React Application

Create a new react app named routing. Run the below command in your command prompt, terminal or git bash.
npx create-react-app routing
cd routing
npm start or yarn start

By running the about commands, your project is now on the localhost:3000

Installing react-router-dom

To install react-router-dom in your app, simply run npm i react-router-dom or yarn add react-router-dom.

Folder structure

You folder structure should look like this. Delete unnecessary files.

And make sure to remove all the content from App.css file.

Adding New Route

Before creating a route lets make two new components, home.js and room.js

home.js should look like this.

import React from 'react'

export default function Home() {
    return (
        <div>
            Welcome to the Home.
        </div>
    )
}

room.js should look like this.

import React from 'react'

export default function Room() {
    return (
        <div>
            Welcome to the Room.
        </div>
    )
}

Next your App.js should look like this.

import { BrowserRouter, Route } from "react-router-dom"

import './App.css';
import Home from "./home";
import Room from "./room"

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route path="/" component={Home} />
        <Route path="/room" component={Room} />
      </BrowserRouter>
    </div>
  );
}

export default App;

Understanding react-router-dom terms

In the App.js, I take BrowserRouter and Route from the react-router-dom.

BrowserRouter is a top level components which basically lets us start using routing in our react application. So make sure that you wrap all your components inside this.

Route basically, tells the react-router that components in this are going to be on different pages.So, in this case, Home and Room are the one.

Now, if you go to your browser you should see this.

In your navigation, you should link to /room to visit different page template. And you should see this.

Confused ??
Don't worry I will tell you why this happened.

If you see our App.js,

import { BrowserRouter, Route } from "react-router-dom"

import './App.css';
import Home from "./home";
import Room from "./room"

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route path="/" component={Home} />
        <Route path="/room" component={Room} />
      </BrowserRouter>
    </div>
  );
}

export default App;

You can see that "/" path represents Home component and "/room" path represents Room component.
So, when I changed the path from "/" to "/room" both Home and Room both components got rendered.
To render only one component at a time, we can use exact prop in the Route like this.

<Route exact path="/" component={Home} />
<Route path="/room" component={Room} />

And Now our localhost only renders one page at a time. Like this.

However, we can achieve the above goal by getting the Switch from the react-router-dom.

import { BrowserRouter, Route, Switch } from "react-router-dom"

Switch make sures that only one components loads at one time.

import { BrowserRouter, Route, Switch } from "react-router-dom"

import './App.css';
import Home from "./home";
import Room from "./room"

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/room" component={Room} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Adding Navigation Links

Now, we need to click something so that we can change routes. For react-router gives us the Link and NavLink.
Import these into App.js.

import { BrowserRouter, Route, Link, NavLink } from "react-router-dom"

However, Behind the scenes, the Link and NavLink are simply anchor tags.
But the difference between two is that NavLink comes with a class of active whereas Link does not.

Okay, Now add links to our application.

import { BrowserRouter, Route, Link, NavLink } from "react-router-dom"

import './App.css';
import Home from "./home";
import Room from "./room"

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <nav>
            <Link to="/">Home</Link>
            <NavLink to="/room">Room</NavLink>
          </nav>
          <Route exact path="/" component={Home} />
          <Route path="/room" component={Room} />
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

Now if you click on different links you can navigate to different pages.

Nested Routing

Nested Routing in the components is bit tricky to manage.But don't worry I will tell you the way which I found most easy for this and this is the way that they recommend in the react-router-dom documentation.

So, Suppose you want to have route like this "/room/room1". I mean there could be multiple rooms inside the room route.

Okay, Now , create new file called room-container.js and it should look like this:

import React from 'react'
import { Route, Link  } from "react-router-dom"
import Room from './room'
import RoomId from './room-id'

export default function RoomContainer(props) {
    return (
        <div>
            <Link to={`/room/${Math.random()}`}> Link to different Nested Rooms </Link>
            <div>
                <Route exact path="/room" component={Room} />
                <Route path="/room/:roomId" component={RoomId} />
            </div>
        </div>
    )
}

Now in your App.js, instead of importing room.js file you should import room-container.js file and in your room-container.js file you should import room.js

Oh God, I hope I didn't make it much confusing.

Your App.js file should look like:

import { BrowserRouter, Route, Link, NavLink } from "react-router-dom"

import './App.css';
import Home from "./home";
import RoomContainer from "./room-container"

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <nav>
            <Link to="/">Home</Link>
            <NavLink to="/room">Room</NavLink>
          </nav>
          <Route exact path="/" component={Home} />
          <Route path="/room" component={RoomContainer} />
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

Now, you might be wondering why did we follow this structure.Actually, this is the structure that the react-router-dom documentation recommends us to implement to correctly achieve nested routing.

Now, in your room-container.js, you might wondering about these lines of code,

<Link to={`/room/${Math.random()}`}> Link to different Nested Rooms </Link>
<Route path="/room/:roomId" component={RoomId} />

First line of code is the link to nested route and in the second the line ":roomId" defines that the this value is gonna be dynamically put here. ":roomId" is know as the params for the nested route link.

Actually, this is the way we implement nested route to a component. And in this case I have created a new file called room-id.js and it should look like this:

import React from 'react'

export default function RoomId(props) {
    return (
        <div>
            Welcome to Room Id:   

            {
                props.match.params.roomId
            }
        </div>
    )
}

Now, if click on the Room and then click on to the Link to different Nested Rooms, you will be routed to the different routes.And you can see the roomId for it in the room-id.js component.

Understanding terms and Some theory

Whenever you define a in the and the component in it has props of the route which can be useful to us.
For example: In the room-id.js, I can access and display the roomId using the props.match.params.roomId.

Similarily these props are also presented in the room-container.js and to maintain consisitency in our application, most developers prefer to use them instead of hard-coding the routes like these:

 <Link to={`/room/${Math.random()}`}> Link to different Nested Rooms </Link>
            <div>
                <Route exact path="/room" component={Room} />
                <Route path="/room/:roomId" component={RoomId} />
            </div>

We can implement the same thing like this:

 <Link to={`${props.match.url}/${Math.random()}`}> Link to different Nested Rooms </Link>
            <div>
                <Route exact path={`${props.match.path}`} component={Room} />
                <Route path={`${props.match.path}/:roomId`} component={RoomId} />
            </div>

props.match.path represents the path that is relative to the parent container, the user is currently on.
props.match.url represents the matched portion of the url.

Conclusion

We have seen how we can implement react routing in react application and also we got to know about the nested routing.

I know nested routing might seems confusing for the beginner but if you understand it by implementing it on a project you will get it.

Thanks for reading.
Happy Coding:)