I'm currently implementing OAuth login with LinkedIn in my React and Play app and am running into a CORS error when trying to redirect to the authorization page in my dev environment:

XMLHttpRequest cannot load ;client_i…basicprofile&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fusers%2Flinkedin. Redirect from ';client_i…basicprofile&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fusers%2Flinkedin' to '=%2Foauth%2Fv2%2Flogin-s…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I have the following setup:

• Play server running at localhost:9000
• React app (created via create-react-app) running at localhost:3000

My JS code calls the /auth/linkedin endpoint which is implemented as follows:

Action { implicit req: RequestHeader =>
  val csrfToken = CSRF.getToken.get.value
  Redirect(linkedinUrl(oauthConfig.linkedinClientId, csrfToken)).withSession("state" -> csrfToken)
}

I have my Play application set to handle CORS appropriately.

My react app just makes a request to the above endpoint via Axios:

axios.get('/auth/linkedin')

This responds with a 303 with a redirect to the LinkedIn auth page which then gives me the error.

How do I get the CORS policy working correctly in this dev setup? I've tried adding the following to my package.json as the create-react-app documentation recommends:

"proxy": "http://localhost:9000",

And I've also tried setting a request header to "Access-Control-Allow-Origin" : "*" on the redirect in the Play server with no success.

Note that going to localhost:9000/auth/linkedin redirects properly.

I'm currently implementing OAuth login with LinkedIn in my React and Play app and am running into a CORS error when trying to redirect to the authorization page in my dev environment:

XMLHttpRequest cannot load https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_i…basicprofile&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fusers%2Flinkedin. Redirect from 'https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_i…basicprofile&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fusers%2Flinkedin' to 'https://www.linkedin.com/uas/login?session_redirect=%2Foauth%2Fv2%2Flogin-s…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I have the following setup:

• Play server running at localhost:9000
• React app (created via create-react-app) running at localhost:3000

My JS code calls the /auth/linkedin endpoint which is implemented as follows:

Action { implicit req: RequestHeader =>
  val csrfToken = CSRF.getToken.get.value
  Redirect(linkedinUrl(oauthConfig.linkedinClientId, csrfToken)).withSession("state" -> csrfToken)
}

I have my Play application set to handle CORS appropriately.

My react app just makes a request to the above endpoint via Axios:

axios.get('/auth/linkedin')

This responds with a 303 with a redirect to the LinkedIn auth page which then gives me the error.

How do I get the CORS policy working correctly in this dev setup? I've tried adding the following to my package.json as the create-react-app documentation recommends:

"proxy": "http://localhost:9000",

And I've also tried setting a request header to "Access-Control-Allow-Origin" : "*" on the redirect in the Play server with no success.

Note that going to localhost:9000/auth/linkedin redirects properly.

• javascript
• reactjs
• oauth
• playframework
• cors

3 Answers 3

https://www.linkedin.com/oauth/v2/authorization responses apparently don’t include the Access-Control-Allow-Origin response header, and because they do not, your browser blocks your frontend JavaScript code from accessing the responses.

There are no changes you can make to your own frontend JavaScript code nor backend config settings that’ll allow your frontend JavaScript code to make requests the way you’re trying directly to https://www.linkedin.com/oauth/v2/authorization and get responses back.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS explains in more detail but the gist of it is: for CORS, the server the request is being sent to must be configured to send the Access-Control-Allow-Origin response header, nor your own backend server.

2019-05-30 update

The current state of things seems to be that when needing to do LinkedIn authorization, you’ll have to initiate the request from your backend code. There’s no way you can do it from your frontend code, because LinkedIn no longer provides any support for it at all.

LinkedIn did previously provide some support for handling it from frontend code. But the page that documented it, https://developer.linkedin.com/docs/getting-started-js-sdk, now has this:

The JavaScript SDK is not currently supported

And https://engineering.linkedin.com/blog/2018/12/developer-program-updates has this:

Our JavaScript and Mobile Software Development Kits (SDKs) will stop working. Developers will need to migrate to using OAuth 2.0 directly from their apps.

So the remainder of this answer (from 2017-06-13) has now become obsolete. But it’s preserved below for the sake of keeping the history complete.

2017-06-13 details, now obsoleted

Anyway https://developer.linkedin.com/docs/getting-started-js-sdk has official docs that explain how to request authorization for a user cross-origin, which appears to be just this:

<script type="text/javascript" src="//platform.linkedin.com/in.js">
    api_key:   [API_KEY]
    onLoad:    [ONLOAD]
    authorize: [AUTHORIZE]
    lang:      [LANG_LOCALE]

IN.User.authorize(callbackFunction, callbackScope);
</script>

And https://developer.linkedin.com/docs/signin-with-linkedin has docs for another auth flow:

<script type="in/Login"></script> <!-- Create the "Sign In with LinkedIn" button-->

<!-- Handle async authentication & retrieve basic member data -->
<script type="text/javascript">
    
    // Setup an event listener to make an API call once auth is complete
    function onLinkedInLoad() {
        IN.Event.on(IN, "auth", getProfileData);
    }

    // Handle the successful return from the API call
    function onSuccess(data) {
        console.log(data);
    }

    // Handle an error response from the API call
    function onError(error) {
        console.log(error);
    }

    // Use the API call wrapper to request the member's basic profile data
    function getProfileData() {
        IN.API.Raw("/people/~").result(onSuccess).error(onError);
    }

</script>

I ran into a similar problem, so let's divide this problem into detailed steps

1. Hit request to get the code(from frontend)
2. now send this code to the backend
3. In the backend, make another call to LinkedIn OAuth API and get the access token
4. With this access token make 3 separate calls to get the name, profile picture and email of the user(yes you heard that right you need to make 3 separate calls and also the response JSON format is not very appealing)

Visit this for the detailed step-by-step process, it involves a lot of things. I can just share the process here but for the actual implementation visit this.

https://www.wellhow.online/2021/04/setting-up-linkedin-oauth-and-fixing.html

What could be done is:

window.location.href='http://localhost:9000/auth/linkedin'

The urlEndPoint could be directly to linkedIn's API or a back-end service which makes the call to linkedIn's API.