now it actually authenticates

src/App.js

@@ -37,6 +37,9 @@ function App() {
           <Route path="/login">
             <LoginPage />
           </Route>
+          <Route path="/dashboard">
+            <h1>Dashboard</h1>
+          </Route>
           <Route path="/">
             <HomePage />
           </Route>

src/pages/LoginPage/LoginPage.js

@@ -1,29 +1,52 @@
 import React from 'react'
 import { Container, Form, Button } from 'react-bootstrap'
+import { loginUser } from '../../requests/UserRequests'
+import { Redirect } from 'react-router-dom'
 
-const loginPage = () => {
-  return (
-    <Container>
-      <Form className='mt-5'>
-        <Form.Group controlId="formBasicEmail">
-          <Form.Label>Email address</Form.Label>
-          <Form.Control type="email" placeholder="Enter email" />
-          <Form.Text className="text-muted">
-            We'll never share your email with anyone else.
-          </Form.Text>
-        </Form.Group>
+class LoginPage extends React.Component {
+  constructor(props) {
+    super(props)
 
-        <Form.Group controlId="formBasicPassword">
-          <Form.Label>Password</Form.Label>
-          <Form.Control type="password" placeholder="Password" />
-        </Form.Group>
+    this.state = {
+      email: '',
+      password: '',
+      redirect: false
+    }
+  }
 
-        <Button variant="primary" type="submit">
-          Login
-        </Button> 
-      </Form>
-    </Container>
-  )
+  submit(evt) {
+    evt.preventDefault()
+    loginUser(this.state.email, this.state.password)
+    .then(_ => {
+      this.setState({redirect: true})
+    })
+    .catch(_ => {
+      alert("not good")
+    })
+  }
+
+  render() {
+    return (
+      <Container>
+        <Form className='mt-5'>
+          <Form.Group controlId="formBasicEmail">
+            <Form.Label>Email address</Form.Label>
+            <Form.Control onChange={(evt) => this.setState({email: evt.target.value})} value={this.state.email} type="email" placeholder="Enter email" />
+          </Form.Group>
+
+          <Form.Group controlId="formBasicPassword">
+            <Form.Label>Password</Form.Label>
+            <Form.Control onChange={(evt) => this.setState({password: evt.target.value})} value={this.state.password} type="password" placeholder="Password" />
+          </Form.Group>
+
+          {this.state.redirect && <Redirect to="/dashboard" />}
+          <Button onClick={(evt) => this.submit(evt)} variant="primary" type="submit">
+            Login
+          </Button> 
+        </Form>
+      </Container>
+    )
+  }
 }
 
-export default loginPage
+export default LoginPage

src/pages/RegisterPage/RegisterPage.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Container, Form, Button } from 'react-bootstrap'
 import { registerUser } from '../../requests/UserRequests'
+import { Redirect } from 'react-router-dom'
 
 class RegisterPage extends React.Component {
   constructor(props) {
@@ -12,7 +13,8 @@ class RegisterPage extends React.Component {
       email: "",
       username: "",
       password: "",
-      passwordConfirmation: ""
+      passwordConfirmation: "",
+      redirect: false
     }
   }
 
@@ -26,6 +28,13 @@ class RegisterPage extends React.Component {
       this.state.password, 
       this.state.passwordConfirmation
     )
+    .then(_ => {
+      this.setState({redirect: true})
+    })
+    .catch(error => {
+      alert(error)
+    })
+
   }
 
   render() {
@@ -65,6 +74,7 @@ class RegisterPage extends React.Component {
             <Form.Control onChange={(evt) => this.setState({passwordConfirmation: evt.target.value})} type="password" placeholder="Confirm Your Password" value={this.state.passwordConfirmation}/>
           </Form.Group>
 
+          {this.state.redirect && <Redirect to="/dashboard" />}
           <Button onClick={(evt) => this.submit(evt)} type="submit" variant="primary">
             Create My Account
           </Button> 

src/requests/UserRequests.js

@@ -1,20 +1,40 @@
 import { RAILS_URI } from '../endpoints.js'
 import axios from 'axios'
 
+export const loginUser = (email, password) => {
+  return new Promise((resolve, reject) => {
+    const formData = {
+      auth: {
+        email,
+        password
+      }
+    }
+    axios.post(`${RAILS_URI}user_token`, formData)
+    .then(response => {
+      localStorage.setItem('jwt', response.data.jwt)
+      resolve()
+    })
+    .catch(error => {
+      reject()
+    })
+  })
+}
+
 export const registerUser = (firstName, lastName, email, username, password, passwordConfirmation) => {
+  return new Promise((resolve, reject) => {
   const formData = {
-      user: {
-        first_name: firstName,
-        last_name: lastName,
-        email: email,
-        username: username,
-        password: password,
-        passwordConfirmation: passwordConfirmation
-      }
+    user: {
+      first_name: firstName,
+      last_name: lastName,
+      email: email,
+      username: username,
+      password: password,
+      passwordConfirmation: passwordConfirmation
     }
-    axios.post(`${RAILS_URI}users`, formData)
+  }
+  axios.post(`${RAILS_URI}users`, formData)
     .then(response => {
-      if (response.status === 200) {
+      if (response.data.status === "ok") {
         const authData = {
           auth: {
             email,
@@ -23,8 +43,12 @@ export const registerUser = (firstName, lastName, email, username, password, pas
         }
         axios.post(`${RAILS_URI}user_token`, authData)
         .then(tokenResponse => {
-          //console.log(tokenResponse.data.jwt);
+          localStorage.setItem('jwt', response.data.jwt)
+          resolve()
         })
+      } else if (response.data.status === "unprocessable_entity") {
+        reject(response.data.error)
       }
     })
+  })
 }