Step 4: Saving as a cookie
When you get back the access token from the API, you then need to parse it from the URL and save it as a cookie. Once it's saved by the pop-up window, you need to close that window and reload the original window.
At the top of Login.js
add the following import
statements:
+import queryString from 'query-string';
+import cookie from 'react-cookies';
Add the following to the constructor:
constructor(props) {
super(props);
+ const {
+ access_token: accessToken, expires_in: expiresIn, state
+ } = queryString.parse(window.location.hash.substring(1));
+
+ if ((accessToken && expiresIn && state) && state === cookie.load('state')) {
+ cookie.save('accessToken', accessToken, { path: '/' });
+ cookie.save('expiresIn', expiresIn, { path: '/' });
+
+ window.opener.location.reload();
+ window.close();
+ }
this.onLoginClick = this.onLoginClick.bind(this);
}
Add the following to the constructor of App.js
:
constructor(props) {
super(props);
+ this.state = {
+ accessToken: cookie.load('accessToken'),
+ expiresIn: cookie.load('expiresIn'),
+ };
}
And update the render
method as follows:
render() {
+ const { accessToken } = this.state;
+ if (accessToken) {
+ return <div>{accessToken}</div>;
+ }
return <Login />;
}
Now when your app reloads you should see your access token displayed on the page. With an actual token, we can start making some API requests. First, take a quick detour to create the components that will be displayed when you're logged in.
Updated almost 5 years ago