Learn how to add authentication to your Next.js application with Passport
Brought to you by @bruno.krebs 
Next.js and Passport, great combination, huh?
1 Like
Great article, thank you!
I’m trying building an architecture with different services and all authenticate with Auth0. I Was wondering if I somehow can access the access token from the browser, so I can make requests to those API’s. (Not in the same project as the server.js File and not on the same host).
I was trying to use Implicit Flow at first but that didn’t work so well with NextJS. How can I have the user’s accessToken in the browser with this approach?
2 Likes
Thanks for the great article!
However, I am not sure why you have to create src/state at first because it is not used at all.
I assume that you have re-written the article using React hooks or something?
1 Like
Hey there, @timojokinen.
You can easily fetch an access token for an API by configuring the audience property on the Passport Auth0 strategy. I built a sample to show that: fetching access token for a different API/audience; by brunokrebs · Pull Request #1 · auth0-blog/nextjs-passport · GitHub
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.
I hope that helps.
Oh, yeah, very true. These are remnants of a previous version. I will remove it. Thanks for the heads up 
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:
This blog post is fresh off the press 
and it was created by Sandrino, one of our Principal Architects.
Let us know if this helps you answer the questions you had, please 
Check out this new blog post, please, and let us know if this helps you with your SSR deployment
1 Like