React and LinkedIn Authorization

Image for post
Image for post

Introduction

Plan

  1. Implement a component with “Sign In with LinkedIn” button.
  2. Authorization logic on redirection page.
  3. Back-end(optional).

1. LinkedIn URL

Image for post
Image for post
Pomodoro by Increaser Details

Now, let’s make a URL for the user to go through LinkedIn part of the authorization.

src/constants/auth.js

LINKEDIN_STATE is a unique string value of your choice that is hard to guess. Used to prevent CSRF.

To build the URL, we write a function that receives the base part of the URL and object with parameters. It will return URL made by merging base part and parameters converted to a query string.

src/utils/generic.js

2. Component

Image for post
Image for post
Sign in with Google, LinkedIn or Facebook

If we focus on the LinkedIn button and remove code related to other providers, we end up with component shown below.

src/components/auth.js

When a user decides to go with LinkedIn, we are opening a new window with a URL from the constants module. Some browser may open a new tab, instead of a new window, but don’t worry, it doesn’t change anything.

src/components/auth.js

After completing the LinkedIn authorization, the user will be redirected to the page specified in URL. From there we will post a message back to the window that opened popup. To handle this message, we add an event listener.

src/components/auth.js

If everything good with the message, we will continue the authorization process by making a request to the back-end.

On component unmount, we want to remove the event listener, and close popup if it exists.

src/components/auth.js

3. Redirection Page

src/components/layout.js

To convert the query part of the URL into an object, we can write the function shown below.

src/utils/generic.js

4. Back-end(optional)

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store