Added standardjs and multitab logout

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .next
+config.json

README.md

@@ -9,7 +9,7 @@ You can access a simple demo here: https://nextjs-auth0.now.sh
 * Create an account at Auth0 (https://auth0.com)
 * Add your endpoints to your client's allowed urls like this ![](https://i.imgur.com/KmIc96g.png)
 * Add your logout endpoint to your account allowed urls like this ![](https://i.imgur.com/5qZYSQ8.png)
-* Add your Auth0 credentials to [this file](https://github.com/luisrudge/next.js-auth0/blob/master/utils/lock.js)
+* Copy the file `config.sample.json` at the root folder, rename it as `config.json` and add your Auth0 keys
 
 ## Running Locally
 

components/ForkThis.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 
 export default () => (
   <div>
@@ -28,12 +28,12 @@ export default () => (
             }
         }`}
     </style>
-    <a href="https://github.com/luisrudge/next.js-auth0" className="github-corner" aria-label="View source on Github">
-      <svg width="80" height="80" viewBox="0 0 250 250" style={{ fill: '#333', color: '#fff', position: 'absolute', top: 0, border: 0, right: 0 }} aria-hidden="true">
-        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
-        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={{ transformOrigin: '130px 106px' }} className="octo-arm" />
-        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" className="octo-body" />
+    <a href='https://github.com/luisrudge/next.js-auth0' className='github-corner' aria-label='View source on Github'>
+      <svg width='80' height='80' viewBox='0 0 250 250' style={{ fill: '#333', color: '#fff', position: 'absolute', top: 0, border: 0, right: 0 }} aria-hidden='true'>
+        <path d='M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z' />
+        <path d='M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2' fill='currentColor' style={{ transformOrigin: '130px 106px' }} className='octo-arm' />
+        <path d='M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z' fill='currentColor' className='octo-body' />
       </svg>
     </a>
   </div>
-);
+)

components/Header.js

@@ -1,11 +1,11 @@
-import React, { PropTypes } from 'react';
-import Link from 'next/link';
-import css from 'next/css';
+import React, { PropTypes } from 'react'
+import Link from 'next/link'
+import css from 'next/css'
 
 const styles = {
   header: css({
     display: 'flex',
-    marginBottom: 20,
+    marginBottom: 20
   }),
   link: isActive => css({
     marginRight: 20,
@@ -20,21 +20,21 @@ const styles = {
     transition: 'color .25s',
     fontWeight: isActive ? '600' : '400',
     ':hover': {
-      color: '#333',
-    },
-  }),
-};
+      color: '#333'
+    }
+  })
+}
 
 const links = [
   { href: '/', text: 'Home' },
   { href: '/about', text: 'About' },
   { href: '/secret', text: 'Top Secret', authRequired: true },
   { href: '/auth/sign-in', text: 'Sign In', anonymousOnly: true },
-  { href: '/auth/sign-off', text: 'Sign Off', authRequired: true },
-];
+  { href: '/auth/sign-off', text: 'Sign Off', authRequired: true }
+]
 
 const getAllowedLinks = isAuthenticated => links.filter(l => !l.authRequired || (l.authRequired && isAuthenticated))
-                                                .filter(l => !isAuthenticated || (isAuthenticated && !l.anonymousOnly));
+                                                .filter(l => !isAuthenticated || (isAuthenticated && !l.anonymousOnly))
 
 const Header = ({ isAuthenticated, currentUrl }) => (
   <div className={styles.header}>
@@ -46,11 +46,11 @@ const Header = ({ isAuthenticated, currentUrl }) => (
       </Link>
     ))}
   </div>
-);
+)
 
 Header.propTypes = {
   isAuthenticated: PropTypes.bool.isRequired,
-  currentUrl: PropTypes.string.isRequired,
-};
+  currentUrl: PropTypes.string.isRequired
+}
 
-export default Header;
+export default Header

components/NotAuthorized.js

@@ -1,19 +1,19 @@
-import React from 'react';
-import Link from 'next/link';
-import css from 'next/css';
+import React from 'react'
+import Link from 'next/link'
+import css from 'next/css'
 
 const styles = {
   heading: css({
     fontSize: 50,
     fontWeight: 200,
     lineHeight: '40px',
-    color: '#e74c3c',
+    color: '#e74c3c'
   }),
   content: css({
     fontSize: 30,
     fontWeight: 200,
     lineHeight: '40px',
-    color: '#e74c3c',
+    color: '#e74c3c'
   }),
   link: css({
     color: '#e74c3c',
@@ -24,16 +24,16 @@ const styles = {
     lineHeight: '30px',
     transition: 'border-bottom .2s',
     ':hover': {
-      borderBottomColor: '#e74c3c',
-    },
-  }),
-};
+      borderBottomColor: '#e74c3c'
+    }
+  })
+}
 
 export default () => (
   <div>
     <h1 className={styles.heading}>You can't see this!</h1>
     <p className={styles.content}>
-      You're not authenticated yet. Maybe you want to <Link href="/auth/sign-in"><a className={styles.link}>sign in</a></Link> and see what happens?
+      You're not authenticated yet. Maybe you want to <Link href='/auth/sign-in'><a className={styles.link}>sign in</a></Link> and see what happens?
     </p>
   </div>
-);
+)

config.sample.json

@@ -0,0 +1,4 @@
+{
+  "AUTH0_CLIENT_ID": "",
+  "AUTH0_CLIENT_DOMAIN": ""
+}

hocs/defaultPage.js

@@ -1,43 +1,64 @@
-import React from 'react';
-import Head from 'next/head';
-import css from 'next/css';
+import React from 'react'
+import Head from 'next/head'
+import css from 'next/css'
 
-import ForkThis from '../components/ForkThis';
-import Header from '../components/Header';
-import { getUserFromCookie, getUserFromLocalStorage } from '../utils/auth';
+import ForkThis from '../components/ForkThis'
+import Header from '../components/Header'
+import { getUserFromCookie, getUserFromLocalStorage } from '../utils/auth'
 
 const styles = {
   app: css({
     height: '100vh',
-    width: '100vw',
+    width: '100vw'
   }),
   main: css({
     maxWidth: 1024,
     margin: '0 auto',
-    padding: 30,
-  }),
-};
+    padding: 30
+  })
+}
 
 export default Page => class DefaultPage extends React.Component {
-  static getInitialProps(ctx) {
-    const loggedUser = process.browser ? getUserFromLocalStorage() : getUserFromCookie(ctx.req);
-    const pageProps = Page.getInitialProps && Page.getInitialProps(ctx);
+  static getInitialProps (ctx) {
+    const loggedUser = process.browser ? getUserFromLocalStorage() : getUserFromCookie(ctx.req)
+    const pageProps = Page.getInitialProps && Page.getInitialProps(ctx)
     return {
       ...pageProps,
       loggedUser,
       currentUrl: ctx.pathname,
-      isAuthenticated: !!loggedUser,
-    };
+      isAuthenticated: !!loggedUser
+    }
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.logout = this.logout.bind(this)
+  }
+
+  logout (eve) {
+    if (eve.key === 'logout') {
+      this.props.url.pushTo(`/?logout=${eve.newValue}`)
+    }
   }
-  render() {
+
+  componentDidMount () {
+    window.addEventListener('storage', this.logout, false)
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('storage', this.logout, false)
+  }
+
+  render () {
     const cssFiles = [
-      'https://unpkg.com/normalize.css@5.0.0/normalize.css',
-    ];
+      'https://unpkg.com/normalize.css@5.0.0/normalize.css'
+    ]
     return (
       <div>
         <Head>
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          {cssFiles.map((c, i) => <link key={i} href={c} rel="stylesheet" />)}
+          <meta name='viewport' content='width=device-width, initial-scale=1' />
+          {cssFiles.map((c, i) => <link key={i} href={c} rel='stylesheet' />)}
           <style>
             {`* {
               margin: 0;
@@ -54,6 +75,6 @@ export default Page => class DefaultPage extends React.Component {
           </div>
         </div>
       </div>
-    );
+    )
   }
-};
+}

hocs/securePage.js

@@ -1,9 +1,9 @@
 /* eslint react/prop-types: 0 */
-import React from 'react';
+import React from 'react'
 
-import NotAuthorized from '../components/NotAuthorized';
-import defaultPage from './defaultPage';
+import NotAuthorized from '../components/NotAuthorized'
+import defaultPage from './defaultPage'
 
-const securePagehoc = Page => props => (!props.isAuthenticated ? <NotAuthorized /> : <Page {...props} />);
+const securePagehoc = Page => props => (!props.isAuthenticated ? <NotAuthorized /> : <Page {...props} />)
 
-export default Page => defaultPage(securePagehoc(Page));
+export default Page => defaultPage(securePagehoc(Page))

package.json

@@ -4,22 +4,22 @@
     "auth0-lock": "10.5.1",
     "js-cookie": "2.1.3",
     "jwt-decode": "2.1.0",
-    "next": "1.1.0"
+    "next": "1.1.1"
   },
   "devDependencies": {
-    "babel-eslint": "7.1.0",
-    "eslint": "3.9.1",
-    "eslint-config-airbnb": "12.0.0",
-    "eslint-plugin-import": "2.1.0",
-    "eslint-plugin-jsx-a11y": "2.2.3",
-    "eslint-plugin-react": "6.5.0"
+    "standard": "8.5.0",
+    "babel-eslint": "7.1.0"
   },
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "standard"
   },
   "now": {
     "alias": "nextjs-auth0.now.sh"
+  },
+  "standard": {
+    "parser": "babel-eslint"
   }
 }

pages/about.js

@@ -1,20 +1,20 @@
-import React from 'react';
-import css from 'next/css';
+import React from 'react'
+import css from 'next/css'
 
-import defaultPage from '../hocs/defaultPage';
+import defaultPage from '../hocs/defaultPage'
 
 const styles = {
   heading: css({
     fontSize: 40,
     fontWeight: 200,
-    lineHeight: '40px',
+    lineHeight: '40px'
   }),
   content: css({
     fontSize: 20,
     fontWeight: 200,
-    lineHeight: '30px',
-  }),
-};
+    lineHeight: '30px'
+  })
+}
 
 const About = () => (
   <div>
@@ -23,6 +23,6 @@ const About = () => (
       This is just a random page.
     </p>
   </div>
-);
+)
 
-export default defaultPage(About);
+export default defaultPage(About)

pages/auth/sign-in.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React from 'react'
 
-import { show } from '../../utils/lock';
+import { show } from '../../utils/lock'
 
 export default class SignIn extends React.Component {
-  componentDidMount() {
-    show();
+  componentDidMount () {
+    show()
   }
-  render() {
-    return null;
+  render () {
+    return null
   }
 }

pages/auth/sign-off.js

@@ -1,14 +1,14 @@
-import React from 'react';
+import React from 'react'
 
-import { unsetToken } from '../../utils/auth';
-import { logout } from '../../utils/lock';
+import { unsetToken } from '../../utils/auth'
+import { logout } from '../../utils/lock'
 
 export default class SignOff extends React.Component {
-  componentDidMount() {
-    unsetToken();
-    logout();
+  componentDidMount () {
+    unsetToken()
+    logout()
   }
-  render() {
-    return null;
+  render () {
+    return null
   }
 }