JWT and Image Upload Lecture

jwt-img-upload.md

1. Form validation

• Disable buttons when the form inputs are empty
• Show error feedback

2. JWT in header

• headers: {Authorization : `Bearer ${authToken}`}
• What are headers?
  • Lets the client (front end) and the server (back end) pass additional information
  • Check in the Network tab in Chrome Dev tools
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
  • https://swagger.io/docs/specification/authentication/bearer-authentication/
• Bearer token?
  • Bearer authentication (also called token authentication) is an HTTP authentication scheme that involves security tokens called bearer tokens
  • can be understood as “give access to the bearer of this token.”
  • The bearer token is a cryptic string, usually generated by the server in response to a login request.
  • The client must send this token in the Authorization header when making requests to protected resources Authorization: Bearer <token>
• How to pass a header using axios?
  • axios.post(url, data, headers).then().catch()

3. User profile page

• Send JWT as a bearer token, get their information, display

4. Image upload

• Add an upload form
• Add image preview
  • How does URL.createObjectURL(file) work?
  • Creates a reference to the image
  • Generates a temporary link to the file uploaded
• Upload image by making the call