QR Codes are very useful in storing information that can be shared very easily. QR Code allows a user to store information in form of an image that can be shared on any medium. Think of a link to your website as an image which eventually when scanned will lead to your webpage. In this tutorial, I will show you how you can easily implement a QR Code which will have some textual information embedded inside it which you can share.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/198/1*UCKvUlwqEh5SoSz8b9nfMg.gif"></figure>For the purpose of this tutorial you will need to install the following NPM package:
QRcode.react (<a href="https://www.npmjs.com/package/qrcode.react">https://www.npmjs.com/package/qrcode.react</a>)
First, we will need to start a react application. The quickest way to do so is by creating a react application with npx create-react-app. Once you run this command it will generate the boilerplate react app for you.
Next, we will import the package we require for QRcode implementation.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/338/1*GmA5NsPJjERuFXp9A3g9Jg.png"></figure>Once that is done we will finally place our QRcode package in our render logic. The QRCode package expects many props but the most essential prop for it to work is the value prop. The value prop will be the value that you want your users to obtain once they have scanned your QR code. This value can only be a string.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/801/1*nawQ3t0a6fkHP3aOJahKgg.png"></figure>You can render the QR code as an SVG or as a canvas. You can also specify its size. For more props please do read its <a href="https://github.com/zpao/qrcode.react">documentation</a>. This code will generate the following output.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/820/1*BAfmyOUuLPThKQQJiky2HA.png"></figure>And this is how you can implement QRcode in your react.js applications. For code of the following project please visit my <a href="https://github.com/NotAngad/react-qrcode-demo">GitHub repository.</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=82aebd994cad" width="1" height="1" alt="">

QR Code Implementation in React.js in 5 mins.

Social login is a great way to get new users started on your platform as it takes away all the hassle of filling up those tedious signup forms. In this blog, I will show you how you can implement google social login for your react application the right way via backend token verification. I am going to assume that you have already set up your react frontend and node.js back-end for this tutorial. So without any further ado let's get started.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/498/1*ZRmwBvU3CEVJIjdagsI2gg.gif"></figure>For this tutorial, you will need the following packages
<ul>
<li>Backend * Google Auth Library (<a href="https://www.npmjs.com/package/google-auth-library">https://www.npmjs.com/package/google-auth-library</a>)</li>
<li>Frontend * react-google-login (<a href="https://www.npmjs.com/package/react-google-login">https://www.npmjs.com/package/react-google-login</a>) * react-confetti (<a href="https://www.npmjs.com/package/react-confetti">https://www.npmjs.com/package/react-confetti</a>) * react-toastify (<a href="https://www.npmjs.com/package/react-toastify">https://www.npmjs.com/package/react-toastify</a>)</li>
</ul>
On your front end firstly we will import all the packages that we will require for this project.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/524/1*qOX41It5znkde6Z8ueVrTA.png"></figure>After importing all the packages first, we will focus on the GoogleLogin package. Google Login package allows us to get an OAuth token which will be used in our backend to verify the legitimacy of social login. For using this plugin you will require a client-id which you can get from your google console developer account. For this tutorial, I will assume that you already have a client-id. The code of your Google Login Package should look something like this.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/453/1*yXl7UvdycEraC3dZ__bbVQ.png"></figure>This package requires two functions. One function will run when it will be able to successfully get a client-id. The other will run in case of any errors. In case of success, we will get an OAuth Token which we will send to our API for verification and login. The function of success will look something like this.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/891/1*qkgO7MEsizF-ucYsZNCBTA.png"></figure>The steps for success are as follows:
<ol>
<li>First, we will check if we have received a token</li>
<li>Once we receive a token we will send it to our API</li>
<li>Our API will provide us with the user details like name, email, and even picture</li>
<li>Once successfully logged in we will show users a toast notifying them that the login attempt was a success.</li>
</ol>
Also just to make it even better we will throw confetti on the screen for that celebration effect. So our final frontend code would look something like this.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/836/1*sS8UQgSrRdzw8MvnO9FYKg.png"><figcaption>Our render code logic.</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/946/1*Rb8zg0nZYfKTg4DUimkMsw.png"><figcaption>The code that will disable the confetti after 5 seconds of login.</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/670/1*UsxYYo-MFrl2Y9Ue5SafJw.png"><figcaption>Our state logic and failure code of google login.</figcaption></figure>This was the implementation of our front end. Now let's take a look at our backend.
On your backend first of all import the library that we previously installed.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/545/1*KEowRACtSN_E7e7_4-Wf7Q.png"></figure>Once we have imported the library we will now need to create a client instance from this. To create a client instance we will once again need our client-id which we can get from console developers google.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/350/1*3lX7B3y3oViXkSpQVhn95Q.png"></figure>After that, we will create our endpoint which will handle our login logic. Our login logic will constitute of the following steps
<ol>
<li>First, get the token from the body of the request.</li>
<li>Then we will verify the token and get user details from that token.</li>
<li>Perform database operations on the data that you just retrieved.</li>
<li>Finally, send the data back to the front end.</li>
</ol>
In this tutorial I have not performed any DB operations as DB operations on logic can vary from platform to platform. I have simply retrieved the data to show you how you can get legitimate login data. Our final code should look something like this.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/734/1*dUtioHqAqfJoN-NvcXW2Zg.png"></figure>So our final interaction between front-end and back-end would be as follows.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TFWsEUz1gqYV8CS2RU13UQ.png"></figure>And our social login should work as follows:
<figure><img alt="" src="https://cdn-images-1.medium.com/max/640/1*nNdK7TxceoyBgzont9rzdQ.gif"></figure>So this is one of the ways on how you can implement social login in your react applications. The link for the code can be found in my <a href="https://github.com/NotAngad/react-google-login">git repo</a>.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=32002d8d8d78" width="1" height="1" alt="">

React Google Login and Node.js implementation

Hey there. I'm a full-stack web developer based in Jaipur,  Rajasthan. I have a passion for web development and love to  create web applications. I have 2 years of experience under my built where I have designed, developed and deployed applications that make peoples life easy and better. In short: I design and develop beautiful simple things, and I love what I do.

HI THERE 👋 , I’M

angad.

Frontend + Backend 👨‍💻

I design and develop simple, beautiful and creative things.

About Me

Tech Stack

Read my blogs 📗

QR Code Implementation in React.js in 5 mins.

React Google Login and Node.js implementation

Find Me Online