niranzri / lab-context-jwt

Context + JWT

How to run the project

Use npm run deps to install dependencies on the frontend and backend.

Use npm run front to run the front end and in another terminal npm run back to run the backend.

---

Set up our routes

Setup your Signup and Login routes on the backend, we're gonna work on the verify one later.

---

Connect your frontend to your backend

Use Fetch (or Axios) to send your signup and login information to your new endpoints (your routes), don't forget to use bcryptjs to encrypt and compare the passwords.

Remember that Fetch needs headers to send JSON.

---

Create a new Context

Use the SessionContext.jsx file to create the context that's going to register your token and make it available across your application.

Don't forget to wrap your provider around your App.

---

Record our token to the Local Storage

To make sure our token is still there if we refresh the page, we're going to record it to our Local Storage.

You can use the hook from Mantine to do this if you're confortable with it.

---

Verify the token

When the user is going to come back or reload the page, we need to make sure that our token is still valid. Set up a call to your API that will check this token, using the verify route.

You'll need the middleware isAuthenticated for this.

Use the token

Now on every request, you need to send your token. With Fetch, you have to set the Authorization inside the headers to be "Bearer ${token}".