How to grab ASP.NET Web Api token (login) from a JS fetch and save token

Question

I'm building a React client to interact with my Asp.Net WebAPI (.NET Framework). I can succesfully register, and post data to the database (if I hard code the token in).

When "logging in" through postman it's http://localhost:44331/token with "grant_type, username, password". How can I write a fetch in JS to login and grab the token and save the token in my React app.

Here's my current fetch:

 const handleSubmit = (event) => { event.preventDefault(); fetch("https://localhost:44331/token", { method: "POST", mode: "no-cors", body: JSON.stringify({ grant_type: grant_type, username: username, password: password, }), headers: new Headers({ "Content-Type": "application/json", }), }) .then((response) => response.json()) .then((data) => { console.log(data); }) .catch((error) => { console.log(error); }); };

PS I'm realatively new to JS and C#.

Answer 1

paul7,

The knowledge about data storing is helpful in this scope of activity. I recommend take some info about possibility of get info both in fe and be sides.

Some alternatives are:

• SessionStorage
• LocalStorage
• Cookies
• Cache

---

All of them have application and differ in technical details.

---

Return to your question - i suggest just save Your token to localstorage:

localStorage.setItem("token", data.token);

where data.token is your property.

The following functions may be useful in these operations (cause sometimes You have to do various transformations before retrieving data from the clipboard.):

• JSON.stringify() - converts a JavaScript object or value to a JSON string
• JSON.parse() - method parses a JSON string, constructing the JavaScript value or object described by the string