Add hook as an alternative to the higher-order function

README.md

@@ -52,6 +52,28 @@ const SomeOtherComponent = () => (<p>This is some other component</p>)
 const ProtectedComponent = authenticated()(() => (<SomeOtherComponent />))
 ```
 
+Instead of the higher-order function the hook `useAuthentication` can be used for the same purpose:
+
+```js
+import { useAuthentication } from 'react-u5auth'
+
+const SomeComponent = () => (
+  <p>Some component that needs an authenticated user...</p>
+)
+
+const ProtectedComponent = () => {
+  const { authenticated } = useAuthentication()
+
+  if (!authenticated) {
+    // This will appear only for a short time before the
+    // redirect to the auth provider URL kicks in.
+    return <p>Logging in...</p>
+  } else {
+    return <SomeComponent />
+  }
+}
+```
+
 ## Using the `access_token`
 
 A protected component isn't too valuable on its own, you may need an access
@@ -66,6 +88,13 @@ const token = getLocalToken()
 ...
 ```
 
+The `useAuthentication` hook also returns the token:
+
+```js
+const { authenticated, token } = useAuthentication()
+```
+
+
 Please note: There is something fishy here about the `access_token`
 being kept in global state. See
 [this issue](https://github.com/Uber5/react-u5auth/issues/3).

src/authenticated.js

@@ -1,24 +1,9 @@
 import React from 'react'
 import { getLocalToken } from './local-token'
-import contextTypes from './context-types'
-
-export function hashed(o) {
-  return Object
-    .getOwnPropertyNames(o)
-    .map(prop => `${ prop }=${ encodeURIComponent(o[prop]) }`)
-    .join('&')
-}
+import AuthContextType from './context-types'
+import { authorize } from './lib/utils'
 
 export const authenticated = () => Component => {
-  function authorize(provider, clientId) {
-    const query = {
-      client_id: clientId,
-      response_type: 'token',
-      redirect_uri: window.location
-    }
-    const url = `${ provider }/authorize?${ hashed(query) }`
-    window.location.replace(url)
-  }
   class Authed extends React.Component {
     render() {
       const token = getLocalToken()
@@ -31,6 +16,6 @@ export const authenticated = () => Component => {
       }
     }
   }
-  Authed.contextTypes = contextTypes
+  Authed.contextType = AuthContextType
   return Authed
 }

src/components/auth-context.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import contextTypes from '../context-types'
+import AuthContextType from '../context-types'
+import PropTypes from 'prop-types'
 import { getHashValues } from '../lib/utils'
 
 import TokenManager from './token-manager'
@@ -40,11 +41,6 @@ class Debug extends React.Component {
 }
 
 export class AuthContext extends React.Component {
-  getChildContext() {
-    const { provider, clientId, loggingInIndicator } = this.props
-    return { provider, clientId, loggingInIndicator }
-  }
-
   isDebugEnabled = () => {
     return !!(localStorage.getItem('debug') || '').match(/react-u5auth/)
   }
@@ -59,18 +55,23 @@ export class AuthContext extends React.Component {
     console.log('react-u5auth, debug', debug)
     return (
       <div>
-        <TokenManager
-          onTokenUpdate={token => {
-            this.setState({ token })
-            onTokenUpdate && onTokenUpdate(token)
-          }}
-        />
-        { debug && <Debug contextProps={contextProps} contextState={this.state} hashValues={state} />}
-        { showChildren && this.props.children }
+        <AuthContextType.Provider value={contextProps}>
+          <TokenManager
+            onTokenUpdate={token => {
+              this.setState({ token })
+              onTokenUpdate && onTokenUpdate(token)
+            }}
+          />
+          { debug && <Debug contextProps={contextProps} contextState={this.state} hashValues={state} />}
+          { showChildren && this.props.children }
+        </AuthContextType.Provider>
       </div>
     )
   }
 }
 
-AuthContext.propTypes = contextTypes
-AuthContext.childContextTypes = contextTypes
+AuthContext.propTypes = {
+  provider: PropTypes.string.isRequired,
+  clientId: PropTypes.string.isRequired,
+  loggingInIndicator: PropTypes.element
+}

src/components/token-manager.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { setLocalToken, getLocalToken, getLocalExpiresAt } from '../local-token'
-import contextTypes from '../context-types'
-import { hashed } from '../authenticated'
+import AuthContextType from '../context-types'
+import { hashed } from '../lib/utils'
 import { getHashValues } from '../lib/utils'
 
 class TokenManager extends React.Component {
@@ -169,6 +169,6 @@ class TokenManager extends React.Component {
   }
 }
 
-TokenManager.contextTypes = contextTypes
+TokenManager.contextType = AuthContextType
 
 export default TokenManager

src/context-types.js

@@ -1,9 +1,5 @@
-import PropTypes from 'prop-types'
+import { createContext } from 'react'
 
-const contextTypes = {
-  provider: PropTypes.string.isRequired,
-  clientId: PropTypes.string.isRequired,
-  loggingInIndicator: PropTypes.element
-}
+const AuthContextType = createContext()
 
-export default contextTypes
+export default AuthContextType

src/index.js

@@ -1,5 +1,6 @@
 import { AuthContext } from './components/auth-context'
 import { authenticated } from './authenticated'
+import { useAuthentication } from './useAuthentication'
 import { getLocalToken } from './local-token'
 
-export { AuthContext, authenticated, getLocalToken }
+export { AuthContext, authenticated, useAuthentication, getLocalToken }

src/lib/utils.js

@@ -1,4 +1,16 @@
+export const hashed = o => Object.getOwnPropertyNames(o)
+  .map(prop => `${ prop }=${ encodeURIComponent(o[prop]) }`)
+  .join('&')
 
+export const authorize = (provider, clientId) => {
+  const query = {
+    client_id: clientId,
+    response_type: 'token',
+    redirect_uri: window.location
+  }
+  const url = `${ provider }/authorize?${ hashed(query) }`
+  window.location.replace(url)
+}
 
 export const getHashValues = () => {
   const hash = window.location.hash

src/useAuthentication.js

@@ -0,0 +1,16 @@
+import { useContext } from 'react'
+import { getLocalToken } from './local-token'
+import AuthContextType from './context-types'
+import { authorize } from './lib/utils'
+
+export function useAuthentication() {
+  const token = getLocalToken()
+  const { clientId, provider } = useContext(AuthContextType)
+
+  if (!token) {
+    authorize(provider, clientId)
+    return { authenticated: false }
+  } else {
+    return { authenticated: true, token }
+  }
+}