Web DevelopmentIntermediate 2 to 4 hours

Connect a Mock JWT API & Manage State

Wire up a login form to an API and manage the user session globally.

The Scenario

The backend team has just deployed the `/api/login` endpoint. It accepts an email and password and returns a mock JWT (JSON Web Token) along with the user profile data. You need to connect the login form, store the token securely, and make the user data available to the entire React app.

The Brief

Write the logic to submit credentials to a mock API endpoint. If successful, parse the response, store the JWT (explain where and why), and set the global user state using the React Context API (or a lightweight store like Zustand) so that a "Navbar" component can display "Welcome, [Name]".

Deliverables

  • The API fetch call and error handling logic (e.g., handling 401 Unauthorized)
  • The React Context provider (or Zustand store) managing the global `user` state
  • A paragraph defending your choice of where to store the JWT (LocalStorage vs. HttpOnly Cookie) for this specific scenario

Submission Guidance

You can mock the API call using a `setTimeout` that resolves with a fake token. Focus on how the global state is updated and consumed.

Submit Your Work

Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.

This appears on your public Badge.

0/20000 charactersMarkdown supported

One per line or comma separated. Up to 5 links.

By submitting, you agree your submission text, name, and evaluation will appear on a public Badge URL.