Protecting Routes from unauthenticated users is a crucial part of any app.
In this blog, I'll show you exactly how to do that with your NextJS pag...
For further actions, you may consider blocking this person and/or reporting abuse
Thank you for the post. however you might need to check this
if (typeof window === "undefined") {....}
I think it should be if (typeof window !== "undefined") {...}
because you are checking to know if you are on the browser.
Yes, I think that was a mistake by him but overall this post is good and it helped me a lot. I'm sure this post will keep helping a lot of people later on.
Thank you Kevin! Glad it helped you
yes, that was a mistake. Thanks for notifying it, I'll fix it
Thanks a lot Shubham!
return (props) => { ... }
What is purpose of "props"? Thanks for your article 😘
props is a object that would contain a react component in the form of an object.
So those props are again passed in the
<WrappedComp />You can try
console.log(MyReactComponent())to see the props!Thanks a lot for this post its very helpful.
i am facing an issue when wrapping my page withAuth, it loads the page then redirects to "/" or whatever my fallback is, is there a way to prevent that from happening.
You could try removing the Router.replace("/"), by returning some JSX like "Verifyiing" or something
Thank you so much! I was looking for a way to do protected routes for so long!
Glad it helped!
Edit: This won't works
Thanks for the article. I'm using
" next ":" ^ 12.0.4 ",and I don't have access to localStorage or cookies, do you have any idea what that might be?localStorage is in the browser. Every modern browser has local storage
Will not work with a page which has getInitialProps or getServerSideProps()
I havent tried but thanks for notifying
Hey, Can you explain why and any solution for this issue?
Very helpful 👏
Thanks, this was a major save. I have one issue though, when I navigate through the protected routes, there seems to be a short flash before content apears using the verify token.
Glad it saved you!
yes those flashed are actually the useEffect running on mount and until then there nothing to render.
You can maybe add Loading components or something to indicate that the token is getting verified
Oh. Guessed as much. Thanks for your prompt response. You're awesome!
Thank you for the post. But it is not working in nextjs 12
So I have tried this . Eventually an issue arose which was the type of window is undefined on rendering and it returns null . so nothing gets loaded . My screen is empty and my web app freezes.
If u using getServerSideProps, when you view page source then it not have any content, not friendly SEO 😥 Can u fix that?
Hello, in case of it not working with getServerSideProps, I believe it doesn't matter. Because search engines can't crawl protected routes anyway (the search engine doesn't have a username/password for your application). Basically, any page you need to pass a login screen in order to view won't be crawled by a search engine spider anyway. In other words, don't wrap any publicly viewable (and therefore search engine crawlable) pages with WithAuth() in order to avoid trouble with SEO. :)
Thanks for sharing. I found this helpful
verifytoken is a dependencies?
No, verifyToken is a function, that you would implement to verify your JWT token.
useRouter hook is called conditionally
Please what is inside here??
import verifyToken from "services/verifyToken";
Hey, There is nothing inside of it.
I've added it as a way of showing the usage.
In your case, it could be any function that would verify your token.
This helped a lot and thank you, but there is an issue in the console it there is a warning saying react-dom.development.js?61bb:67 Warning: Expected server HTML to contain a matching
in .Hey, glad the article helped you.
At the time of writing it, I didn't face any such issue.
On searching, I stumbled upon this
github.com/vercel/next.js/discussi...
I am not sure which above methods you implemented but this might solve your issue
My solution might not be perfect but you could tweak around it from the above GitHub discussion
Error: Component definition is missing display name.
I received this error while using the component verifying the accessToken.