React - Unable to pass token to Content Explorer

SOLVED
Go to solution
Highlighted
New Contributor

React - Unable to pass token to Content Explorer

I seem to be running into an issue implementing Content Explorer in React. I have the api call occurring in componentDidMount() and it is successfully generating a token. I am then able to render the token on screen as an h1 (for testing purposes). I am also able to console.log the token but when I attempt to pass the token into the 'token' parameter in ContentExplorer it does not seem to work. I have also tried making ContentExplorer as a component separate from my api call. I am able to successfully pass the token into this separate component and render it as an h1 but it still will not work correctly when passed into ContentExplorer as a parameter. Here is my code below. In this code I am doing my api call and ContentExplorer in the same component. Any help as to why the token will not function properly would be greatly appreciated. Thanks. 

 

class Box extends Component {    
constructor(props) {
super(props);
this.state = {
accessToken: ''
}
}

async componentDidMount() {
const authenticationUrl = "https://api.box.com/oauth2/token";
let search = window.location.search;
let params = new URLSearchParams(search);
let accessToken = await axios.post(
authenticationUrl,
queryString.stringify({
grant_type: 'authorization_code',
code: params.get('code'),
client_id: 'XXXXXXXXXXXXXXXXXXXXXX',
client_secret: 'XXXXXXXXXXXXXXXXXXXX'
})
)
.then(response => response.data.access_token);
this.setState({accessToken: accessToken});
console.log(accessToken);
} render() {
let token = this.state.accessToken;
return(
<div>
<IntlProvider locale="en">
<ContentExplorer
contentPreviewProps={{
contentSidebarProps: {
detailsSidebarProps: {
hasProperties: true,
hasNotices: true,
hasAccessStats: true,
hasClassification: true,
hasRetentionPolicy: true,
},
// features: FEATURES,
hasActivityFeed: true,
hasMetadata: true,
hasSkills: true,
hasVersions: true,
},
}}
// features={FEATURES}
rootFolderId="XXXXXXXX"
token={token}
/>
</IntlProvider>
<h1>{token}</h1>
</div>
)
}
}
export default Box;

 

2 REPLIES 2
Highlighted
New Contributor

Re: React - Unable to pass token to Content Explorer

Checking to see if anyone has a solution for this issue as it is blocking our progress with getting Box implemented with our app. 

Highlighted
Box Employee

Re: React - Unable to pass token to Content Explorer

Hi @dhebert-dev ,

 

It seems like the root of the issue is that ContentExplorer does not handle a string access token being changed after mounting.

 

You probably have two options:

  1. Render ContentExplorer conditionally based on when your have resolved your token
  2. Use a token generator function instead -- I couldn't find a good example in box-ui-elements, but here is some documentation from box-content-preview: https://github.com/box/box-content-preview#token-generator-function

Hope that helps,

Conrad