Next.js Authentication Tutorial

Thanks for the guide!

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.

Which can be a better way to do this?

Thanks a lot!

Hi, @tizianot. Thanks for reaching out to us.

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.

Does that help?

Regards,
Bruno Krebs

Hi @bruno.krebs, thanks for your answer.

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?

Thanks again!

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.

Does that make sense?

Hi Bruno,

Hello,

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.

My project github: GitHub - apardo04/stock-market-react-app: Full Stack Stock Market Portfolio App

Do you have any idea why this could be happening?

Solution:

  if (ctx.req && ctx.req.session && ctx.req.session.passport) {
         pageProps.user = ctx.req.session.passport.user;
  }

This allows build but isnt a solution for SSR. Ended up rebuilding the project.

1 Like

Thank you a lot @apardo04 for sharing it with the rest of community!

Thanks for a good post.

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?

If that is the case - how would you solve it?

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.

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?

Thanks a lot for sharing that info @twhouz. @bruno.krebs who is an author of the article will reach out to you to address your concerns! Thank you!

Howdy! We collaborated with the ZEIT team to come up with the following guidance to deploy serverless Next.js apps that use Auth0 for authentication:

https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/#Next-js-Serverless-Deployment-Model

This blog post is fresh off the press :fire: and it was created by Sandrino, one of our Principal Architects.

Let us know if this helps you answer the questions you had, please :slight_smile:

Check out this new blog post, please, and let us know if this helps you with your SSR deployment :slight_smile:

1 Like

Pretty much let us know if you’ve got any questions regarding the article!

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?

Looking for your message.

Best

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 :slight_smile: .

Thanks everything :heart:

Glad we were able to help @budasnorbi!

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!

Hey there @rebeccapeltz!

I didn’t find anything official from the Auth0 side of things on that bu here’s a GitHub issue with some hack that could be helpful:

https://github.com/auth0/nextjs-auth0/issues/108