Ebay is closing its Finding API and my React application needs to move to the Browse API https://developer.ebay.com/api-docs/buy/browse/overview.html and I need to use Oauth. My app does not require a user to authenticate with Ebay, it just shows the ebay auctions that are relevant to the page they are looking at. Within my Ebay developer account I have an application that provides an App ID (Client ID) and Cert ID (Client Secret), however I just cannot figure out how to manage the refresh token request and the application token request so that I can actually send a request to the Browse API.
My question is: within a React application, what is the correct way to use oauth refresh and authorisation tokens, and use them to successfully make a request to an Oauth protected endpoint (in this case Ebay’s)?
I have an Ebay React component (shown at the bottom of this question) and I’ve ‘borrowed’ much of this from How to get access_token using refresh token from Ebay?
However in that question const refreshToken = 'xxxxxxxx'; is mentioned and I can’t figure out how to get one. Ebay has documentation on using a refresh token https://developer.ebay.com/api-docs/static/oauth-refresh-token-request.html which says:
Configuring the request payload
Format the payload of your POST request with the following values:
- Set grant_type to refresh_token.
- Set refresh_token to the refresh token value returned from the authorization code grant request.
So this looks as though I get the refresh token in a response to an authorisation request which seems to be documented at https://developer.ebay.com/api-docs/static/oauth-client-credentials-grant.html for applications such as mine (not users). Following this example I can make a cURL request
curl -X POST 'https://api.ebay.com/identity/v1/oauth2/token' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Authorization: Basic U3DFSDF888888D00000000000000=' \ //not the real details
-d 'grant_type=client_credentials&scope=https%3A%2F% 2Fapi.ebay.com%2Foauth%2Fapi_scope'
-u 'StuartBrr-PRD-cd00000-0000000:PRD-0000-00000-0000-000-000' //not the real details
Which returns
{"access_token":"v^1.1#i^1#p^1#I^3#r^0#f^0#t^H4sI……","expires_in":7200,"token_type":"Application Access Token"}%
But there is no mention of a refresh token. So I suppose I could run a request against the API using that token, but it would only work until the refresh token expired.
If I run
curl 'https://api.ebay.com/identity/v1/oauth2/token'
-d 'grant_type=refresh_token&scope=https%3A%2F% 2Fapi.ebay.com%2Foauth%2Fapi_scope'
-u 'StuartBrr-PRD-cd00000-0000000:PRD-0000-00000-0000-000-000'
I get a response {"error":"invalid_grant","error_description":"the provided authorization refresh token is invalid or was issued to another client"}%
If I run my React application including the below component I can see a preflight request which is successful, and another request which reports a CORS error.
The request with the CORS error is passing the below headers in the payload
So I can’t even get the response which only gives me the Application Access Token, let alone make a subsequent call to the Ebay Browse API
Any guidance very much appreciated!
Below if the React component I have that attempts to get the token and I would like to make the API request
import React from "react";
import axios from "axios";
import queryString from 'query-string';
class Ebay extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
results: true,
error: "",
data: [],
};
}
componentDidMount() {
//Prod
const appID = 'StuartBrr-PRD-cd00000-0000000; // these are obviously not the real details
const certID = 'PRD-0000-00000-0000-000-000;
const URL = 'https://api.ebay.com/identity/v1/oauth2/token';
//sandbox
// const appID = 'StuartBr-STr-SBX-b0000000-00000000';
// const certID = 'SBX-0000000-00000-000-0000-0000;
// const URL = 'https://api.sandbox.ebay.com/identity/v1/oauth2/token';
const token = Buffer.from(`${appID}:${certID}`);
const scopes = [
'https://api.ebay.com/oauth/api_scope'
]
const { data } = axios.post(URL, {
'headers': {
'Authorization': `Basic ${token.toString('base64')}`,
'Content-Type': 'application/x-www-form-urlencoded',
},
})
console.log("HERE IS AXOIS DATA "+ JSON.stringify(data));
}
render() {
console.log("IN EBAY COMPONENT");
// Render results in a table
}
}
export default Ebay;
