Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 enter image description here

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 enter image description here

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.

like image 948
Allu Manikyam Avatar asked Jun 08 '18 06:06

Allu Manikyam


2 Answers

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.

like image 178
yeshashah Avatar answered Sep 20 '22 07:09

yeshashah


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 enter image description here

enter image description here

like image 40
Jeeva Avatar answered Sep 20 '22 07:09

Jeeva