title: how can i put the username in the navbar after logging in?
body: <p>i want to put the username in the navbar after logging it happens , i am using jwt for authentication and everything is just fine </p>
  
  <p>the profile file , i use decode to decrypt the jwt token and compare it with the users one , it gives me his data in the best way possible , i tried to do such in the landing page including navbar , i tried to put in componentDidMount but it is not a good way since the moment the site loads , the token isnt found yet , thus it crashes
  what shall i do to put it in the navbar</p>
  
  <p>my landing page that contains the navbar</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Link, withRouter } from 'react-router-dom'
  
  
  class Landing extends Component {
    constructor() {
      super()
      this.state = {
        username:''
      }
    }
  
  
    logOut(e) {
      e.preventDefault()
      localStorage.removeItem('usertoken')
      this.props.history.push(`/`)
    }
  
    render() {
      const currentuser= localStorage.usertoken
      const loginRegLink = (
        &lt;ul className="navbar-nav"&gt;
          &lt;li className="nav-item"&gt;
            &lt;Link to="/login" className="nav-link"&gt;
              Login
            &lt;/Link&gt;
          &lt;/li&gt;
          &lt;li className="nav-item"&gt;
            &lt;Link to="/signup" className="nav-link"&gt;
              Register
            &lt;/Link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      )
  
      const userLink = (
        &lt;ul className="navbar-nav"&gt;
          &lt;li className="nav-item"&gt;
            &lt;Link to="/profile" className="nav-link"&gt;
              User
            &lt;/Link&gt;
          &lt;/li&gt;
          &lt;li className="nav-item"&gt;
            &lt;a href="" onClick={this.logOut.bind(this)} className="nav-link"&gt;
              Logout
            &lt;/a&gt;
          &lt;/li &gt;
  
        &lt;/ul&gt;
      )
  
      return (
        &lt;nav className="navbar navbar-expand-lg navbar-dark bg-dark rounded"&gt;
          &lt;button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarsExample10"
            aria-controls="navbarsExample10"
            aria-expanded="false"
            aria-label="Toggle navigation"
          &gt;
            &lt;span className="navbar-toggler-icon" /&gt;
          &lt;/button&gt;
  
          &lt;div
            className="collapse navbar-collapse justify-content-md-center"
            id="navbarsExample10"
          &gt;
            &lt;ul className="navbar-nav"&gt;
              &lt;li className="nav-item"&gt;
                &lt;Link to="/" className="nav-link"&gt;
                  Home
                &lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            {localStorage.usertoken ? userLink : loginRegLink}
          &lt;/div&gt;
  
        &lt;/nav&gt;
      )
    }
  }
  
  export default withRouter(Landing)
  </code></pre>
  
  <p>react App.js file</p>
  
  <pre><code>import React, { Component } from "react";
  import { BrowserRouter, Route, Switch } from "react-router-dom";
  import SignUp from "./components/user/Signup";
  import Login from "./components/user/Login";
  import Navbar from './components/user/Navbar'
  import Landing from './components/user/Landing'
  import Profile from './components/user/Profile'
  
  
  class App extends Component {
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;div className="App"&gt;
          &lt;Navbar /&gt;
            &lt;Switch&gt;
          &lt;Route exact path="/" component={Landing} /&gt;
          &lt;Route exact path="/profile" component={Profile} /&gt;
  
          &lt;Route path="/signup" component={SignUp}/&gt;
          &lt;Route path="/login" component={Login}/&gt;
  
  
            &lt;/Switch&gt;
          &lt;/div&gt;
  
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  
  
  export default App
  </code></pre>
  
  <p>the profile file where i decode and show the data</p>
  
  <pre><code>import React, { Component } from 'react'
  import jwt_decode from 'jwt-decode'
  
  class Profile extends Component {
    constructor() {
      super()
      this.state = {
        username:'',
        first_name: '',
        last_name: '',
        email: '',
        errors: {}
      }
    }
  
    componentDidMount() {
      const token = localStorage.usertoken
      const decoded = jwt_decode(token)
      this.setState({
        username:decoded.username,
        first_name: decoded.first_name,
        last_name: decoded.last_name,
        email: decoded.email
      })
    }
  
    render() {
  
      return (
  
        &lt;div className="container"&gt;
          &lt;div className="jumbotron mt-5"&gt;
            &lt;div className="col-sm-8 mx-auto"&gt;
              &lt;h1 className="text-center"&gt;PROFILE&lt;/h1&gt;
            &lt;/div&gt;
            &lt;table className="table col-md-6 mx-auto"&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;First Name&lt;/td&gt;
                  &lt;td&gt;{this.state.first_name}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Last Name&lt;/td&gt;
                  &lt;td&gt;{this.state.last_name}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Email&lt;/td&gt;
                  &lt;td&gt;{this.state.email}&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Profile
  </code></pre>
  
  <p>the controllers where i do signup , login and profile</p>
  
  <pre><code>//express requirement
  const express = require('express')
  //setting a users variable to be used as a router instead of app post , get ..
  const users = express.Router()
  //cross oigin resource sharing 
  const cors = require('cors')
  //jwt for user login authentication
  const jwt = require('jsonwebtoken')
  //bcrypt for password encryption and decryption
  const bcrypt = require('bcrypt')
  //using te user model
  const User = require('../model/user')
  //setting users as cros origin functionalities
  users.use(cors())
  //privat key or jwt encryption and decryption
  process.env.SECRET_KEY = 'q1w2e3r4t5y6u7i8o9p0o9i8u7y6t5r4e3w2q1'
  
  //main signup function , exported
  users.post('/signup', (req, res) =&gt; {
    //setting a new user object to be manipulated and inserted to db 
    //data taken from react client side 
    const today = new Date()
    const userData = {
      username : req.body.username,
      first_name: req.body.first_name,
      last_name: req.body.last_name,
      email: req.body.email,
      password: req.body.password,
      created: today
    }
  
    //a function from sequelize , a wrapper for later on functions
    //searches if the username is found or not 
    User.findOne({
      where: {
        //searching in the whhole db for this user name 
       username: req.body.username
      }
    })
      // encrypting the password using bcrypt encryption function
      //bcrypt uses a hash function to encrypt the user given password
      //will not reach this part if user is duplicated
      .then(user =&gt; {
        if (!user) {
          //hashing the password , 10 is a number for permutations 2pwr10 = a certain string built in
          bcrypt.hash(req.body.password, 10, (err, hash) =&gt; {
            userData.password = hash
            //creating a user with the given data
            User.create(userData)
            //send the username to the response tab in console
              .then(user =&gt; {
                res.json({ status: user.username + '    '+ 'Registered!' })
              })
              //any error will be consoled here
              .catch(err =&gt; {
                res.send('error: ' + err)
              })
          })
        } else {
          //will reach if username is found ,  User.findOne 
          res.json({ error: 'User already exists' })
        }
      })
      .catch(err =&gt; {
        res.send('error: ' + err)
      })
  })
  
  //main login functionality
  users.post('/login', (req, res) =&gt; {
    ///searches for username in db at first
    User.findOne({
      where: {
       username: req.body.username
      }
    })
    //if the user is found , it compared the password with the given password
    //it compared it the encrypted pass in the db
    //and decrypts it to compare
      .then(user =&gt; {
        if (user) {
          //if user name is found the deryption starts here
          if (bcrypt.compareSync(req.body.password, user.password)) {
            //each user is given a certain jwt token for authentication
            //jwt.sign , Synchronously sign the given payload into a JSON Web Token string payload
            //secret key provided above
            //token is assigned using the front end whuck sends it with the request
            let token = jwt.sign(user.dataValues, process.env.SECRET_KEY, {
              expiresIn: 1440
            })
            //send token to local storage of the browser that checks it 
            res.send(token)
          }
        } else {
          //reaches here if user isnt found
          res.status(400).json({ error: 'User does not exist' })
        }
      })
      //catches any error from the above blocks
      .catch(err =&gt; {
        res.status(400).json({ error: err })
      })
  })
  
  users.get('/profile', (req, res) =&gt; {
    //Synchronously verify given token using a secret or a public key to get a decoded token token -
    // JWT string to verify secretOrPublicKey - Either the secret for HMAC algorithms, 
    //or the PEM encoded public key for RSA and ECDSA.
    // [options] - Options for the verification returns - The decoded token.
    var decoded = jwt.verify(req.headers['authorization'], process.env.SECRET_KEY)
  
  
    //searches for user
    User.findOne({
      //decode user id and jwt 
      where: {
        id: decoded.id
  
      }
  
    })
    //if true, user is sent as a json object to browser
      .then(user =&gt; {
        if (user) {
          console.log(user)
          res.json(user)
        } else {
          //if false , send this response
          res.send('User does not exist')
        }
      })
      .catch(err =&gt; {
        res.send('error: ' + err)
      })
  })
  
  module.exports = users
  </code></pre>
  
  <p>my endpoints for login and signup</p>
  
  <pre><code>import axios from 'axios'
  
  //the signup endpoint sent from front end and interpreted by the browser
  //route is an api called users , exported from server side
  //posting user data as in server
  //sending a response if true
  export const signup = newUser =&gt; {
    return axios
      .post('users/signup', {
        username : newUser.username,
        first_name: newUser.first_name,
        last_name: newUser.last_name,
        email: newUser.email,
        password: newUser.password
      })
      .then(response =&gt; {
        console.log('Registered')
      })
  }
  
  //login end point
  //using username and password , using the decoded id 
  export const login = async user =&gt; {
    try {
      const response = await axios
        .post('users/login', {
          username: user.username,
          password: user.password
        });
      localStorage.setItem('usertoken', response.data);
      return response.data;
    }
    catch (err) {
      console.log(err);
    }
  }
  
  </code></pre>