Spotify Authorization With React + React-Router

This is an example application demonstrating authenticating a user against the Spotify Web API, using React and React-Router and Redux and React-Router-Redux.

Similarities to Spotify's Web Auth Examples

This example is a variation on the authorization_code demo from Spotify's Web Auth Examples. The main difference is the client code; whereas their example is contained in one index.html file, this example shows how to do the same thing with React and React-Router.

The other difference is the updated server code. Instead of using request directly (and XHR in the browser), this example interfaces with Spotify through the Spotify Web API Node Module (and Spotify Web Api Client in the browser). It also uses fun ES6 goodness. I opened a pull request with them to update their server code to what you see here.

Client Code Structure

The client code is built with React and React-Router and Redux and React-Router-Redux. phew!

The only real config this requires is in client/index.js:

class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router history={hashHistory}>
          <Route path="/" component={App}>
            <IndexRoute component={Login} />
            <Route path="/user/:accessToken/:refreshToken" component={User} />
            <Route path="/error/:errorMsg" component={Error} />
          </Route>
        </Router>
      </Provider>
    );
  }
}

Here, we initialize redux with our store, initialize react router with its history object. Everything else is a fairly traditional React app - the components are in client/components, the actions are in client/actions, and the reducer is in client/reducers.

Server Code Structure

Under the server directory are two files app.js and routes.js. app.js handles all the setup, and all the routes are in, well, routes.js.

Application Flow

The basic flow is this: client hits /login, gets redirected to Spotify's auth url, then gets redirected to /callback. If all is good and dandy, we send the client to /#/user/${access_token}/${refresh_token} which triggers the User page to load via React-Router. If all ain't good, we redirect the client to /#/error/${error message} which triggers the Error page to load via React-Router.

Once the client has the tokens, it requests information from spotify directly through use of the Spotify Web API Client. This happens in client/actions, and the resulting data is interpreted through our reducer. Once the client has the data, User.js defines how it renders.

Set Up

Make sure you create your application, get your id and secret, and register your callback url - localhost:3000/callback is what I used - by following Spotify's Getting Started Guide.

Running

The first thing you'll need to do is set your applications client id, client secret, and callback url. You can do this via the environment variables client_id, client_secret, and redirect_uri. Or by typing them into the code in server/routes.js. Fun tip: because we're using Better NPM Run, you can set these in your package.json - head over there to see an example.

There are three scripts - start, dev, and build.

To run the production bundle:

$ npm run build
$ npm start

To run in dev mode (with hot reloading, and un-minified source maps):

$ npm run dev

Further Reading

The application structure is a simplified version of my React + Redux + Webpack Boilerplate for better ease of understanding. It can certainly be awesome-ified (and maybe a little more complicated) by doing some of the fun tricks in there.

• Spotify's Getting Started Guide
• Spotify's Web API Authorization Guide
• Spotify Web API Node
• Spotify Web API JS/Client
• Spotify's Web API Auth Exampls
• My Pull Request enhancing Spotify's examples
• React Router
• React Router Redux
• React
• Redux
• Better NPM Run
• React + Redux + Webpack Boilerplate