Develop Reference

Component is not rendering completely on the page. React

I'm doing fullstack using react and express js including JWT.
The page is not rendering the complete component I imported, it only renders the text but not the functions within it. What I'm trying to do is display the username on the page.
I appreciate any help!
This is my UserProvider.js
import axios from "axios";
import UserContext from "./UserContext";
import React from "react";
import { useEffect, useState } from "react";
export const UserProvider = (props) => {
const baseUrl = "http://localhost:3000/api/users/";
const [ user, setUser ] = useState([]);
useEffect(() => {
async function fetchData() {
await getAllUsers();
}
fetchData();
}, []);
function getAllUsers() {
return axios.get(baseUrl).then(response => setUser(response.data))
};
function createUser(username, password, firstName, lastName) {
let user = { username, password, firstName, lastName };
return axios.post(baseUrl, user)
.then(response => {
return new Promise(resolve => resolve(response.data));
}
);
}
function signInUser(username, password) {
let user = { username, password };
return axios.post(`${baseUrl}/login`, user)
.then(response => {
localStorage.setItem('myPostsToken', response.data.token)
return new Promise(resolve => resolve(response.data));
}
);
}
return (
<UserContext.Provider value={{
user,
createUser,
signInUser
}}>
{ props.children }
</UserContext.Provider>
)
}
This is my UserList.js
import React, { useContext, useState } from 'react';
import '../App.css'
import UserContext from '../contexts/UserContext';
function UsersList(props) {
return (
<UserContext.Consumer>
{
({ user }) => {
return <div>
<h3>Welcome back </h3>
<div>
{user.map((u) => {
console.log(user)
return (
<div>
<div>
<h2>{u.name}</h2>
<p>{"user's name goes here"}</p>
</div>
</div>
)
})}
</div>
</div>
}
}
</UserContext.Consumer>
);
}
export default UsersList;
This is my UserContext.js
import React from "react";
const UserContext = React.createContext();
export default UserContext;
This is my App.js
import React from 'react';
import { Route, BrowserRouter, Routes, Link } from 'react-router-dom'
import SignIn from './components/SignIn'
import SignUp from './components/SignUp'
import PostsList from './components/PostsList'
import NewPosts from './components/NewPosts'
import { PostsProvider } from './contexts/PostsProvider';
import { UserProvider } from './contexts/UserProvider';
import { EditPosts } from './components/EditPosts';
import './App.css'
import NavBar from './components/NavBar';
import UsersList from './components/UsersList'
function App() {
return (
<div className='app'>
<NavBar />
<UserProvider>
<PostsProvider>
<div>
<BrowserRouter>
<Routes>
<Route exact path="/" element={ <SignIn /> } />
<Route path="/signin" element={ <SignIn /> } />
<Route path="/signup" element={ <SignUp /> } />
<Route path="/posts/new" element={ <NewPosts /> } />
<Route path="/postsList" element={ <PostsList /> } />
<Route path="/edit/:id" element={ <EditPosts /> } />
<Route path="/users/" element={ <UsersList /> } />
</Routes>
</BrowserRouter>
</div>
</PostsProvider>
</UserProvider>
</div>
);
}
export default App;

check authenticated user in ProtectedRouter component in react using react router v6

my app.jsx
import axios from "axios";
import { createContext, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import NavBar from "./components/Navbar";
import ProtectedRoute from "./components/ProtectedRoute";
import Home from "./pages/Home";
import Login from "./pages/Login";
import MyBlogs from "./pages/MyBlogs";
import Profile from "./pages/Profile";
import Signup from "./pages/Signup";
export const AuthContext = createContext();
const App = () => {
const [loggedIn, setLoggedIn] = useState(
Boolean(sessionStorage.getItem("loggedIn"))
);
const VUserData = sessionStorage.getItem("userData");
const [userData, setUserData] = useState(
VUserData ? JSON.parse(VUserData) : null
);
function getUserData() {
return axios
.get("/api/user")
.then((res) => {
return Promise.resolve(res.data);
})
.catch((err) => {
return Promise.reject(err.response);
});
}
return (
<BrowserRouter>
<AuthContext.Provider
value={{
loggedIn,
setLoggedIn,
userData,
setUserData,
getUserData,
}}
>
<Routes>
<Route path="/" element={<NavBar />}>
<Route index element={<Home />} />
<Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} />
<Route
path="profile"
element={
<ProtectedRoute>
<Profile />
</ProtectedRoute>
}
/>
<Route
path="my-blogs"
element={
<ProtectedRoute>
<MyBlogs />
</ProtectedRoute>
}
/>
</Route>
</Routes>
</AuthContext.Provider>
</BrowserRouter>
);
};
export default App;
my ProtectedRoute.jsx
import { useContext } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { AuthContext } from "../app";
const ProtectedRoute = ({ children, ...rest }) => {
const { loggedIn, getUserData } = useContext(AuthContext);
const location = useLocation();
if (loggedIn) {
getUserData()
.then((res) => {
return children;
})
.catch((res) => {
return (
<Navigate
to="/login"
replace
state={{ path: location.pathname }}
/>
);
});
} else {
return (
<Navigate to="/login" replace state={{ path: location.pathname }} />
);
}
};
export default ProtectedRoute;
my home.jsx
import React from "react";
import { Outlet } from "react-router-dom";
import NavBar from "../components/Navbar";
const Home = () => {
return (
<React.Fragment>
<NavBar />
<Outlet />
</React.Fragment>
);
};
export default Home;
My problem is after successful login, the profile page not rendering. It's just a blank white page but if I replacegetUserData() and the whole promise resolve with just return children; it's in ProtectedRoute.jsx it's working fine why is that?
how could I check whether the user is logged or not by requesting to the backend in ProtectedRoute.jsx

Facing issue with Custom Route with latest react-router-dom version 6

Recently, I am facing issue with Custom Route with latest react-router-dom version 6 in my code.
I have created custom route for authorized if user is not login then it will redirect to sign in page. It was working with previous react router version but now it's got broke with latest one.
I am posting the code below.
Getting below error message as well.
[UserRoute] is not a component. All component children of must be a Route or <React.Fragment>
LoadingToRedirect.js
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
const LoadingToRedirect = () => {
const [count, setCount] = useState(5);
const navigate = useNavigate();
useEffect(() => {
const interval = setInterval(() => {
setCount((currentCount) => --currentCount);
}, 1000);
count === 0 && navigate("/login");
return () => clearInterval(interval);
}, [count, navigate]);
return (
<div>
<p>Redirecting you in {count} seconds</p>
</div>
);
};
export default LoadingToRedirect;
UserRoute.js
import React from "react";
import { Route, Routes } from "react-router-dom";
import { useSelector } from "react-redux";
import LoadingToRedirect from "./LoadingToRedirect";
const UserRoute = ({ children, ...rest }) => {
const { currentUser } = useSelector((state) => state.user);
return currentUser ? <Route {...rest} /> : <LoadingToRedirect />;
};
export default UserRoute;
App.js
import React, { useEffect, Fragment } from "react";
import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Register from "./pages/Register";
import UserRoute from "./components/UserRoute";
import { useDispatch } from "react-redux";
import { auth } from "./firebase";
import { setUser } from "./redux/actions";
import Header from "./components/Header";
import AddEdit from "./pages/AddEdit";
function App() {
const dispatch = useDispatch();
useEffect(() => {
auth.onAuthStateChanged((authUser) => {
if (authUser) {
dispatch(setUser(authUser));
} else {
dispatch(setUser(null));
}
});
}, [dispatch]);
return (
<BrowserRouter>
<div className="App">
<Header />
<ToastContainer position="top-center" />
<Fragment>
<Routes>
<UserRoute path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<UserRoute path="/addContact" element={<AddEdit />} />
</Routes>
</Fragment>
</div>
</BrowserRouter>
);
}
export default App;

In react-router v6, the Routes component allows only Route children.
In UserRoute.js if there's no user you are returning LoadingToRedirect:
return currentUser ? <Route {...rest} /> : <LoadingToRedirect />;
You can try changing this to:
const UserRoute = ({ children, path, element }) => {
const { currentUser } = useSelector((state) => state.user);
return <Route path={path} element={ currentUser ? element : <LoadingToRedirect />} />;
};

Issue with history.push

I'm working on react Disney+ clone etc and I was trying to do something like: if user isnt authorized then show login page but if authorized then show content. I used useHistory for this. And it works for a second, it just starts to download login page (background image is loading, but text of login page is visible) and then it disappears and content page is shown. Url changes for a second too.
App.js
function App() {
return (
<div className="App">
<Router>
<Header />
<Switch>
<Route path="/login">
<Login/>
</Route>
<Route path="/detail/:id">
<Detail/>
</Route>
<Route path="/">
<Home/>
</Route>
</Switch>
</Router>
</div>
);
}
Header.js
import React from 'react'
import {selectUserName, selectUserPhoto, setUserLogin, setUserSignOut} from '../../features/user/userSlice' ;
import { useDispatch, useSelector } from "react-redux" ;
import { auth, provider} from "../../firebase"
import { useHistory} from 'react-router-dom';
const Header = () => {
const dispatch = useDispatch()
const userName = useSelector(selectUserName);
const userPhoto = useSelector(selectUserPhoto);
const history = useHistory();
const signIn = () => {
auth.signInWithPopup(provider)
.then((result) => {
let user = result.user;
dispatch(setUserLogin({
name: user.displayName,
email: user.email,
photo: user.photoURL
}))
history.push('/');
})
}
const signOut = () => {
auth.signOut()
.then(() => {
dispatch(setUserSignOut());
history.push('/login');
})
}
}

Based on your issue you can handle Routes in a different way. So you have routes which can only shown during unauthorised situation and some routes only shown for authorised user. For that you can have following implementation.
First you can create ProtectedRoute function.
import React from "react";
import { Redirect, Route } from "react-router-dom";
function ProtectedRoute({ component: Component, ...restOfProps }) {
const isAuthenticated = localStorage.getItem("isAuthenticated");
console.log("this", isAuthenticated);
return (
<Route
{...restOfProps}
render={(props) =>
isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
}
/>
);
}
export default ProtectedRoute;
And then you can use this function in your main App where you will declare your routes with component.
import ProtectedRoute from "./component/ProtectedRoute";
function App() {
return (
<div className="App">
<BrowserRouter>
<Route path="/login" component={Login} />
<ProtectedRoute path="/protected" component={ProtectedComponent} />
</BrowserRouter>
</div>
);
}
export default App;

ReactJS: Global Okta Auth Helper Function

I have my React web app authenticated using Okta however if the user is not authenticated or the token expires then it will redirect the user to the /login page.
Page1.js:
import React, { useState, useEffect } from "react";
import { useOktaAuth } from "#okta/okta-react";
import { Redirect, useHistory } from "react-router-dom";
const { authState } = useOktaAuth();
const history = useHistory();
useEffect(() => {
if (!authState) {
history.push("/login");
}
});
Is there a way I can include the above into an function that I can import to each different Page[#].js instead of including the above code in each file?
Just trying to refactor and make sure my code is tidy as I go but unsure the best way to tackle this.
TIA!

You can wrap all the components that required users to be logged in inside a component and protect the routes.
Once the user logs in, set a token in localstorage or redux (you need to persist it). Specify the route to go through IsloggedIn component so that, those routes will only be accessible if user is logged in, else will be redirected to the login page
Example
import React from "react";
import { Redirect, Route } from "react-router-dom";
function IsLoggedIn({ Component, ...props }) {
const isAuthenticated = localStorage.getItem("isAuthenticated");
return (
<Route {...props}
render={(props) =>
isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
}
/>
);
}
export default IsLoggedIn;
In App.js
function App(){
return(
<BrowserRouter>
<Route exact path="/login" component={Login} />
<IsLoggedIn exact path="/" component={Page1} />
</BrowserRouter>
)
}

you can use the below
private-route component
import React, { useEffect } from 'react';
import { Route, Redirect, RouteProps, useHistory } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from 'app/config/store';
import { SecureRoute, useOktaAuth } from '#okta/okta-react';
import { authenticationSuccess } from '../reducers/authentication-slice';
export const PrivateRouteComponent = ({ component: Component, ...rest }: IOwnProps) => {
//reducer
const isAuthenticated = useAppSelector(state => state.authentication.isOktaAuthenticated);
const { authState, oktaAuth } = useOktaAuth();
const dispatch = useAppDispatch();
useEffect(() => {
if (!isAuthenticated && authState && authState.isAuthenticated) {
oktaAuth.token.getUserInfo().then(info => {
//action dispatch
dispatch(authenticationSuccess({ name: info.name, email: info.email }));
});
}
}, [authState, oktaAuth]); // Update if authState changes
const renderRedirect = props => {
return isAuthenticated && <Component {...props} />;
};
return <SecureRoute {...rest} render={renderRedirect} />;
};
export default PrivateRouteComponent;
in app.js
<Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
<Switch>
<Route path="/callback" component={LoginCallback} />
<PrivateRoute path="/" exact={true} component={Home} />
<PrivateRoute path="/home" exact={true} component={Home} />
</Switch>
</Security>