The redirect_uri issue in LinkedIn Login using React

I am trying to add LinkedIn authentication with React following this link https://github.com/orionsoft/react-linkedin-login. The tutorial doesn't mention the redirect_uri due to which I have left it as blank. But when I try to log in using my react app, an error occurs What is the correct redirect_uri to use in react application. The LinkedIn error goes like this "The redirect_uri does not match the registered value".

My website URL is http://localhost:3000

Please refer the screenshots for the settings of LinkedIn Developer Console

I am adding the code in react

import React, { Component } from 'react';  import LinkedIn from 'react-linkedin-login'    class SocialLogin extends Component {    constructor(props)    {      super(props);    }        callbackLinkedIn ({code, redirectUri}) {      console.log(code+"linked in code")    }          render() {      return (        <div className="login-box">          <div className="social-login">               <LinkedIn                clientId='***********'                callback={this.callbackLinkedIn.bind(this)}                text='LinkedIn' />           </div>        </div>      );    }  }    export default SocialLogin;

I am getting this issue ""The redirect_uri does not match the registered value"".please refer the last image

I have given the 4 redirect URLs like:

1. http://localhost:3000
2. http://localhost:3000/callback
3. http://localhost:3000/signin-linkedin
4. http://localhost:3000/auth/linkedin/callback

But I am getting the same issue. Please help me out with this issue.

5 Answers

Answers 1

Seeing your redirect URL in the screenshot, it can be deciphered that: redirect_uri = http%3A%2F%2Flocalhost%3A3000%2F which translates to http://localhost:3000/.

You are missing a / in the end. Your currently added URLs are all unnecessary.

Answers 2

You need to add the "http://localhost:3000/" in Authorized URI section. The request sent to Linkedin with the trailing slash at the end as parameter for redirect_uri.

I have attached the screenshots below

Answers 3

Possible issue might be the fact that the initial URL(The URL making the API Call) and the redirect URL(The URL which should open post response from linkedin) probably have different domains.

You can use a tool like filder to capture the API call to linkedIn login API and check what was the url in HTTP Request. You need to put a url with the same domain in the RedirectURL.

Answers 4

Please check that you passing the same clientId value as in developers console also while going through both the snaps you provided the clientId is not matching.

https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=81jbduxh1ev9tj&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F&state=987654321&scope=r_basicprofile

Answers 5

A lot of API's don't trust localhost. I'd suggest trying some tools like https://ngrok.com which tunnels your http/https traffic and gives you unique url.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati