Adding Auth0 integration

- Added NavBar and Profile components
- Added Private route and react-auth0-spa.js
- Updated GraphQLData and configuration template

Author: prashant-shahi

todo-app-react/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
+    "@auth0/auth0-spa-js": "^1.8.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

todo-app-react/src/App.css

@@ -0,0 +1,5 @@
+.navheader {
+    margin: auto 0px;
+    padding: 15px;
+    background: #f5f5f5;
+}

todo-app-react/src/App.js

@@ -5,8 +5,13 @@ import ApolloClient from "apollo-client";
 import { InMemoryCache } from "apollo-cache-inmemory";
 import { ApolloProvider } from "@apollo/react-hooks";
 import { createHttpLink } from "apollo-link-http";
+import { useAuth0 } from "./react-auth0-spa";
 
-import TodoApp from "./TodoApp";
+import TodoApp from './TodoApp';
+import NavBar from "./NavBar";
+import Profile from "./Profile";
+import history from "./history";
+import PrivateRoute from "./PrivateRoute";
 import config from "./config.json";
 import './App.css';
 
@@ -25,12 +30,24 @@ const createApolloClient = () => {
 }
 
 const App = () => {
+  const { loading } = useAuth0();
+  if (loading) {
+    return <div>Loading...</div>;
+  }
   const client = createApolloClient();
   return (
     <ApolloProvider client={client}>
       <div>
-        <h1>todos</h1>
-        <TodoApp />
+        <Router history={history}>
+          <h1>todos</h1>
+          <header className="navheader">
+            <NavBar />
+          </header>
+          <Switch>
+            <PrivateRoute path="/" component={TodoApp} exact />
+            <PrivateRoute path="/profile" component={Profile} />
+          </Switch>
+        </Router>
     </div>
     </ApolloProvider>
   );

todo-app-react/src/GraphQLData.js

@@ -1,5 +1,29 @@
 import gql from "graphql-tag";
 
+export const GET_USER = gql`
+  query getUser($username: String!){
+    getUser(username: $username) {
+      username
+      name
+      tasks {
+        id
+        title
+        completed
+      }
+    }
+  }
+`;
+
+export const ADD_USER = gql`
+  mutation addUser($user: AddUserInput!) {
+    addUser(input: [$user]) {
+      user {
+        username
+      }
+    }
+  }
+`;
+
 export const GET_TODOS = gql`
   query {
     queryTask {

todo-app-react/src/NavBar.css

@@ -0,0 +1,28 @@
+.navbar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    height: 47px;
+}
+.navbar li {
+    display: inline;
+    float: left;
+}
+.navbar li:first-child {
+    margin-right: 10px;
+}
+.navbar li a {
+    display: block;
+    color: white;
+    background-color: #b83f45;
+    text-align: center;
+    padding: 14px 16px;
+    font-size: large;
+    font-weight: bold;
+    text-decoration: none;
+}
+/* Change the link color to #111 (black) on hover */
+.navbar li a:hover {
+    background-color: silver;
+    color: white;
+}

todo-app-react/src/NavBar.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { useAuth0 } from "./react-auth0-spa";
+import { Link } from "react-router-dom";
+
+import './NavBar.css';
+
+const NavBar = () => {
+  const { loading, isAuthenticated, logout } = useAuth0();
+
+  if (loading) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div className="navbar">
+      <ul>
+        {isAuthenticated && (
+          <span>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/profile">Profile</Link>
+            </li>
+            <li style={{ float: "right"}}>
+              <Link onClick={() => logout()}>
+                Log out
+              </Link>
+            </li>
+          </span>
+        )}
+      </ul>
+    </div>
+  );
+};
+
+export default NavBar;

todo-app-react/src/PrivateRoute.js

@@ -0,0 +1,26 @@
+import React, { useEffect } from "react";
+import { Route } from "react-router-dom";
+import { useAuth0 } from "./react-auth0-spa";
+
+const PrivateRoute = ({ component: Component, path, ...rest }) => {
+  const { loading, isAuthenticated, loginWithRedirect } = useAuth0();
+
+  useEffect(() => {
+    if (loading || isAuthenticated) {
+      return;
+    }
+    const fn = async () => {
+      await loginWithRedirect({
+        appState: {targetUrl: window.location.pathname}
+      });
+    };
+    fn();
+  }, [loading, isAuthenticated, loginWithRedirect, path]);
+
+  const render = props =>
+    isAuthenticated === true ? <Component {...props} /> : null;
+
+  return <Route path={path} render={render} {...rest} />;
+};
+
+export default PrivateRoute;

todo-app-react/src/Profile.css

@@ -0,0 +1,8 @@
+.profile {
+    padding: 15px;
+}
+.profile-img {
+    display: block;
+    margin: 0 auto;
+    border-radius: 50%;
+}

todo-app-react/src/Profile.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { useAuth0 } from "./react-auth0-spa";
+import './Profile.css';
+
+const Profile = () => {
+  const { loading, user } = useAuth0();
+
+  if (loading || !user) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+      <div className="profile">
+        <img className="profile-img" src={user.picture} alt="Profile" />
+        <p>Name: <strong>{user.nickname}</strong></p>
+        <p>Email: <strong>{user.email}</strong></p>
+      </div>
+  );
+};
+
+export default Profile;

todo-app-react/src/TodoApp.js

@@ -5,22 +5,54 @@ import defs from './defs'
 import history from './history';
 import TodoFooter from './TodoFooter'
 import TodoItem from './TodoItem'
-import { GET_TODOS, ADD_TODO, DELETE_TODO, TOGGLE_TODO, UPDATE_TODO, CLEAR_COMPLETED_TODO, TOGGLE_ALL_TODO } from "./GraphQLData";
+import { GET_USER, GET_TODOS, ADD_USER, ADD_TODO, DELETE_TODO, TOGGLE_TODO, UPDATE_TODO, CLEAR_COMPLETED_TODO, TOGGLE_ALL_TODO } from "./GraphQLData";
+import { useAuth0 } from "./react-auth0-spa";
 
 const ENTER_KEY = 13
 
+const useImperativeQuery = (query) => {
+  const { refetch } = useQuery(query, { skip: true });
+  const imperativelyCallQuery = (variables) => {
+    return refetch(variables);
+  };
+  return imperativelyCallQuery;
+};
 const TodoApp = () => {
   const [nowShowing, setNowShowing] = useState(defs.ALL_TODOS);
   const [getEditing, setEditing] = useState(null);
   const [newTodo, setNewTodo] = useState("");
   const [shownTodos, setShownTodos] = useState([]);
 
+  const [addUser] = useMutation(ADD_USER);
   const [addTodo] = useMutation(ADD_TODO);
   const [toggleTodo] = useMutation(TOGGLE_TODO);
   const [toggleAllTodo] = useMutation(TOGGLE_ALL_TODO);
   const [deleteTodo] = useMutation(DELETE_TODO);
   const [updateTodo] = useMutation(UPDATE_TODO);
   const [clearCompletedTodo] = useMutation(CLEAR_COMPLETED_TODO);
+  const getUsers = useImperativeQuery(GET_USER)
+
+  const { user } = useAuth0();
+
+  const createUser = () => {
+    if (user === undefined) {
+      return null;
+    }
+    const { data: getUser } = getUsers({
+      username: user.email
+    });
+    if (getUser && getUser.getUser === null) {
+      const newUser = {
+        username: user.email,
+        name: user.nickname,
+      };
+      addUser({
+        variables: {
+          user: newUser
+        }
+      })
+    }
+  }
 
   const { loading, error, data } = useQuery(GET_TODOS);
   const getData = () => {
@@ -54,8 +86,9 @@ const TodoApp = () => {
     history.listen((location, action) =>
       processLocationHash(location.hash)
     )
+    createUser()
     getData()
-  }, [data]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [user, data]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleChange = event => {
     setNewTodo(event.target.value)
@@ -76,7 +109,7 @@ const TodoApp = () => {
   const add = (title) =>
     addTodo({
       variables: { task: [
-        { title: title, completed: false, user: { username: "email@example.com" } }
+        { title: title, completed: false, user: { username: user.email } }
       ]},
       refetchQueries: [{
         query: GET_TODOS