React and LinkedIn Authorization

Introduction

For a long time, Pomodoro by Increaser had presented only two ways for a user to sign in — via Google and Facebook. These two providers already cover the majority of the potential user, but if it is easy to let more people in, why not to do so? In this story, my goal is to explain to you both back-end and front-end parts so that you can add LinkedIn sign-in functionality in no-time.

Plan

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

1. LinkedIn URL

To make authorization with LinkedIn, we first want to create an app in LinkedIn Developers. We need to make sure that we’ve selected permissions shown below.

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

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

Realize your ambitions!

2. Component

Pomodoro by Increaser provides a few ways to sign in by displaying a component with different buttons.

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

When a user appears on the redirection page, we are getting parameters from the URL and post a message back to the window that opened popup.

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)

On the back-end, we will write a function that receives code and returns user name, email, and id after calling LinkedIn API.

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

Increaser

--

--

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