I’ve a question about the conditional rendering using the props user passed to the NavBar to decided if render or not the links to the protected resources.
Since it is possible to add a props to a component from the browser, as described at this link, it doesn’t seem an optimal way to block the access to that resources.
Well, I don’t think that this would be a security problem for one main reason: even though users might find ways to change the state or props of a React component, your app should not send sensitive data to user who do not have the appropriate permissions.
That is, if they change the props or state, they will be able to see links that lead to sensitive parts of your app, but they will not have access to the data that would be rendered there.
So do you mean that I have to implement a way to restrict access to private route also when the user navigate to them via the client-side?
In the tutorial’s code when the user navigate to a private route in the server-side there is a middleware that restrict access to the share-thought.js page for example.
But if I change the state of the React components and make me able to see the link and then navigate to the share-thought.js page, there isn’t a check, or to put it better, there is this check:
function ensureAuthenticated(req, res, next) {
if (req.isAuthenticated()) return next();
res.send(401);
}
But it is a check made after that the post request is sent.
But if I would like to avoid that a user could reach the private route share-thought.js via client navigation, what can I do?
Can be a good idea to implement in the getInitialProps an api-call to the custom server to check if the user is autheticated or not, and the redirect him based on the answer?
Hi, @tizianot. I mean you don’t need this kind of thing. If users are changing components’ internal state manually (in a hacky way), then there is nothing much you can do once the code that shows the view is already in their possession. That is, if they can change the internal state, they probably can hack their way through any client-side validation you come up with.
What you need to do is to make sure the endpoints that feed the client-side routes are secure enough and won’t leak any sensitive data.
I followed your Next.js Authentication Tutorial and built a project around it.
Everything runs fine on development and ‘npm run build’ builds without issues, but once I ‘npm run start’ and go to the page (localhost:3000) I get an “Internal Server Error” on the DOM and my terminal says “TypeError: Cannot read property ‘passport’ of undefined”.
This is happening on Windows 10 and my Ubuntu 18.04 server.
I am using NextJS with Zeit Now 2.0 for serverless hosting.
In the NextJS tutorial they use server.js and express to add “Server side support for clean URLs”. However, with Now 2.0 serverless, they seem to recommend using routing within ‘now.json’ for that.
Which is why I have stopped using server.js/express when deploying.
However, your example uses server.js with express. Is there a way to achieve the fully server-side authentication such as you described it without an express server, e.g. by modifying the _document.js page - or similar?
You stated above:
Note, however, that it is not a good idea to let the token leak to the browser. Use it on the backend only and fetch the API from there. That’s why I use delete user.accessToken .
Is it bad to store the idToken and/or accessToken with cookies?
With that approach, will you be able to fetch from the API from client side getInitialProps? As far as I know, navigating to new pages with the NextJS Router or Link will not call the server side getInitialProps, and I don’t think the access token will be available for API calls then?
Hi, I was trying out auth0 with this tutorial, and i kept getting redirected to login page after the login success. I have verified the login information. I was actually follow this tutorial step by step and every input is exactly the same as in this tutorial. Is the code on this tutorial works fine?
Hi, Bruno.
Thanks for your good article.
I am new for next.js and auth0, so I want your help for following issue.
If I am going to add user type field like user or admin in your auth login or signup page, then what shall I do it?
Can you let me know kindly about its solution?
Hey guys. I was in the same position like @timojokinen. Build the flow until i get the authresults after the login, and i have everything that i could wish. But I was feeling weird about process of the access token and where should i store it ? So actually this tutorial and theese comments does save my day .
Very helpful tutorial. Works great locally. I wonder if you have any instructions for deploying to Vercel. I tried a couple options but continue to get errors.
Thanks!