Index: my-react-app/src/axios_helper.js
===================================================================
--- my-react-app/src/axios_helper.js	(revision 24819a83a22dbf359fe4db74b58795491d96338b)
+++ my-react-app/src/axios_helper.js	(revision 5a9c93b9db42777251b6230e5814b5929eb94488)
@@ -4,5 +4,18 @@
 axios.defaults.headers.post["Content-Type"] = 'application/json'
 
+export const getAuthToken = () => {
+    return window.localStorage.getItem("auth_token");
+}
+
+export const setAuthToken = (token) => {
+    window.localStorage.setItem("auth_token", token);
+}
+
 export const request = (method, url, data) => {
+    let headers = {};
+    if(getAuthToken() !== null && getAuthToken() !== "null") {
+        headers = {"Authorization" : `Bearer ${getAuthToken()}`};
+    }
+
     return axios({
         method: method,
Index: my-react-app/src/components/AppContent.js
===================================================================
--- my-react-app/src/components/AppContent.js	(revision 24819a83a22dbf359fe4db74b58795491d96338b)
+++ my-react-app/src/components/AppContent.js	(revision 5a9c93b9db42777251b6230e5814b5929eb94488)
@@ -2,11 +2,64 @@
 import WelcomeContent from "./WelcomeContent";
 import AuthContent from "./AuthContent";
+import LoginForm from "./LoginForm";
+import { request, setAuthToken } from "../axios_helper";
+import Buttons from './Buttons'
 
 export default class AppContent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            componentToShow: "welcome"
+        };
+    };
+
+    login = () => {
+        this.setState({componentToShow: "login"})
+    }
+
+    logout = () => {
+        this.setState({componentToShow: "welcome"})
+    }
+
+    onLogin = (e, email, password) => {
+        e.preventDefault();
+        request(
+            "POST",
+            "/api/login",
+            {login: email, password: password}
+        ).then((response) => {
+            this.setState({componentToShow: "restaurants"})
+            setAuthToken(response.data.token);
+        }).catch((error) => {
+            this.setState({componentToShow: "welcome"})
+        });
+    };
+
+    onRegister = (e, firstName, lastName, email, password) => {
+        e.preventDefault();
+        request(
+            "POST",
+            "/api/register",
+            {
+                firstName: firstName,
+                lastName: lastName,
+                login: email,
+                password: password
+            }
+        ).then((response) => {
+            this.setState({componentToShow: "restaurants"})
+            setAuthToken(response.data.token);
+        }).catch((error) => {
+            this.setState({componentToShow: "welcome"})
+        });
+    };
+
     render() {
         return (
             <div>
-                <WelcomeContent/>
-                <AuthContent/>
+                <Buttons login={this.login} logout={this.logout}></Buttons>
+                {this.state.componentToShow === "welcome" && <WelcomeContent/>}
+                {this.state.componentToShow === "restaurants" && <AuthContent/>}
+                {this.state.componentToShow === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister}/>}
             </div>
         )
Index: my-react-app/src/components/Buttons.js
===================================================================
--- my-react-app/src/components/Buttons.js	(revision 5a9c93b9db42777251b6230e5814b5929eb94488)
+++ my-react-app/src/components/Buttons.js	(revision 5a9c93b9db42777251b6230e5814b5929eb94488)
@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export default function Buttons(props) {
+    return (
+        <div className="row">
+            <div className="col-md-12 text-center" style={{marginTop:"30px"}}>
+                <button onClick={props.login}>Login</button>
+                <button onClick={props.logout}>Logout</button>
+            </div>
+        </div>
+    )
+}
Index: my-react-app/src/components/LoginForm.js
===================================================================
--- my-react-app/src/components/LoginForm.js	(revision 5a9c93b9db42777251b6230e5814b5929eb94488)
+++ my-react-app/src/components/LoginForm.js	(revision 5a9c93b9db42777251b6230e5814b5929eb94488)
@@ -0,0 +1,100 @@
+import * as React from "react";
+import bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
+import classNames from 'classnames';
+
+export default class LoginForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            active: "login",
+            firstName: "",
+            lastName: "",
+            email: "",
+            password: "",
+            onLogin: props.onLogin,
+            onRegister: props.onRegister
+        }
+    }
+
+    onChangeHandler = (e) => {
+        let name = e.target.name;
+        let value = e.target.value;
+        this.setState({[name]: value})
+    }
+
+    onSubmitLogin = (e) => {
+        this.state.onLogin(e, this.state.email, this.state.password);
+    }
+
+    onSubmitRegister = (e) => {
+        this.state.onRegister(
+            e,
+            this.state.firstName,
+            this.state.lastName,
+            this.state.email,
+            this.state.password)
+    }
+
+    render() {
+        return (
+            <div className="row justify-content-center">
+                <div className="col-4">
+                    <ul className="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
+                        <li className="nav-item" role="presentation">
+                            <button className={classNames("nav-link", this.state.active === "login" ? "active" : "")}
+                                    id="tab-login" onClick={() => this.setState({active: "login"})}>Login
+                            </button>
+                        </li>
+                        <li className="nav-item" role="presentation">
+                            <button className={classNames("nav-link", this.state.active === "register" ? "active" : "")}
+                                    id="tab-register" onClick={() => this.setState({active: "register"})}>Register
+                            </button>
+                        </li>
+                    </ul>
+
+                    <div className="tab-content">
+                        <div
+                            className={classNames("tab-pane", "fade", this.state.active === "login" ? "show active" : "")} id="pills-login">
+                            <form onSubmit={this.onSubmitLogin}>
+                                <div className="form-outline mb-4">
+                                    <input type="login" id="loginEmail" name="login" className="form-control" onChange={this.onChangeHandler}/>
+                                    <label className="form-label" htmlFor="loginEmail">Email</label>
+                                </div>
+                                <div className="form-outline mb-4">
+                                    <input type="password" id="loginPassword" name="password" className="form-control" onChange={this.onChangeHandler}/>
+                                    <label className="form-label" htmlFor="loginPassword">Password</label>
+                                </div>
+
+                                <button type="submit" className="btn btn-primary btn-block mb-4">Sign In</button>
+                            </form>
+                        </div>
+
+                        <div
+                            className={classNames("tab-pane", "fade", this.state.active === "register" ? "show active" : "")} id="pills-register">
+                            <form onSubmit={this.onSubmitRegister}>
+                                <div className="form-outline mb-4">
+                                    <input type="text" id="firstName" name="firstName" className="form-control" onChange={this.onChangeHandler}/>
+                                    <label className="form-label" htmlFor="firstName">First Name</label>
+                                </div>
+                                <div className="form-outline mb-4">
+                                    <input type="text" id="lastName" name="lastName" className="form-control" onChange={this.onChangeHandler}/>
+                                    <label className="form-label" htmlFor="lastName">Last Name</label>
+                                </div>
+                                <div className="form-outline mb-4">
+                                    <input type="text" id="email" name="email" className="form-control" onChange={this.onChangeHandler}/>
+                                    <label className="form-label" htmlFor="email">Email</label>
+                                </div>
+                                <div className="form-outline mb-4">
+                                    <input type="password" id="loginPassword" name="password" className="form-control" onChange={this.onChangeHandler}/>
+                                    <label className="form-label" htmlFor="loginPassword">Password</label>
+                                </div>
+
+                                <button type="submit" className="btn btn-primary btn-block mb-4">Sign In</button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
