Hur är tanken att använda localstorage? Backend .net core med react

Hallå där!

Jag valde att posta här just för att jag känner mig mer hemma med C# och gärna gillar att få råd relaterat till det. Jag bygger en liten SaaS nu under lovet, jag använder som sagt C# som backend i kombination med AzureSQL och React.

För att ge er lite background story;

Jag skapar egna JWT tokens (ville inte använda något färdigt som OAuth osv eller Microsoft Identity, man ska inte uppfinna hjulet igen men nu är jag här) och jag använder dessa för att skickas fram och tillbaka mellan frontend och backend. En användare kan endast ha en Token och vid log out raderas allihopa från databasen. Jag sätter alltså Bearer i localstorage och sedan dess värde (men jag ska göra så att de skickas i request headern senare när allt börjar bli färdigt).

Min fråga är nu, vad är de för värden jag kan stora i localstorage? Jag har tänkt att erbjuda telefonnr för 1 dollar (US och Canada nummer enbart) för 1 dollar i veckan. Om en användare får nya meddelandedn, kan de storas i localstorage typ eller bör jag ha ett get event med axios där jag hämtar meddelandena ur databasen? Eller bör jag ha det så att meddelandena skickas direkt med APiet jag använder till hemsidan?

Sorry om det är lite luddig förklaring, jag känner mig fortfarande som en nybörjare. Jag kan försöka förklara lite bättre eller göra lite djupare förklaring om ni undrar något.

TLDR:

Jag undrar vad jag kan ha för värden i localstorage (react frontend) och hur säkert det är?

Localstorage är väl begränsat till ett par megabyte per domän så jag tror inte att du kan lagra några stora mängder data där.

Du kan spara strängar i localStorage, och maxgräns för lagring är 5MB.
Man bör dock undvika att spara token i localStorage eftersom att det medför en viss säkerhetsrisk.

Sätt tokenet i en cookie, så skickar webläsaren med det automatiskt.
Vilken är, ironiskt nog, samma sätt som dotnet redan gör.


Direkt till API:et. All lagring och logik kring det där är 100% backend.

Tack för era svar, väljer att svara er alla på en gång. Det är så här det ser ut i react när det kommer till lyckad login;


edit: Jag försökte editera de men
localStorage.setItem('BA', response.data.accessToken);
localStorage.setItem('Bearer', response.data.refreshToken);
localStorage.setItem('username', username);
localStorage.setItem('isAuth', 'true');

BA är authorization token, refreshas efter 7 dagar men kanske borde ha de mycket mindre? Bearer är Refresh token. Jag sparar Refreshtoken i databasen och i local storage och jag använder den för att hämta användaren ur databasen, om den blir stulen eller används så blir den ogiltig, eller om en användare klickar på logout, då raderas alla dess tokens.

Username är bara för att visa namnet på navbaren och isAUth gör inte ett skit atm, har den bara där för att, antar att jag ska plocka bort den.


Jag vet att Microsoft identity finns, dvs jag har någonstans bara återuppfunnit hjulet på nytt fast lite sämre xD. Jag har dock bara gjort detta för skojs skull som ett projekt nu under sommaren till skolan startar och har haft mkt bök. En jävla rad kod och de kan strula länge, så vågade inte pilla på de mer än att de fungerade så som jag ville.

Har ni någon input? Använder ni alla MicrosoftIdentity? Om ni inte skulle göra det, hur hade ni lagt upp er logik?

Vet inte varför du citerade mig? Jag föreslog cookie vilket hade kunnat se ut så här:'