diff --git a/src/containers/App.js b/src/containers/App.js
index 7fb7b7fdc6ac5b84a7528de03da04c4cc583e198..88746a88f70a48c447e2fedae87d7e88103cc469 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -1,25 +1,56 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
 
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Link
-} from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
-import '../styles/App.css';
-import Header from './header'
-import ListAnnonce from './list-annonces';
-import CreateAnnonce from './createAnnonce';
-import DetailAnnonce from './detail-annonce';
+import "../styles/App.css";
+import Header from "./header";
+import ListAnnonce from "./list-annonces";
+import CreateAnnonce from "./createAnnonce";
+import DetailAnnonce from "./detail-annonce";
 
-import SignIn from './../containers/SignIn';
-import Register from './../containers/Register';
+import SignIn from "./../containers/SignIn";
+import Register from "./../containers/Register";
+
+import { AuthContext } from "./../contexts/AuthContext";
 
 function App() {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [token, setToken] = useState(null);
+  const [tokenExpirationTime, setTokenExpirationTime] = useState();
+
+  const login = (token, expirationTime) => {
+    setLoggedIn(true);
+    setToken(token);
+
+    const expiration =
+      expirationTime || new Date(new Date().getTime() + 1000 * 60 * 60);
+
+    setTokenExpirationTime(expiration);
+    localStorage.setItem("token", token);
+  };
+
+  const logout = () => {
+    setLoggedIn(false);
+    setToken(null);
+
+    localStorage.removeItem("token");
+  };
+
+  useEffect(() => {
+    const storedData = JSON.parse(localStorage.getItem("userData"));
+    if (
+      storedData &&
+      storedData.token &&
+      new Date(storedData.expirationTime) > new Date()
+    ) {
+      login(storedData.token, new Date(storedData.expirationTime));
+    }
+  }, [login]);
 
   return (
-    <>
+    <AuthContext.Provider
+      value={{ isLoggedIn: !!token, login: login, logout: logout }}
+    >
       <Header />
       <Router>
         <div className="container">
@@ -46,7 +77,7 @@ function App() {
           </Switch>
         </div>
       </Router>
-    </>
+    </AuthContext.Provider>
   );
 }
 
diff --git a/src/containers/SignIn.js b/src/containers/SignIn.js
index 83404b15eb289118ce390f8f688a4b8639259530..4b232cdba7c0fb168fa049595637e5a2b2f59cc9 100644
--- a/src/containers/SignIn.js
+++ b/src/containers/SignIn.js
@@ -1,101 +1,117 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import { useMutation, gql } from "@apollo/client";
 import { useHistory } from "react-router-dom";
 
-import Logo from './iwocs.png';
+import Logo from "./iwocs.png";
 import "./../styles/sign-in.css";
 
+import { AuthContext } from "./../contexts/AuthContext";
+
 const SignIn = () => {
-    let history = useHistory();
-    const LOGIN_MUTATION = gql`
-        mutation login($credentials: LoginInput!) {
-            login(credentials: $credentials) {
-                userId
-                token
-                tokenExpiration
-            }
-        } 
-    `;
+  let history = useHistory();
+  const authContext = useContext(AuthContext);
+
+  const LOGIN_MUTATION = gql`
+    mutation login($credentials: LoginInput!) {
+      login(credentials: $credentials) {
+        userId
+        token
+        tokenExpiration
+      }
+    }
+  `;
+
+  const defaultCredentials = {
+    email: "",
+    password: "",
+  };
+  const [credentials, setCredentials] = useState({ ...defaultCredentials });
+  const [
+    login,
+    { loading: mutationLoading, error: mutationError, data },
+  ] = useMutation(LOGIN_MUTATION, {
+    errorPolicy: "all",
+  });
+
+  const onChange = (e) => {
+    e.preventDefault();
+    const target = e.target;
+    const field = target.name;
 
-    const defaultCredentials = {
-        email: '',
-        password: ''
-    };
-    const [credentials, setCredentials] = useState({ ...defaultCredentials });
-    const [login, { 
-        loading: mutationLoading,
-        error: mutationError,
-        data 
-    }] = useMutation(LOGIN_MUTATION, {
-        errorPolicy: 'all'
+    credentials[`${field}`] = target.value;
+    setCredentials({
+      ...credentials,
     });
+  };
 
-    const onChange = (e) => {
-        e.preventDefault();
-        const target = e.target;
-        const field = target.name;
-        
-        credentials[`${field}`] = target.value;
-        setCredentials({
-            ...credentials
-        });
-    }
+  const onSubmit = (e) => {
+    e.preventDefault();
+    login({ variables: { credentials: credentials } }).then(({ data }) => {
+      authContext.login(data.login.token, data.login.tokenExpiration);
+      navigateToAnnonce();
+    }).catch(err => {
+        console.log(err);
+    });
+  };
 
-    const onSubmit = (e) => {
-        e.preventDefault();
-        login({ variables: { credentials: credentials }});
-        navigateToAnnonce();        
-    }
-    
-    const navigateToAnnonce = () => {
-        history.push('/');
-    }
+  const navigateToAnnonce = () => {
+    history.push("/");
+  };
 
-    return (
-        <div className="text-center">
-        <form className="form-signin" onSubmit={onSubmit}>        
-            <h1 className="h3 mb-3 font-weight-normal">Connexion</h1>            
-                <img className="mb-4" src={Logo} alt="logo iwocs" width="72" height="72"></img>
-            <input
-                type="email"
-                id="inputEmail"
-                className="form-control mb-2"
-                placeholder="E-mail"
-                name="email"
-                onChange={onChange}
-                required
-                autoFocus
-            />
-            <label htmlFor="inputPassword" className="sr-only">
-            Password
-            </label>
-            <input
-                type="password"
-                id="inputPassword"
-                className="form-control"
-                placeholder="Mot de passe"
-                name="password"
-                onChange={onChange}
-                required
-            />     
-            {mutationError && (
-                <div className="alert alert-danger" role="alert">
-                    {mutationError.graphQLErrors[0].message}
-                </div>
-            )}
-            <button 
-                className="btn btn-lg btn-primary btn-block" 
-                type="submit"
-                disabled={mutationLoading}
-            >
-            {mutationLoading ? 
-                <div className="spinner-border text-light" role="status">
-                    <span className="sr-only">Loading...</span>
-                </div>: 'Soumettre'}            
-            </button>
-            <p className="mt-5 mb-3 text-muted">M2 IWOCS 2020-2021</p>
-        </form>
-        </div>
+  return (
+    <div className="text-center">
+      <form className="form-signin" onSubmit={onSubmit}>
+        <h1 className="h3 mb-3 font-weight-normal">Connexion</h1>
+        <img
+          className="mb-4"
+          src={Logo}
+          alt="logo iwocs"
+          width="72"
+          height="72"
+        ></img>
+        <input
+          type="email"
+          id="inputEmail"
+          className="form-control mb-2"
+          placeholder="E-mail"
+          name="email"
+          onChange={onChange}
+          required
+          autoFocus
+        />
+        <label htmlFor="inputPassword" className="sr-only">
+          Password
+        </label>
+        <input
+          type="password"
+          id="inputPassword"
+          className="form-control"
+          placeholder="Mot de passe"
+          name="password"
+          onChange={onChange}
+          required
+        />
+        {mutationError && (
+          <div className="alert alert-danger" role="alert">
+            {mutationError.graphQLErrors[0].message}
+          </div>
+        )}
+        <button
+          className="btn btn-lg btn-primary btn-block"
+          type="submit"
+          disabled={mutationLoading}
+        >
+          {mutationLoading ? (
+            <div className="spinner-border text-light" role="status">
+              <span className="sr-only">Loading...</span>
+            </div>
+          ) : (
+            "Soumettre"
+          )}
+        </button>
+        <p className="mt-5 mb-3 text-muted">M2 IWOCS 2020-2021</p>
+      </form>
+    </div>
   );
 };
 
diff --git a/src/containers/header.js b/src/containers/header.js
index 301284acec758af5dbad1996b4d46e9362a1f1a8..921869596847827939d1a56cbc761e5b353d5818 100644
--- a/src/containers/header.js
+++ b/src/containers/header.js
@@ -1,21 +1,41 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useContext } from 'react';
+
+import { AuthContext } from "./../contexts/AuthContext";
 
 function Header() {
+  const authContext = useContext(AuthContext);
+
+  const logoutHandler = (e) => {
+    e.preventDefault();
+    authContext.logout();    
+  }
 
   return (
     <div className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
       <h5 className="my-0 mr-md-auto font-weight-normal">
-        <a href="/" className="text-dark">M2 Iwocs</a>
-      </h5>
-      <nav className="my-2 my-md-0 mr-md-3">
-        <a className="p-2 text-dark" href="/sign-in">
-          Login
+        <a href="/" className="text-dark">
+          M2 Iwocs
         </a>
-      </nav>
-      <a className="btn btn-outline-primary" href="/register">
-        Sign up
-      </a>
+      </h5>
+      {!authContext.isLoggedIn && (
+        <>
+          <nav className="my-2 my-md-0 mr-md-3">
+            <a className="p-2 text-dark" href="/sign-in">
+              Login
+            </a>
+          </nav>
+          <a className="btn btn-outline-primary" href="/register">
+            Sign up
+          </a>
+        </>
+      )}
+      {authContext.isLoggedIn && (
+        <nav className="my-2 my-md-0 mr-md-3">
+            <a className="p-2 text-dark" onClick={logoutHandler}>
+              Logout
+            </a>
+          </nav>
+      )}
     </div>
   );
 }
diff --git a/src/containers/list-annonces.js b/src/containers/list-annonces.js
index e743c5d4c43b33dd49f4969fc1434c990f8bde24..b73eb3f382be64cd3603a1dd8e54d3f443088b00 100644
--- a/src/containers/list-annonces.js
+++ b/src/containers/list-annonces.js
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { gql, useQuery, useMutation } from "@apollo/client";
 import { useHistory } from "react-router-dom";
 import { GraphQLID } from 'graphql';
 
 import ListAnnonceItem from '../components/list-annonce-item';
 import { API_URL } from './../constants';
+import { AuthContext } from "./../contexts/AuthContext";
 
 const GET_ANNONCES_QUERY = gql`
     query getAnnonces {
@@ -49,6 +50,7 @@ const DELETE_ANNONCE_MUTATION = gql`
 
 const ListAnnonce = () => {
     let history = useHistory();
+    const authContext = useContext(AuthContext);
 
     const { loading, error, data, updateQuery } = useQuery(GET_ANNONCES_QUERY);
 
@@ -93,12 +95,14 @@ const ListAnnonce = () => {
 
     return (
       <div>
+        {authContext.isLoggedIn &&         
         <a  
           className="row text-lg-right text-md-right mb-4"
           href="/annonces/create"
         >
           <button className="btn btn-primary">Créer une annonce</button>
         </a>
+        }
         <div className="row">
           {data.annonces.map((annonce, index) => {
             return (
@@ -107,7 +111,7 @@ const ListAnnonce = () => {
                 annonce={annonce}
                 onClick={(e) => navigateToDetail(annonce)}
               />
-            );
+            );  
           })}
         </div>
         {selectedAnnonce && (
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js
new file mode 100644
index 0000000000000000000000000000000000000000..c0e7885968cc0fc113eb287d479cbd649e36af68
--- /dev/null
+++ b/src/contexts/AuthContext.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const AuthContext = React.createContext({
+    isLoggedIn: false,
+    token: null,
+    login: () => {
+
+    },
+    logout: () => {}
+});