title: How to get authentication to the api
body: <p>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 <a href="https://github.com/unsplash/unsplash-js#dependencies" rel="nofollow noreferrer">https://github.com/unsplash/unsplash-js#dependencies</a> also there is additional information in here <a href="https://unsplash.com/documentation#authorization-workflow" rel="nofollow noreferrer">https://unsplash.com/documentation#authorization-workflow</a>. I am new to authorization.</p>
  
  <pre><code>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 =&gt; {
          console.log(json.access_token)
          unsplash.auth.setBearerToken(json.access_token);
        })
        .catch(err =&gt; 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 =&gt; {
          console.log(json);
        });
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;form id='form'&gt;
            &lt;input type='text' id='input' &gt;&lt;/input&gt;
            &lt;input type='submit' id='submit' onClick={this.handleClick} &gt;&lt;/input&gt;
          &lt;/form&gt;
          &lt;div id='field' &gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>The error:</p>
  
  <pre><code>https://unsplash.com/oauth/authorize?client_id=1424074b20f17701ec8c0601fd15ca686c70e2cb0e645f8137533d8063e664bc&amp;redirect_uri=urn:ietf:wg:oauth:2.0:oob&amp;response_type=code&amp;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 &lt;App&gt; 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.
  </code></pre>