How to verify the username in the url - node.js

Question

I can just type any username in the url 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 http://localhost:3000/profile/Rick/posts
but if I type the url with any string or number or anything, it still renders the component. Like http://localhost:3000/profile/xcxcxcxcx/posts, it still shows the same posts as Rick's feed.
I think I have to verify the username.
Here's my code.
UserProfile
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 (
<div>
{isIdentifyingToken ? null : (
<div className="card">
<div className="card-content">
<div className="media">
<div className="media-left">
<figure className="image is-48x48">
<img
src="https://bulma.io/images/placeholders/96x96.png"
alt="Placeholder image"
/>
</figure>
</div>
<div className="media-content">
<p className="title is-4">{username}</p>
<p className="subtitle is-6">{email}</p>
</div>
</div>
<Link to={`/profile/${username}/posts`}>My Posts</Link>
<br></br>
</div>
</div>
)}
</div>
)
}
}
const mapStateToProps = state => {
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)
UserFeed
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 && this.props.userId) {
this.props.dispatch(getUserPosts(this.props.userId))
} else {
return null
}
}
}
render() {
const { isFetchingUserPosts, userPosts } = this.props
return isFetchingUserPosts ? (
<p>Fetching....</p>
) : (
<div>
{userPosts &&
userPosts.map((post) => {
return <Cards key={post._id} post={post} />
})}
</div>
)
}
}
const mapStateToPros = (state) => {
return {
isFetchingUserPosts: state.userPosts.isFetchingUserPosts,
userPosts: state.userPosts.userPosts,
userId: state.auth.user._id,
}
}
export default connect(mapStateToPros)(UserFeed)
Cards
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 (
<div className="card">
<div className="card-content">
<div className="media">
<div className="media-left">
<figure className="image is-48x48">
<img
src="https://bulma.io/images/placeholders/96x96.png"
alt="Placeholder image"
/>
</figure>
</div>
<div className="media-content" style={{ border: "1px grey" }}>
<p className="title is-5">{title}</p>
<p className="content">{description}</p>
</div>
</div>
</div>
</div>
)
}
}
const mapStateToProps = state => {
return state
}
export default compose(withRouter, connect(mapStateToProps))(Cards)
I have a backend route which verifies the user like: (it just takes the decoded object out from the token which contains the userId and verifies the user)
identifyUser: async (req, res, next) => {
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)
}
}
I'm not sure how do I verify the username in the params:(
Edit: App.js
render() {
return (
<div>
<Router>
<Switch>
<Route exact path="/" component={LandingPage} />
<Route path="/register" component={RegistrationForm} />
<Route path="/login" component={LoginForm} />
<PrivateRoute path="/feed" component={Feed} />
<PrivateRoute path="/post/new" component={NewForm} />
<PrivateRoute path="/post/edit/:id" component={EditForm} />
<PrivateRoute exact path="/profile/:username" component={UserProfile} />
<PrivateRoute path="/profile/:username/posts" component={UserFeed} />
<Route component={NotFoundPage} />
</Switch>
</Router>
</div>
)
}

Answer 1

UserFeed is rendered with the component prop, so it receives the route props, match, location, and history. The match prop is the one you should be interested in.
this.props.match.params.username
UserFeed, however, needs to react to the match prop updating and refetch the posts. Here I believe I'm correctly assuming the path's username is the same as the user's userId property. (feel free to correct me if assumption is incorrect). This you'll need the componentDidUpdate lifecycle function.
componentDidUpdate(prevProps) {
const { match: { params: { username } } } = this.props;
const { match: { params: { username: prevUsername } } } = prevProps;
if (prevUsername !== username) {
// whatever other logic you need to validate user first
this.props.dispatch(getUserPosts(username));
}
}