title: How to verify the username in the url
body: <p>I can just type any username in the <code>url</code> and the same component gets rendered with the logged-in user's posts. Like when I'm logged in as rick, I can see my feed as <code>http://localhost:3000/profile/Rick/posts</code>
  but if I type the <code>url</code> with any string or number or anything, it still renders the component. Like <code>http://localhost:3000/profile/xcxcxcxcx/posts</code>, it still shows the same posts as Rick's feed.</p>
  
  <p>I think I have to verify the username. </p>
  
  <p>Here's my code.</p>
  
  <p><code>UserProfile</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react"
  import { getCurrentUser } from "../actions/userActions"
  import { connect } from "react-redux"
  import { Link } from "react-router-dom"
  
  class UserProfile extends Component {
    componentDidMount() {
      const authToken = localStorage.getItem("authToken")
      this.props.dispatch(getCurrentUser(authToken))
    }
  
    render() {
      const { isIdentifyingToken, username, email } = this.props
      return (
        &lt;div&gt;
          {isIdentifyingToken ? null : (
            &lt;div className="card"&gt;
              &lt;div className="card-content"&gt;
                &lt;div className="media"&gt;
                  &lt;div className="media-left"&gt;
                    &lt;figure className="image is-48x48"&gt;
                      &lt;img
                        src="https://bulma.io/images/placeholders/96x96.png"
                        alt="Placeholder image"
                      /&gt;
                    &lt;/figure&gt;
                  &lt;/div&gt;
                  &lt;div className="media-content"&gt;
                    &lt;p className="title is-4"&gt;{username}&lt;/p&gt;
                    &lt;p className="subtitle is-6"&gt;{email}&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;Link to={`/profile/${username}/posts`}&gt;My Posts&lt;/Link&gt;
                &lt;br&gt;&lt;/br&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      isIdentifyingToken: state.auth.isIdentifyingToken,
      username: state.auth.user.username,
      email: state.auth.user.email,
      id: state.auth.user._id
    }
  }
  
  export default connect(mapStateToProps)(UserProfile)
  </code></pre>
  
  <p><code>UserFeed</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react"
  import { getUserPosts, getCurrentUser } from "../actions/userActions"
  import { connect } from "react-redux"
  import Cards from "./Cards"
  
  class UserFeed extends Component {
    componentDidMount() {
      const authToken = localStorage.getItem("authToken")
      if (authToken) {
        this.props.dispatch(getCurrentUser(authToken))
        if (this.props &amp;&amp; this.props.userId) {
          this.props.dispatch(getUserPosts(this.props.userId))
        } else {
          return null
        }
      }
    }
  
    render() {
      const { isFetchingUserPosts, userPosts } = this.props
      return isFetchingUserPosts ? (
        &lt;p&gt;Fetching....&lt;/p&gt;
      ) : (
        &lt;div&gt;
          {userPosts &amp;&amp;
            userPosts.map((post) =&gt; {
              return &lt;Cards key={post._id} post={post} /&gt;
            })}
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToPros = (state) =&gt; {
    return {
      isFetchingUserPosts: state.userPosts.isFetchingUserPosts,
      userPosts: state.userPosts.userPosts,
      userId: state.auth.user._id,
    }
  }
  
  export default connect(mapStateToPros)(UserFeed)
  </code></pre>
  
  <p><code>Cards</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react"
  import { connect } from "react-redux"
  import { compose } from "redux"
  import { withRouter } from "react-router-dom"
  
  class Cards extends Component {
  
    render() {
      const {title, description } = this.props.post
      return (
        &lt;div className="card"&gt;
          &lt;div className="card-content"&gt;
            &lt;div className="media"&gt;
              &lt;div className="media-left"&gt;
                &lt;figure className="image is-48x48"&gt;
                  &lt;img
                    src="https://bulma.io/images/placeholders/96x96.png"
                    alt="Placeholder image"
                  /&gt;
                &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div className="media-content" style={{ border: "1px grey" }}&gt;
                &lt;p className="title is-5"&gt;{title}&lt;/p&gt;
                &lt;p className="content"&gt;{description}&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = state =&gt; {
      return state
  }
  
  export default compose(withRouter, connect(mapStateToProps))(Cards)
  </code></pre>
  
  <hr>
  
  <p>I have a backend route which verifies the user like: (it just takes the decoded object out from the token which contains the <code>userId</code> and verifies the user)</p>
  
  <pre class="lang-js prettyprint-override"><code>
      identifyUser: async (req, res, next) =&gt; {
          try {
              const userId = req.user.userId
              const user = await User.findOne({ _id: userId })
                  if (!user) {
                      return res.status(500).json( {error: "No user found "})
                  }
                  return res.status(200).json( { user })
              } catch(error) {
                  return next(error)
              }
          }
  </code></pre>
  
  <p>I'm not sure how do I verify the username in the params:(</p>
  
  <p><strong>Edit</strong>: <code>App.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>render() {
      return (
        &lt;div&gt;
            &lt;Router&gt;
              &lt;Switch&gt;
                &lt;Route exact path="/" component={LandingPage} /&gt;
                &lt;Route path="/register" component={RegistrationForm} /&gt;
                &lt;Route path="/login" component={LoginForm} /&gt;
                &lt;PrivateRoute path="/feed" component={Feed} /&gt;
                &lt;PrivateRoute path="/post/new" component={NewForm} /&gt;
                &lt;PrivateRoute path="/post/edit/:id" component={EditForm} /&gt;
                &lt;PrivateRoute exact path="/profile/:username" component={UserProfile} /&gt;
                &lt;PrivateRoute path="/profile/:username/posts" component={UserFeed} /&gt;
                &lt;Route component={NotFoundPage} /&gt;
              &lt;/Switch&gt;
            &lt;/Router&gt;
        &lt;/div&gt;
      )
  }
  </code></pre>