I am using an App Component to hold all the route so it looks like
class App extends React.Component {
state = { signedIn: false };
handleSignedIn = () => {
this.setState({ signedIn: true });
};
render() {
<Router>
<Route>Header</Route>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
{...otherRoutes}
</Switch>
<Route>Footer</Route>
</Router>;
}
}
then in one of the routes, I have something like this
<NavLink to="/">
Home
</NavLink>
However, i find that clicking on this NavLink rerenders App and set signedIn to false, what's the right/better way to navigate around this.
-- updated routes for more details
Basically i am expecting the <App> itself not to rerender, but the <Router> should.
Returning to App.js means signedIn is reset to false, since the default state is false. Refreshing the page will also rerender App.js and reset it back to false.
You need some way of checking if the user is logged in already. One way of doing so is by storing a token client-side after logging in, and checking if the token is present when a component loads.
You can possibly store the token in localStorage, and then whenever App.js mounts do something like componentDidMount -> checkToken() -> setState({signedIn: true})
Related
The Issue:
I am facing an issue routing to a nested route (ExamResult component), I'd like to disable any kind of navigation to this specific route unless I've submitted a form.
Demo video:
https://www.screencast.com/t/cayuOnsa8
Code:
App.js Routes :
<Routes>
...
<Route path='exams/:id' element={<ExamPage />} >
<Route path='result' element={<ExamResult />} />
</Route>
<Route path='exams/:id/add-question' element={<RequireAuth><AddQuestion /></RequireAuth>}/>
{/* <Route path='exams/:id/result' element={<ExamResult />} /> */}
...
<Route path='*' element={<NoMatch />} />
</Routes>
QuestionList.js Component - Navigation to result route after quiz submission:
navigate('result', { state });
Repo: quiz-react-storybook
Github Open Issue: issue
Expectations:
Only after I'm submitting the quiz I would expect the navigation to work, otherwise navigating to exams/:id/result path won't work.
The ExamPage component must render an Outlet component for the nested routes to rendered. You could conditionally render the Outlet based on whether or not the form has been submitted.
...
{formSubmitted && <Outlet />}
...
An alternative method might be to pass some route state along with the route transition to the "exams/:id/result" route and check in ExamResult whether or not the navigation was valid and issue a back navigation if it wasn't.
navigate(
'result',
{
state: {
...state,
formSubmitted: true,
}
}
);
ExamResult
const navigate = useNavigate();
const { state } = useLocation();
useEffect(() => {
if (!state?.formSubmitted) {
navigate(-1);
}
}, []);
...
manage global state(ex. - Submitted: false) in context or redux to check whether the form is submitted or not. set this state to true on submit.
in result component based on condition return result's JSX or navigate to home if Submitted = false.
I am struggling with a re-render in my project. First, I'm checking a cookie before I redirect the user to the login page. I am using Redux Store with this structure.
var initialState = {
user: {
auth: false,
isFetching: false,
isTokenFetching: false
}
}
Fetching is for login via login form, Token fetching is for login via a Token in cookies
I'm using a customized Dynamic route to make it render based on this condition. (isFetching is when token is fetching)
const DynamicRoute = ({isFetching,isAuthenticated, ...rest}) => {
return isFetching ? <h1>Fetching</h1> : (
<Route {...rest} render={(props) =>{
return isAuthenticated ?
<HomePage/> :
<LogInPage/>}}/>
)
}
This function is called before the action is dispatched, So it Renders LogInPage first, and Fetching when action is dispatched, and Render HomePage again when the token is valid.
How can I make sure it only renders the LogInPage and HomePage once.
For example if token is valid (HomePage only), if token invalid (LogInPage only)
I want this dynamic route to work because I hope to use an URL for both condition.
Sorry if my explanation is bad
First, if isAuthenticated is true, we should redirect user to HomePage, shouldn't we?
return isAuthenticated ? <HomePage/> : <LogInPage/>;
How can I make sure it only renders the LogInPage and HomePage once.
Use Redirect component to redirect user back to LogInPage like this:
return isAuthenticated ? <HomePage/> : <Redirect to="/login" />;
You can get the Redirect component from react-router-dom:
import { Redirect } from "react-router-dom";
I assume that you have defined router like this:
<Route path="/login" component={LogInPage} />
IMHO, you should change the way to authenticate your workflow, because it is not good to scale for the future. Have a look at this: react-router auth-worflow example
Basically, your routers will become something like:
<Route path="/login" component={LogInPage} />
<PrivateRoute path="/home" component={HomePage} />
I've created a simple React app with Redux, React Router and Auth0 which handles user authentications.
I'm trying to create this basic behavior to control access:
All unauthenticated users will automatically be sent to /public
Authenticated users can access all the other parts of the app
Once a user is authenticated by Auth0, I want to process the access_token and send user to / which is the Home component
Everything is "almost" working the way it should. The problem I'm having is that render() function in App.jsx is executing BEFORE the lock.on('authenticated') listener even has a chance to process the tokens returned by Auth0. As a result, the tokens are never stored and the user always seems to be unauthenticated. If I send user to /login, everything works fine because I'm not checking to see if the user is authenticated before rendering the Login component.
I think the way I'm handling protected routes needs to change. Any suggestions as to how to handle protected routes?
I'm providing the code that you need here. If you want to see the whole app, go to https://github.com/imsam67/react-redux-react-router-auth0-lock
The following is the App.jsx:
class App extends Component {
render() {
const isAuthed = isAuthenticated();
return (
<div>
<Switch>
<Route exact path="/" render={ props => isAuthed ? <Home {...props} /> : <Redirect to="/public" /> } />
<Route exact path="/login">
<Login />
</Route>
<Route path="/public">
<Public />
</Route>
</Switch>
</div>
);
}
}
This is the AuthWrapper component where I handle Auth0:
class AuthWrapper extends Component {
constructor(props) {
super(props);
this.onAuthenticated = this.onAuthenticated.bind(this);
this.lock = new Auth0Lock('my_auth0_client_id', 'my_domain.auth0.com', {
auth: {
audience: 'https://my_backend_api_url',
redirectUrl: 'http://localhost:3000/',
responseType: 'token id_token',
sso: false
}
});
this.onAuthenticated();
}
onAuthenticated() {
debugger; // After successful login, I hit this debugger
this.lock.on('authenticated', (authResult) => {
debugger; // But I never hit this debugger
let expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
sessionStorage.setItem('access_token', authResult.accessToken);
sessionStorage.setItem('id_token', authResult.idToken);
sessionStorage.setItem('expires_at', expiresAt);
});
}
render() {
return(
<AuthContext.Provider value={{ lock: this.lock }}>
{this.props.children}
</AuthContext.Provider>
);
}
}
And here's index.js in case you need to see it:
import App from './components/App';
import AuthWrapper from './components/auth/AuthWrapper';
// Store
import appStore from './store/app-store';
const store = appStore();
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<AuthWrapper>
<App />
</AuthWrapper>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
Here are the changes I made to make this work.
I now initialize Auth0 Lock in index.js to make it global
I moved the onAuthenticated() listener to LoginCallback.jsx component which is where the user is sent after a successful login. I believe moving the onAuthenticated() from App.jsx to LoginCallback.jsx made the biggest impact because the listener in LoginCallback.jsx executes before App.jsx.
On successful authentication, I also use this.props.history.push('/'); to send user to Home component
For full code, please see the repo at https://github.com/imsam67/react-redux-react-router-auth0-lock
Remember nothing is protected in the client side at all. If your concerned of routing to a component without auth just make sure no data is exposed(assuming they can't get any data without a token) and redirect if they landed there even after your router checks for auth or shows an error.
Remember nothing is protected in the client side at all. If your concerned of routing to a component without auth just make sure no data is exposed and redirect if they landed there even after your router checks for auth. I think #Sam has it right. The routes may not respond as expected to an asynchronous call changing it or may have odd behavior. I've never attempted a dynamic route this way but always had conditional renders of content components. A better approach may be to send the call and in the then block redirect to a url which the router knows to handle. Just not sure the router handles this very well. Catch the component checking for auth on load and redirect back to log on if not authorized. Sorry I'm not helping much here but conditional routes almost seem like an anti pattern but I guess it could work if we knew how the router renders its data after changes or if it actually does at all(the routes them selves.) So if they were to bookmark the url and try to return back that would be a 404 right? Maybe like a 401 unauthorized showing and redirect or link to log in might be better?
Dynamic routing need to be defined outside of the <Switch> scope. Here is an exemple assuming your function isAuthenticated() is a state (Redux or wathever)
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
// core components
import Admin from "layouts/Admin.js";
import SignIn from "layouts/SignIn";
const hist = createBrowserHistory();
const loggedRoutes = () => (
<Switch>
<Route path="/" component={SignIn} />
<Route path="/admin" component={Admin} />
<Redirect from="/admin" to="/admin/aboutUs/whatWeDo" />
</Switch>
);
const routes = () => (
<Switch>
<Route path="/" component={SignIn} />
<Route path="/login" component={Admin} />
<Redirect from="/" to="/login" />
</Switch>
);
ReactDOM.render(
<Router history={hist}>
{checkIfAuth? loggedRoutes():routes()}
</Router>,
document.getElementById("root")
);
In this exemple, If you are not login you are redirect to /login.
I have a React app that has a basic structure like seen below. I am attempting to programmatically redirect the user to /profile route but I am seeing Warning: You tried to redirect to the same route you're currently on: "/profile".
Inside the Main component header I have a form that should redirect the user to /profile. The only way that I was able to get this working is to add && this.props.location.pathname !== '/profile' to the state.toProfile condition. This feels a bit dirty. It seems like there is a better way.
I am taking the approach recommended in this blog post https://tylermcginnis.com/react-router-programmatically-navigate/, it seems like this doesn't work if the route you redirect to contains the same component as the route that was redirected from.
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/dashboard" component={Dashboard} />
<Route component={Main} />
</Switch>
</BrowserRouter>
);
}
}
class Main extends Component {
state = {
toProfile: false
}
render() {
if (this.state.toProfile === true) {
return <Redirect to='/profile' />
}
return (
<header>
...
</header>
);
}
}
you need to add a route for /profile, atm profile goes to Main that goes to /profile... again
I have an App component which, using react-router, holds a few components in two routes. I also have a Firebase data store which I want to bind to the state of App (using rebase) so I can pass it down to any component I wish as a prop. This is my App class:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: {}
};
}
componentDidMount () {
rebase.bindToState('items', {
context: this,
state: 'items'
})
}
render() {
return (
<Router>
<div className='container'>
<div className="header">
<h3>Header</h3>
<Nav/>
</div>
<Switch>
<Route exact path='/' component={() => <Home items={this.state.items} rebase={rebase} />} />
<Route render={function () {
return <p>Not Found</p>
}} />
</Switch>
</div>
</Router>
)
}
}
Now, when I load my page I get two mounts of the Home component. This in itself is not great. However, I have several actions in the Home component that use rebase to modify/read from Firebase. As a callback of these actions they also change the Home component's state. The problem is, whenever I do a Firebase call, it remounts the Home component and any state I have is lost.
If I remove the Router wrappers from the Home component, and render it purely as render( <Home items={this.state.items} rebase={rebase} /> ), my app works perfectly as intended. I don't know why wrapping it in Router stuff makes it not work. I thought it was because I had additional URL parameters that also changed when I call firebase updates (e.g. /?p=sgergwc4), but I have a button that changes that parameter without a firebase update and it doesn't cause any problems (i.e. doesn't cause a remount). So what's up with the Router?
Turns out the answer is simple; instead of component={}, I should use render={}. Fixes everything. It was in the docs too.