I am making my first react app with user authentication on my Rails Api (DoorKeeper/Devise). I set the expires_at in react's local_storage and try to verify in the private route component. I want to verify a user token to give him access to routes in this case '/'. I cant reach userSignedIn. how do I reach this function from the PrivateRoute component?
// PrivateRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom'
import userSignedIn from '../auth'
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
userSignedIn === true
? <Component {...props} />
: <Redirect to={{
pathname: '/login',
state: { from: props.location }
}} />
)} />
)
export default PrivateRoute;
// auth.js
const userSignedIn = () => {
if (localStorage.getItem('expires_at') !== null) {
return new Date() < new Date(localStorage.getItem('expires_at'))
} else {
return false
}
}
export default userSignedIn;
Thanks
Haven't had time to test this but
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
userSignedIn() === true
? <Component {...props} />
: <Redirect to={{
pathname: '/login',
state: { from: props.location }
}} />
)} />
)
You need to call the function userSignedIn() since it's what returns the value true/false (that's the only change here) userSignedIn === true -> userSignedIn() === true
Related
import { Route, Redirect } from 'react-router-dom';
import React, { useContext } from 'react';
import AuthContext from '../contexts/AuthContext';
function PrivateRoute({ children, ...rest }) {
const auth = useContext(AuthContext);
return(
<Route
{...rest}
render={({ location }) => {
auth.token ? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: { from: location },
}}
/>
)
}}
/>
)
}
export default PrivateRoute;
Expected an assignment or function call and instead saw an expression no-unused-expressions. What I did wrong
error in 13:13
auth.token ? (
You need to return the ternary operator.
return auth.token ? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: { from: location },
}}
Here, is my full code details:
route.js
<AdminRoute path="/dashboard" component={Dashboard} />
And, my admin route:
AdminRoute
import React from 'react'
import { Route } from 'react-router-dom'
import AdminLayout from '../components/layouts/AdminLayout'
const AdminRoute = ({ component: Component, ...rest }) => {
return (
<Route {...rest} render={(props) => (
<AdminLayout>
<Component {...props} />
</AdminLayout>
)} />
)
}
export default AdminRoute
and this is the AdminLayout,
and here it is hitting that console.log correctly, but not redirecting.
AdminLayout/
import React from 'react';
import { Redirect } from "react-router-dom";
import { isAuthenticated } from '../../utils/auth';
const AdminLayout = ({ children, ...rest }) => {
const isLoggedIn = isAuthenticated();
console.log("isLoggedIn >>",isLoggedIn);
if(!isLoggedIn){
//ITS HITTING THIS CONSOLE LOG
//BUT ITS NOT REDIRECTING
console.log('hit');
<Redirect
to={{
pathname: "/login",
state: { from: children.props.location },
}}
/>
}
return (
<div>{children}</div>
);
}
and this is the helper function to determine either the user is logged in or not.
Auth.js
export function isAuthenticated(){
if(localStorage.getItem("_token")){
return true;
}
return;
}
const auth = {
isAuthenticated,
};
export default auth;
The Redirect component needs to be returned in order to be rendered, and, ultimately, trigger a redirect, i.e.
const AdminLayout = ({ children, ...rest }) => {
const isLoggedIn = isAuthenticated();
if (!isLoggedIn){
return <Redirect
to={{
pathname: "/login",
state: { from: children.props.location },
}}
/>
}
return (
<div>{children}</div>
);
}
See the below function i am creating the Auth routes and getting the children undefined and shows blank page. In App.js i am using the private route as you can see below and when i use simple Route instead of PrivateRoute its shows the Login component
<PrivateRoute exact path="/" name="Login" render={props => <Login {...props}/>} />
Here is is My PrivateRoute.js. When i console the children its shows undefined
function PrivateRoute({ children, ...rest }) {
const token = cookie.get('token');
return (
<Route
{...rest}
render={({ location }) =>
!token ? (
children
) : (
<Redirect
to={{
pathname: "/dashboard",
state: { from: location }
}}
/>
)
}
/>
);
}
export default Private Route;
I usually use something like it. Let me know if it works for you.
Here is my privateRoute.js component:
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isAuthenticated } from 'auth';
export default function PrivateRoute({ component: Component, ...rest }) {
return (
<Route {...rest} render={
props => (
isAuthenticated() ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: '/', state: { from: props.location } }} />
)
)} />
);
}
Here I have another file in the root auth.js:
export const isAuthenticated = () => {
return Boolean(localStorage.getItem('jwttoken'));
}
export const login = ({email, password}) => {
// Logic
localStorage.setItem('jwttoken', 'jkdsalkfj');
return true;
}
export const logout = () => {
localStorage.removeItem('jwttoken');
}
You can call it like:
<PrivateRoute
component={ProjectPage}
path="/project/:id"
/>
Children refer to what's inside the tag
<PrivateRoute>
<PrivateComponent/>
</PrivateRouter>
Here your children would be <PrivateComponent/>
You're not passing anything inside your PrivateRoute in your example. So you'll have undefined
I'm trying to implement some security into my app and ended up creating this code:
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
const PrivateRoute = ({
component: Component,
auth: { isAuthenticated, loading },
...rest
}) => (
<Route
{...rest}
render={props =>
!isAuthenticated && !loading ? (
<Redirect to='/auth/login' />
) : (
<Component {...props} />
)
}
/>
);
PrivateRoute.propTypes = {
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);
auth comes from my state management that looks exactly like this when viewed from the Redux Devtools installed on my Chrome browser; here it is:
isAuthenticated and loading are usually true when a user is loggedIn; that works just fine. The problem I'm having is that my PrivateRoute does not redirect to the auth/login page when no one is loggedIn. Does anyone has any idea on how to fix this?. This is an example of one of my routes that need the PrivateRoute component:
<PrivateRoute exact path='/edit-basics' component={EditBasics} />
The route above is a page to edit the current loggedIn user info only available to him/her. I'm still accessing to it without being loggedIn.
So, you're probably getting errors from having the && operator and two expressions inside of the ternary operation that you're passing to the render method of Route.
You'll have to find a different way to validate if it's still loading.
In JSX if you pair true && expression it evaluates to expression – so basically you're returning !loading as a component to render.
Read more: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
const PrivateRoute = ({
component: Component,
auth: { isAuthenticated, loading },
...rest
}) => (
<Route
{...rest}
render={props =>
// TWO OPERATIONS WITH && WILL CAUSE ERROR
!isAuthenticated && !loading ? (
<Redirect to='/auth/login' />
) : (
<Component {...props} />
)
}
/>
);
Also,
React Router's authors recommend constructing this kind of private route with child components instead of passing the component to render as a prop.
Read more: https://reacttraining.com/react-router/web/example/auth-workflow
function PrivateRoute({ auth, children, ...rest }) {
return (
<Route
{...rest}
render={() =>
!auth.isAuthenticated ? (
<Redirect
to={{
pathname: "/auth/login",
state: { from: location }
}}
/>
) : (
children
)
}
/>
);
}
And to call that route:
<PrivateRoute path="/protected" auth={auth} >
<ProtectedPage customProp="some-prop" />
</PrivateRoute>
It looks like you are not passing down the auth prop to the PrivateRoute. Try adding it.
<PrivateRoute exact path='/edit-basics' component={EditBasics} auth={this.props.auth}/>
maybe something like this
const PrivateRoute = ({ component,
auth: { isAuthenticated, loading },
...options }) => {
let history = useHistory();
useLayoutEffect(() => {
if ( !isAuthenticated && !loading) history.push('/auth/login')
}, [])
return <Route {...options} component={component} />;
};
I have a PrivateRoute component that try to render a Component as follows:
import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component, loggedIn, ...rest }) => (
<Route
{...rest}
render={props =>
loggedIn ? (
<Component {...props} />
) : (
<Redirect
to={{ pathname: '/login', state: { from: props.location } }}
/>
)}
/>
);
export default PrivateRoute;
And I use this component like this:
<PrivateRoute loggedIn={!!token} path="/user" component={User} />
It gives me the error as the title. I wonder where could I go wrong?
Thank you in advance.
You have unpacked the component that you passed to PrivateRoute as component:
const PrivateRoute = ({ component, loggedIn, ...rest }) => (
// HERE ^
but then you use Component (note the capital C) which is imported from react to render it.
<Component {...props} />
And that imported Component doesn't have any render method. Hence the error you get.
To fix you need to rename your unpacked component like the following:
const PrivateRoute = ({ component: Comp, loggedIn, ...rest }) => (
// HERE ^
<Route
{...rest}
render={props =>
loggedIn ? (
<Comp {...props} />
// HERE ^
) : (
<Redirect
to={{ pathname: "/login", state: { from: props.location } }}
/>
)
}
/>
);