Progress with authentication tolen

client/src/components/App.js

@@ -4,6 +4,7 @@ import Header from './Header';
 import { Switch, Route } from 'react-router-dom';
 // import ProductList from './ProductList';
 import AppointmentList from './AppointmentList';
+import Login from './Login';
 
 const App = () => {
   return (
@@ -14,6 +15,7 @@ const App = () => {
           {/* <Route exact path="/" component={ProductList} /> */}
           <Route exact path="/" component={AppointmentList} />
           <Route exact path="/create" component={CreateAppointment} />
+          <Route exact path="/login" component={Login} />
         </Switch>
       </div>
     </div>

client/src/components/CreateAppointment.js

@@ -10,8 +10,10 @@ const CREATE_APPOINTMENT_MUTATION = gql`
   mutation CreateAppointmentMutation(
     $title: String!
     $description: String!
+    $timeStart: String!
+    $timeEnd: String!
   ) {
-    createAppointment(title: $title, description: $description) {
+    createAppointment(title: $title, description: $description, timeStart: $timeStart, timeEnd: $timeEnd) {
       id
       title
       description

client/src/components/Header.js

@@ -1,23 +1,30 @@
 import React from 'react';
-// import { useHistory } from 'react-router';
+import { useHistory } from 'react-router';
 import { Link, withRouter } from 'react-router-dom';
+import { AUTH_TOKEN } from '../constants';
 
 const Header = () => {
-    // const history = useHistory();
+    const history = useHistory();
+    const authToken = localStorage.getItem(AUTH_TOKEN);
     return (
         <div className="flex pa1 justify-between nowrap orange">
             <div className="flex flex-fixed black">
                 <div className="fw7 mr1">Store!</div>
-                <Link to="/" className="ml1 no-underline black">
+                <Link to="/" className="ml1 no-underline black">Top list</Link>
-                    Top list
-        </Link>
                 <div className="ml1"> --- </div>
-                <Link
+                <Link to="/create" className="ml1 no-underline black">Create new</Link>
-                    to="/create"
+            </div>
-                    className="ml1 no-underline black"
+            <div className="flex flex-fixed">
-                >
+                {authToken ? (
-                    Create new
+                    <div className="ml1 pointer black"
-        </Link>
+                        onClick={() => {
+                            localStorage.removeItem(AUTH_TOKEN);
+                            history.push(`/`);
+                        }}
+                    >Logout</div>
+                ) : (
+                        <Link to="/login" className="ml1 no-underline black">Login</Link>
+                    )}
             </div>
         </div>
     );

client/src/components/Login.js

@@ -12,7 +12,7 @@ const SIGNUP_MUTATION = gql`
     signup(
       email: $email
       password: $password
-      name: $name
+      username: $name
     ) {
       token
     }

client/src/index.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './styles/index.css';
+import { AUTH_TOKEN } from './constants';
 import App from './components/App';
 import { BrowserRouter } from 'react-router-dom';
+import { setContext } from '@apollo/client/link/context';
 // import * as serviceWorker from './serviceWorker';
 
 import {
@@ -16,8 +18,19 @@ const httpLink = createHttpLink({
   uri: 'http://localhost:4000/graphql'
 });
 
+const authLink = setContext((_, { headers }) => {
+  const token = localStorage.getItem(AUTH_TOKEN);
+  return {
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : ''
+    }
+  };
+});
+
 const client = new ApolloClient({
-  link: httpLink,
+  link: authLink.concat(httpLink),
+  // link: httpLink,
   cache: new InMemoryCache()
 });
 

server/src/models/user.js

@@ -0,0 +1,21 @@
+import mongoose from 'mongoose';
+const Schema = mongoose.Schema;
+const UserSchema = new Schema({
+    username: {
+        type: String,
+        required: true
+    },
+    email: {
+        type: String,
+        required: true
+    },
+    password: {
+        type: String,
+        required: true
+    },
+    deleted: {
+        type: Boolean,
+        required: false
+    }
+});
+export default mongoose.model('user', UserSchema);

server/src/resolvers.js

@@ -1,7 +1,11 @@
 // import Appointment from '../../client/src/components/Appointment.js';
 import Product from './models/product.js';
 import Appointment from './models/appointment.js';
+import User from './models/user.js'
 // import { createAppointment } from './resolvers/Mutation.js';
+import bcrypt from 'bcryptjs';
+import jwt from 'jsonwebtoken';
+import dotenv from 'dotenv';
 
 export const resolvers = {
     Query: {
@@ -11,8 +15,58 @@ export const resolvers = {
         async allProducts() {
             return await Product.find();
         },
+        async allUsers() {
+            return await User.find();
+        },
     },
     Mutation: {
+        async signup(root, {
+            input
+        }) {
+            console.log(input.password);
+            input.password = await bcrypt.hash(input.password, 10);
+
+            const user = await User.create(input);
+
+            const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET);
+
+            return {
+                token,
+                user
+            };
+        },
+
+        async login(root, {
+            email, password
+        }) {
+            const user = await User.findOne({
+                email: email
+            });
+
+            if (!user) {
+                throw new Error('No such user found');
+            }
+
+            const pwd = await bcrypt.hash(password, 10);
+            console.log(pwd);
+            console.log(user.password);
+
+            const valid = await bcrypt.compare(
+                password,
+                user.password
+            );
+            if (!valid) {
+                throw new Error('Invalid password');
+            }
+
+            const token = jwt.sign({ userId: user.id }, APP_SECRET);
+
+            return {
+                token,
+                user
+            };
+        },
+
         async createAppointment(root, {
             input
         }) {

server/src/schema.graphql

@@ -8,6 +8,7 @@ type Query {
   ): Feed!
   allProducts: [Product]
   allAppointments: [Appointment]
+  allUsers: [User]
   users: [User!]!
 }
 
@@ -39,9 +40,7 @@ type Mutation {
     _id: ID!
   ) : Product
   signup(
-    email: String!
+    input: UserInput
-    password: String!
-    name: String!
   ): AuthPayload
   login(
     email: String!, 
@@ -57,19 +56,26 @@ type Subscription {
   newFollow: Follow
 }
 
+#User Schemas
+type User {
+  _id: ID!
+  username: String!
+  email: String!
+  password: String!
+  # appointments: [Appointment!]!
+}
+input UserInput{
+  username: String!
+  email: String!
+  password: String!
+  # appointments: [Appointment!]!
+}
 type AuthPayload {
   token: String
   user: User
 }
 
-type User {
+# Appointment schemas
-  _id: ID!
-  name: String!
-  email: String!
-  appointments: [Appointment!]!
-}
-
-# Appointment model
 type Appointment {
   _id: ID!
   title: String!
@@ -91,8 +97,13 @@ input AppointmentInput {
   timeStart: Time!
   timeEnd: Time!
  }
+input AppointmentOrderByInput {
+  description: Sort
+  url: Sort
+  createdAt: Sort
+}
 
-# Product model
+# Product schemas
 type Product {
   _id: ID!
   title: String!
@@ -103,23 +114,17 @@ input ProductInput {
   qty: Int
  }
 
+# Follow schemas
 type Follow {
   _id: ID!
   appointment: Appointment!
   user: User!
 }
 
-
+# General-purpose schemas
-input AppointmentOrderByInput {
-  description: Sort
-  url: Sort
-  createdAt: Sort
-}
-
 enum Sort {
   asc
   desc
 }
-
 scalar DateTime
 scalar Time