Here's a starting point with a signin and signup modals ready for you to use and implement authentication
Fork and clone this
1- Create a new store that will be responsible for authentication. Let's call it authStore.js.
2- In your AuthStore class, create a method called signup. This method takes the userData as an argument and sends a request to the /signup endpoint and passes userData in the body of the request.
3- Back to SignupModal. Create a handleSubmit method that calls authStore.signup and pass it user as an argument.
4- Pass handleSubmit to the form's onSubmit event.
1- In your authStore class, create a method called signin. This method takes the userData as an argument and sends a request to the /signin endpoint and passes userData in the body of the request. When logging in, we expect the token as a response. Let's console log it for now.
2- Back to SigninModal. Change the handleSubmit method to call authStore.signin and pass it user as an argument.
3- Try logging in and check your console.
4- Install jwt-decode which is a library that can decode tokens.
5- Import decode from jwt-decode which is a function that takes a token as an argument and returns the decoded object.
6- Pass the token in res.data to jwt-decode and let's console log it.
7- create a new property in our store called user. user's initial value is null, which basically mean that no user is logged in.
8- In signin, we will save the decoded token in this.user.
1- In authStore's signup method, save the response, and pass the token the decode method, and save the return value in this.user.
1- In authStore's signin method, after receiving the token in the response, we will save it in our axios's instance.
2- Do the same thing in signup.
3- The code is becoming very repeated, create a function called setUser in AuthStore that takes a token as an argument, saves it in the headers, decodes it and saves the decoded object in this.user.
4- Call this method in signin and signup methods and pass it the token.
1- You have a component called LogoutButton.js , render it under the NavBar so that it will only show if the user is logged in.
2- In authStore, create a signout method. But how can you logout the user? By setting this.user to null and deleting the token from the instance headers.
3- In the button's onClick event, call the signout method.
1- In your setUser method save your token in the localStorage using the setItem method.
2- Create a method called checkForToken in authStore, where you will fetch the token from the local storage.
3- Call this function right after creating your store.
4- Back to the checkForToken method, check if the token exists, if it does, make sure it's not expired. If it's not,pass the token to this.setUser else, call this.signout.
5- If the token is expired you must delete it from our local storage. In signout, remove the token from the local storage.