How to get authentication to the api

Question

I want to make a image search web app with unsplash api, but I can't seem to get it to work, I am following instructions on here https://github.com/unsplash/unsplash-js#dependencies also there is additional information in here https://unsplash.com/documentation#authorization-workflow. I am new to authorization.

import React, { Component } from 'react';
import Unsplash, { toJson } from 'unsplash-js';
import './App.css';

const unsplash = new Unsplash({
  applicationId: '1424074b20f17701ec8c0601fd15ca686c70e2cb0e645f8137533d8063e664bc',
  secret: 'd47bcd8287983e24da69c37348b21bee55b4c808390413f52fa6aa545b11debc',
  callbackUrl: 'urn:ietf:wg:oauth:2.0:oob',
  headers: {
    "Accept-Version": "v1"
  }
});

class App extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    const authenticationUrl = unsplash.auth.getAuthenticationUrl([
      "public",
      "read_user",
      "write_user",
      "read_photos",
      "write_photos"
    ]);
    location.assign(authenticationUrl);
    unsplash.auth.userAuthentication(query.code)
      .then(toJson)
      .then(json => {
        console.log(json.access_token)
        unsplash.auth.setBearerToken(json.access_token);
      })
      .catch(err => console.log('Auth err', err));

  }

  handleClick() {
    let query = document.getElementById('input').value;
    unsplash.search.photos(query, 1) //function provided by api
      .then(toJson)
      .then(json => {
        console.log(json);
      });
  }

  render() {
    return (
      <div className="App">
        <form id='form'>
          <input type='text' id='input' ></input>
          <input type='submit' id='submit' onClick={this.handleClick} ></input>
        </form>
        <div id='field' >
        </div>
      </div>
    );
  }
}

export default App;

The error:

https://unsplash.com/oauth/authorize?client_id=1424074b20f17701ec8c0601fd15ca686c70e2cb0e645f8137533d8063e664bc&redirect_uri=urn:ietf:wg:oauth:2.0:oob&response_type=code&scope=public+read_user+write_user+read_photos+write_photos App.js:29
 ReferenceError: query is not defined App.js:31
The above error occurred in the <App> component:
    in App (at index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
 index.js:2178
 ReferenceError: query is not defined App.js:31
./src/App.js
  Line 31:  'query' is not defined  no-undef

Search for the keywords to learn more about each error.

Could you at least paste the error message you are getting from catch() ? In what way it doesn't work? — Greg Wozniak, Jul 16 '18 at 12:00
well the error shows, query is not defined. Look at `query.code` in `componentDidMount` — paulsbecks, Jul 16 '18 at 12:14
Yeah, I think I need to get the authentication code from the url when I get redirected to the `authenticationUrl` and pass that code as `query`. But I have no idea how to do that. — SnakesCantWearBoots, Jul 16 '18 at 12:18

score 1 · Answer 1 · answered Jul 17 '18 at 13:31

The documentation says that:

// The OAuth code will be passed to your callback URL as a query string

Before that: Now that you have an authentication URL, you'll want to redirect the user to it. location.assign(authenticationUrl);

So:

You will probably need some routing solution like React Router or similar.
On click, redirect a user to the URL (authenticationURL) using your router (React Router example: import { Redirect } from react-router-dom then <Redirect to={url} /> in the code.
Once user is authorised, Unsplash will drive him back to your app with code in the URL query string. The presence of the code you may want to capture in componentDidMount() or componentDidUpdate() (depending on your app/solution). The query string you should be able to capture from the Router. If you are using React Router you can follow the post: How to get parameter value from query string
Pass the code as a parameter. The rest looks ok.

How to get authentication to the api

1 Answers1