Add authentication and profile page

Author: lorensr

src/components/App.js

@@ -1,9 +1,15 @@
 import React, { Component } from 'react'
+import { Switch, Route, Redirect } from 'react-router'
+import { Link } from 'react-router-dom'
+import PropTypes from 'prop-types'
+
 import logo from '../logo.svg'
 import StarCount from './StarCount'
 import TableOfContents from './TableOfContents'
 import Section from './Section'
-import { Switch, Route, Redirect } from 'react-router'
+import CurrentUser from './CurrentUser'
+import Profile from './Profile'
+import withAuth from '../lib/withAuth'
 
 const Book = () => (
   <div>
@@ -14,20 +20,37 @@ const Book = () => (
 
 class App extends Component {
   render() {
+    const { logout, ...authProps } = this.props
+
     return (
       <div className="App">
         <header className="App-header">
           <StarCount />
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">The GraphQL Guide</h1>
+          <Link className="App-home-link" to="/">
+            <img src={logo} className="App-logo" alt="logo" />
+            <h1 className="App-title">The GraphQL Guide</h1>
+          </Link>
+          <CurrentUser {...authProps} />
         </header>
         <Switch>
           <Route exact path="/" render={() => <Redirect to="/Preface" />} />
+          <Route
+            exact
+            path="/me"
+            render={() => <Profile logout={logout} {...authProps} />}
+          />
           <Route component={Book} />
         </Switch>
       </div>
     )
   }
 }
 
-export default App
+App.propTypes = {
+  user: PropTypes.object,
+  login: PropTypes.func.isRequired,
+  logout: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired
+}
+
+export default withAuth(App)

src/components/CurrentUser.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
+
+const CurrentUser = ({ user, login, loading }) => {
+  const User = () => (
+    <Link to="/me" className="User">
+      <img src={user.photo} alt={user.firstName} />
+      {user.firstName}
+    </Link>
+  )
+
+  let content
+
+  if (user) {
+    content = <User />
+  } else if (loading) {
+    content = <div className="Spinner" />
+  } else {
+    content = <button onClick={login}>Sign in</button>
+  }
+
+  return <div className="CurrentUser">{content}</div>
+}
+
+CurrentUser.propTypes = {
+  user: PropTypes.shape({
+    firstName: PropTypes.string.isRequired,
+    photo: PropTypes.string.isRequired
+  }),
+  login: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired
+}
+
+export default CurrentUser

src/components/Profile.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Profile = ({ user, login, logout, loading }) => {
+  if (loading) {
+    return (
+      <main className="Profile">
+        <div className="Spinner" />
+      </main>
+    )
+  } else if (!user) {
+    return (
+      <main className="Profile">
+        <button onClick={login} className="Profile-login">
+          Sign in
+        </button>
+      </main>
+    )
+  } else {
+    return (
+      <main className="Profile">
+        <div className="Profile-header-wrapper">
+          <header className="Profile-header">
+            <h1>{user.name}</h1>
+          </header>
+        </div>
+        <div className="Profile-content">
+          <dl>
+            <dt>Email</dt>
+            <dd>
+              <code>{user.email}</code>
+            </dd>
+
+            <dt>Membership level</dt>
+            <dd>
+              <code>{user.hasPurchased || 'GUEST'}</code>
+            </dd>
+
+            <dt>OAuth Github account</dt>
+            <dd>
+              <a
+                href="https://github.com/settings/applications"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <code>{user.username}</code>
+              </a>
+            </dd>
+          </dl>
+
+          <button className="Profile-logout" onClick={logout}>
+            Sign out
+          </button>
+        </div>
+      </main>
+    )
+  }
+}
+
+Profile.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired,
+    hasPurchased: PropTypes.string
+  }),
+  login: PropTypes.func.isRequired,
+  logout: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired
+}
+
+export default Profile

src/index.js

@@ -1,8 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
-import App from './components/App'
-import registerServiceWorker from './registerServiceWorker'
 import { ApolloClient } from 'apollo-client'
 import { ApolloProvider } from 'react-apollo'
 import { InMemoryCache } from 'apollo-cache-inmemory'
@@ -11,11 +8,36 @@ import { WebSocketLink } from 'apollo-link-ws'
 import { createHttpLink } from 'apollo-link-http'
 import { getMainDefinition } from 'apollo-utilities'
 import { BrowserRouter } from 'react-router-dom'
+import { setContext } from 'apollo-link-context'
+import { getAuthToken } from 'auth0-helpers'
+
+import './index.css'
+import registerServiceWorker from './registerServiceWorker'
+import App from './components/App'
 
 const httpLink = createHttpLink({
   uri: 'https://api.graphql.guide/graphql'
 })
 
+const authLink = setContext(async (_, { headers }) => {
+  const token = await getAuthToken({
+    doLoginIfTokenExpired: true
+  })
+
+  if (token) {
+    return {
+      headers: {
+        ...headers,
+        authorization: `Bearer ${token}`
+      }
+    }
+  } else {
+    return { headers }
+  }
+})
+
+const authedHttpLink = authLink.concat(httpLink)
+
 const wsLink = new WebSocketLink({
   uri: `wss://api.graphql.guide/subscriptions`,
   options: {
@@ -29,7 +51,7 @@ const link = split(
     return kind === 'OperationDefinition' && operation === 'subscription'
   },
   wsLink,
-  httpLink
+  authedHttpLink
 )
 
 const cache = new InMemoryCache()

src/lib/withAuth.js

@@ -0,0 +1,110 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import wrapDisplayName from 'recompose/wrapDisplayName'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
+import auth0 from 'auth0-js'
+import { initAuthHelpers, login, logout } from 'auth0-helpers'
+
+const client = new auth0.WebAuth({
+  domain: 'graphql.auth0.com',
+  clientID: '8fErnZoF3hbzQ2AbMYu5xcS0aVNzQ0PC',
+  responseType: 'token',
+  audience: 'https://api.graphql.guide',
+  scope: 'openid profile guide'
+})
+
+initAuthHelpers({
+  client,
+  usePopup: true,
+  authOptions: {
+    connection: 'github',
+    owp: true,
+    popupOptions: { height: 623 } // make tall enough for content
+  },
+  checkSessionOptions: {
+    redirect_uri: window.location.origin
+  },
+  onError: e => console.error(e)
+})
+
+const USER_QUERY = gql`
+  query UserQuery {
+    currentUser {
+      firstName
+      name
+      username
+      email
+      photo
+      hasPurchased
+    }
+  }
+`
+
+const withUser = graphql(USER_QUERY, {
+  props: ({ ownProps, data: { currentUser, loading, refetch } }) => ({
+    currentUser,
+    loading,
+    refetch,
+    ownProps
+  })
+})
+
+function withAuth(BaseComponent) {
+  class WithAuthWrapper extends React.Component {
+    constructor(props) {
+      super(props)
+
+      this.state = {
+        loggingIn: false
+      }
+    }
+
+    login = () => {
+      this.setState({ loggingIn: true })
+      login({
+        onCompleted: (e, t) => {
+          e && console.log(e)
+          this.props.refetch()
+          this.setState({ loggingIn: false })
+        }
+      })
+    }
+
+    logout = () => {
+      logout()
+      this.props.refetch()
+    }
+
+    render() {
+      const { currentUser, loading, ownProps } = this.props
+
+      return (
+        <BaseComponent
+          user={currentUser}
+          loading={loading || this.state.loggingIn}
+          login={this.login}
+          logout={this.logout}
+          {...ownProps}
+        />
+      )
+    }
+  }
+
+  WithAuthWrapper.propTypes = {
+    currentUser: PropTypes.shape({
+      firstName: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      username: PropTypes.string.isRequired,
+      email: PropTypes.string.isRequired,
+      photo: PropTypes.string.isRequired,
+      hasPurchased: PropTypes.string
+    }),
+    loading: PropTypes.bool.isRequired
+  }
+
+  WithAuthWrapper.displayName = wrapDisplayName(BaseComponent, 'withAuth')
+  return withUser(WithAuthWrapper)
+}
+
+export default withAuth