React-Redux JWT
This blog is update to my old blog React-Redux Project. I added new features to my application like JWT(JSON Web Token), Bootstrap, and external API(google books).
An explanation for how to handle JWT and Authentication in the frontend of your web app.
I needed three Rails routes:
GET /api/v1/profile(.:format)
POST/api/v1/auth(.:format)
POST/api/v1/users(.:format)
User Signs up post to (/users)
In React app, I build sign up component which upon submission will run the fetch request to my actions/newUserFetch.js file; this will send POST request to my backend that will create the user instance and return and object with user token.
your Sign Up form will look similar to this:
function newUserFetch is being imported from actions.js and then added as a prop to the component using mapDispatchToProps. this function will handle the fetch request to Rails Api as well as saving the user object to the Redux store and adding the token to localStorage.
newUserFetch function will look like this:
In newUserFetch function, localStorage.setItem(“token”, data.jwt) will save the JWT token to our user’s localStorage. This will be used to persist user login between sessions. dispatch(loginUser(data.user)) will take the user object ({username: “newUser”}) and save it to your Redux store. This will make it easy for any component in your React App to know who the current user is.
function userReducer(state = [], action) {switch (action.type) {case 'LOGIN_USER':return {...state, currentUser: action.userObj}default:
return state;
}
User Signs in post to (/auth)
signing in user is similar to signup process except you are only sending sign in credentials to backend. “userSignin” is imported from action.js to handle fetch request to backend and receiving object with a user token that will be saved to Redux store and localStorage.
your sign in form will be similar to this:
userSignin action looks exactly as newUserFetch except it sends fetch request to "http://localhost:3000/api/v1/auth" route.
persist user through sessions (Get to /profile)
to enable user navigate your app without having to sign in on every visited page, you need to save your token to localStorage.To do this, you will want to run your fetch (GET to /profile) every time your app is accessed if the user has a token saved into localStorage. componentDidMount in your App component is a good choice, as it will definitely run when your app is accessed.
fetchProfile function is imported from action.js that is run immediately when the App component mounts.
The function will look something like this:
External API:
my react app fetch request to google books api to show users collection of books also user can type name of book in search bar and get books that match the name inserted in search bar. to do that, read their documentation https://developers.google.com/books/ and save your key in “.env” file and do not forget to add .env to gitignore. your action will look similar to this:
That’s all for now — Thanks for reading and happy coding! you can view demos to my React-Redux application before adding JWT and after adding JWT.
