initial commit - application and README

Author: kauffecup

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+public/bundle.js

README.md

@@ -0,0 +1,129 @@
+# Spotify Authorization With React + React-Router
+
+This is an example application demonstrating authenticating a user
+[against the Spotify Web API][sag], using [React][r] and [React-Router][rr]
+and [Redux][rx] and [React-Router-Redux][rrr].
+
+## Similarities to Spotify's [Web Auth Examples][wae]
+
+This example is a variation on the `authorization_code` demo from Spotify's
+[Web Auth Examples][wae]. 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][swn] (and [Spotify Web Api Client][swj] in the
+browser). It also uses fun ES6 goodness. I opened a [pull request][spr] with
+them to update their server code to what you see here.
+
+## Client Code Structure
+
+The client code is built with [React][r] and [React-Router][rr] and [Redux][rx]
+and [React-Router-Redux][rrr]. phew!
+
+The only real config this requires is in `client/index.js`:
+
+~~~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][swj]. 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][sgs].
+
+## 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][bnr],
+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:
+
+~~~bash
+$ npm run build
+$ npm start
+~~~
+
+To run in dev mode (with hot reloading, and un-minified source maps):
+
+~~~bash
+$ npm run dev
+~~~
+
+## Further Reading
+
+The application structure is a simplified version of my
+[React + Redux + Webpack Boilerplate][bp] 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][sgs]
+  - [Spotify's Web API Authorization Guide][sag]
+  - [Spotify Web API Node][swn]
+  - [Spotify Web API JS/Client][swj]
+  - [Spotify's Web API Auth Exampls][wae]
+  - [My Pull Request enhancing Spotify's examples][spr]
+  - [React Router][rr]
+  - [React Router Redux][rrr]
+  - [React][r]
+  - [Redux][rx]
+  - [Better NPM Run][bnr]
+  - [React + Redux + Webpack Boilerplate][bp]
+
+[sgs]: https://developer.spotify.com/web-api/tutorial/
+[sag]: https://developer.spotify.com/web-api/authorization-guide/
+[swn]: https://github.com/JMPerez/spotify-web-api-node
+[swj]: https://github.com/JMPerez/spotify-web-api-js
+[wae]: https://github.com/spotify/web-api-auth-examples
+[spr]: https://github.com/spotify/web-api-auth-examples/pull/7
+[rr]:  https://github.com/rackt/react-router
+[rrr]: https://github.com/rackt/react-router-redux
+[r]:   https://facebook.github.io/react/
+[rx]:  http://redux.js.org/
+[bnr]: https://www.npmjs.com/package/better-npm-run
+[bp]:  https://github.com/kauffecup/react-redux-webpack-boilerplate

client/actions/actions.js

@@ -0,0 +1,28 @@
+import Spotify from 'spotify-web-api-js';
+const spotifyApi = new Spotify();
+
+// our constants
+export const SPOTIFY_TOKENS = 'SPOTIFY_TOKENS';
+export const SPOTIFY_ME_BEGIN = 'SPOTIFY_ME_BEGIN';
+export const SPOTIFY_ME_SUCCESS = 'SPOTIFY_ME_SUCCESS';
+export const SPOTIFY_ME_FAILURE = 'SPOTIFY_ME_FAILURE';
+
+/** set the app's access and refresh tokens */
+export function setTokens({accessToken, refreshToken}) {
+  if (accessToken) {
+    spotifyApi.setAccessToken(accessToken);
+  }
+  return { type: SPOTIFY_TOKENS, accessToken, refreshToken };
+}
+
+/* get the user's info from the /me api */
+export function getMyInfo() {
+  return dispatch => {
+    dispatch({ type: SPOTIFY_ME_BEGIN});
+    spotifyApi.getMe().then(data => {
+      dispatch({ type: SPOTIFY_ME_SUCCESS, data: data });
+    }).catch(e => {
+      dispatch({ type: SPOTIFY_ME_FAILURE, error: e });
+    });
+  };
+}

client/components/App.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+/**
+ * Main app component
+ * Has a header and then render's the page content
+ */
+export default class SpotifyLogin extends Component {
+  render() {
+    // injected via react router
+    const {children} = this.props;
+    return (
+      <div className="spotify-login">
+        <h1>Example Spotify + React + React-Router Login Flow</h1>
+        <div className="page-content">
+          <p>This is an example of the Authorization Code flow using routes.</p>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}

client/components/Error.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+/**
+ * Our error page
+ * Displays the error
+ */
+export default class Login extends Component {
+  render() {
+    // injected via react-router
+    const { errorMsg } = this.props.params;
+    return (
+      <div className="error">
+        <h2>An Error Occured</h2>
+        <p>{errorMsg}</p>
+      </div>
+    );
+  }
+}

client/components/Login.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import loginSVG from '../log_in.svg';
+
+/**
+ * Our login page
+ * Has a login button that hit's the login url
+ */
+export default class Login extends Component {
+  render() {
+    return (
+      <div className="login">
+        <h2>Here's our login page!</h2>
+        <a href="/login" dangerouslySetInnerHTML={{__html: loginSVG}}></a>
+      </div>
+    );
+  }
+}

client/components/User.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import { connect }      from 'react-redux';
+import {
+  getMyInfo,
+  setTokens,
+}   from '../actions/actions';
+
+/**
+ * Our user page
+ * Displays the user's information
+ */
+class User extends Component {
+  /** When we mount, get the tokens from react-router and initiate loading the info */
+  componentDidMount() {
+    // params injected via react-router, dispatch injected via connect
+    const {dispatch, params} = this.props;
+    const {accessToken, refreshToken} = params;
+    dispatch(setTokens({accessToken, refreshToken}));
+    dispatch(getMyInfo());
+  }
+
+  /** Render the user's info */
+  render() {
+    const { accessToken, refreshToken, user } = this.props;
+    const { loading, display_name, images, id, email, external_urls, href, country, product } = user;
+    const imageUrl = images[0] ? images[0].url : "";
+    // if we're still loading, indicate such
+    if (loading) {
+      return <h2>Loading...</h2>;
+    }
+    return (
+      <div className="user">
+        <h2>{`Logged in as ${display_name}`}</h2>
+        <div className="user-content">
+          <img src={imageUrl} />
+          <ul>
+            <li><span>Display name</span><span>{display_name}</span></li>
+            <li><span>Id</span><span>{id}</span></li>
+            <li><span>Email</span><span>{email}</span></li>
+            <li><span>Spotify URI</span><span><a href={external_urls.spotify}>{external_urls.spotify}</a></span></li>
+            <li><span>Link</span><span><a href={href}>{href}</a></span></li>
+            <li><span>Profile Image</span><span><a href={imageUrl}>{imageUrl}</a></span></li>
+            <li><span>Country</span><span>{country}</span></li>
+            <li><span>Product</span><span>{product}</span></li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(state => state)(User);

client/index.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { render }           from 'react-dom';
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import thunk        from 'redux-thunk';
+import { Provider } from 'react-redux';
+import { Router, Route, IndexRoute, hashHistory } from 'react-router';
+import { syncHistory, routeReducer }     from 'react-router-redux';
+import { createHistory } from 'history';
+import reducer from './reducers';
+import App     from './components/App';
+import Login   from './components/Login';
+import User    from './components/User';
+import Error   from './components/Error';
+
+// load our css. there probably is a better way to do this
+// but for now this is our move
+require('./style.less');
+
+// Sync dispatched route actions to the history
+const reduxRouterMiddleware = syncHistory(hashHistory)
+const createStoreWithMiddleware = applyMiddleware(
+  thunk,
+  reduxRouterMiddleware
+)(createStore)
+const store = createStoreWithMiddleware(reducer)
+
+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>
+    );
+  }
+}
+
+// render town
+const rootElement = document.getElementById('root');
+render(<Root />, rootElement);