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.
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.
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.
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.
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.
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 startTo run in dev mode (with hot reloading, and un-minified source maps):
$ npm run devThe 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.