Rodion Chachura

React and LinkedIn Authorization



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

1. LinkedIn URL

Pomodoro by Increaser Details

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


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.


No more procrastination. You have time for goals! Increaser will guide you.

2. Component

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.


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.


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.


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.


3. Redirection Page


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


4. Back-end(optional)

Reach the next level of focus and productivity with


Indie hacker behind More at