How to Create Protected Routes in React with React-Router V6

Hey Friend, we usually get the JWTs stored in our localStorage through the backend. JWTs are primarily used to allow access to specific routes that are only permitted to us in exchange for authorization keys(in most cases our username and password). The JWT consists of three parts header, payload and signature which are separated by dots ( for example kyJ0eXAiOiJKV1QiLCJhbGciOiJIUiI1NiJ9. kyJ1c2VybmFtZSI6IlRoaW5rcGFuZGEifQ. og0a5SNbfJ1wj-1BkBjfpFUYz4wkORu-9K-VSHME0Rc). For our simple react application though, we can hardcode our token into our application since we are not connected to a backend by right-clicking on inspect and then going into the URL in our storage and inputting a key of string token and random string of characters for the value. We can then successfully navigate to the secret page.

I wrote more on this Setting up JWT authentication, and user Login in my How I built a budgeting Web API tutorial here: thinkpanda.hashnode.dev/how-i-built-a-budgeting-w…

note: when dealing with a backend you'd have to put in checks to make sure users don't tamper, or hardcode their token.

Thanks for reading I hope this answered your question. You can always reach out to me on @/thinkpanda404 on Twitter for a deeper guide into how it works. The comment section doesn't allow me to post pictures ;)