Update LoginRequired and secure local cookies

config/default.js

@@ -26,6 +26,7 @@ module.exports = {
   // 2592000 is 30 days in seconds.
   cookieMaxAge: 2592000,
   cookieName: 'jwt_api_auth_token',
+  cookieSecure: true,
 
   isDeployed: true,
   isDevelopment: false,
@@ -50,6 +51,7 @@ module.exports = {
     'apiPath',
     'cookieName',
     'cookieMaxAge',
+    'cookieSecure',
     'isDeployed',
     'isDevelopment',
   ],

config/development.js

@@ -14,6 +14,8 @@ module.exports = {
   isDeployed: false,
   isDevelopment: true,
 
+  cookieSecure: false,
+
   serverPort: 3000,
   webpackServerHost,
   webpackServerPort,

src/core/components/LoginPage/index.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import Helmet from 'react-helmet';
 
 import { startLoginUrl } from 'core/api';
 import { gettext as _ } from 'core/utils';
@@ -9,10 +10,12 @@ export default class LoginPage extends React.Component {
   }
 
   render() {
+    const title = _('Login Required');
     const { message } = this.props;
     return (
       <div>
-        <h1>{_('Login Required')}</h1>
+        <Helmet title={title} />
+        <h1>{title}</h1>
         <p className="login-message">
           {message || _('You must be logged in to access this page.')}
         </p>

src/core/containers/HandleLogin/index.js

@@ -55,7 +55,7 @@ function createLoadData(dispatch) {
           dispatch(setJWT(token));
           cookie.save(config.get('cookieName'), token, {
             path: '/',
-            secure: true,
+            secure: config.get('cookieSecure'),
             maxAge: config.get('cookieMaxAge'),
           });
           router.push('/search');

src/core/containers/LoginRequired/index.js

@@ -2,29 +2,26 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import LoginPage from 'core/components/LoginPage';
 
-export function mapStateToProps(Component) {
-  return (state) => ({
+export function mapStateToProps(state) {
+  return {
     authenticated: !!state.auth.token,
-    Component,
-  });
+  };
 }
 
+// This class is exported for testing outside of redux.
 export class LoginRequired extends React.Component {
   static propTypes = {
     authenticated: PropTypes.bool.isRequired,
-    // This is really a react component class but I guess that's a function.
-    Component: PropTypes.func.isRequired,
+    children: PropTypes.node,
   }
 
   render() {
-    const { authenticated, Component, ...childProps } = this.props;
+    const { authenticated, children } = this.props;
     if (authenticated) {
-      return <Component {...childProps} />;
+      return children;
     }
     return <LoginPage />;
   }
 }
 
-export default function loginRequired(Component) {
-  return connect(mapStateToProps(Component))(LoginRequired);
-}
+export default connect(mapStateToProps)(LoginRequired);

src/search/routes.js

@@ -4,15 +4,15 @@ import { IndexRoute, Route } from 'react-router';
 import App from './containers/App';
 import CurrentSearchPage from './containers/CurrentSearchPage';
 import AddonPage from './containers/AddonPage';
-import loginRequired from 'core/containers/LoginRequired';
+import LoginRequired from 'core/containers/LoginRequired';
 import HandleLogin from 'core/containers/HandleLogin';
 
 export default (
-  <Route path="/">
-    <Route path="/search" component={loginRequired(App)}>
+  <Route path="/" component={App}>
+    <Route path="search" component={LoginRequired}>
       <IndexRoute component={CurrentSearchPage} />
       <Route path="addons/:slug" component={AddonPage} />
     </Route>
-    <Route path="/fxa-authenticate" component={HandleLogin} />
+    <Route path="fxa-authenticate" component={HandleLogin} />
   </Route>
 );

tests/client/core/containers/TestLoginRequired.js

@@ -4,44 +4,42 @@ import { shallowRender } from 'tests/client/helpers';
 import { mapStateToProps, LoginRequired } from 'core/containers/LoginRequired';
 import LoginPage from 'core/components/LoginPage';
 
-describe('LoginRequired helpers', () => {
+describe('<LoginRequired />', () => {
   class MyComponent extends React.Component {
     render() {
       return <p>Authenticated content.</p>;
     }
   }
 
-  describe('rendered component when not authenticated', () => {
-    it('renders <LoginPage />', () => {
-      const root = shallowRender(<LoginRequired Component={MyComponent} authenticated={false} />);
-      assert.equal(root.type, LoginPage);
-    });
+  it('renders <LoginPage /> when unauthenticated', () => {
+    const root = shallowRender(
+      <LoginRequired authenticated={false}>
+        <MyComponent />
+      </LoginRequired>
+    );
+    assert.equal(root.type, LoginPage);
   });
 
-  describe('rendered component when authenticated', () => {
-    it('renders the child component', () => {
-      const root = shallowRender(<LoginRequired Component={MyComponent} authenticated />);
-      assert.equal(root.type, MyComponent);
-    });
-
-    it('passes along its props', () => {
-      const root = shallowRender(
-        <LoginRequired Component={MyComponent} authenticated foo="bar" />);
-      assert.deepEqual(root.props, {foo: 'bar'});
-    });
+  it('renders the children when authenticated', () => {
+    const root = shallowRender(
+      <LoginRequired authenticated>
+        <MyComponent />
+      </LoginRequired>
+    );
+    assert.equal(root.type, MyComponent);
   });
 
   describe('mapStateToProps', () => {
-    it('sets authenticated and Component when authenticated', () => {
+    it('sets authenticated to true when there is a token', () => {
       assert.deepEqual(
-        mapStateToProps(MyComponent)({auth: {token: 'foo'}}),
-        {authenticated: true, Component: MyComponent});
+        mapStateToProps({auth: {token: 'foo'}}),
+        {authenticated: true});
     });
 
-    it('sets authenticated and Component when unauthenticated', () => {
+    it('sets authenticated to false when there is not a token', () => {
       assert.deepEqual(
-        mapStateToProps(MyComponent)({auth: {}}),
-        {authenticated: false, Component: MyComponent});
+        mapStateToProps({auth: {}}),
+        {authenticated: false});
     });
   });
 });