Autentificare și Autorizare în React + .NET Core: Identity + JWT + Protejarea rutelor
În acest articol, continuăm dezvoltarea aplicației de tip blog, concentrându-ne pe implementarea autentificării și autorizării. Vom folosi:
-
ASP.NET Core Identity pentru gestionarea utilizatorilor
-
JWT (JSON Web Tokens) pentru autentificare stateless
-
React Context + localStorage pentru păstrarea autentificării în frontend
-
Protejarea rutelor și apelurilor API în funcție de autentificare
🧩 De ce JWT? De ce stateless?
Autentificarea pe bază de JWT este stateless, ceea ce înseamnă că serverul nu trebuie să stocheze sesiuni. Tokenul semnat este suficient pentru a dovedi identitatea utilizatorului. Avantaje:
-
Scalabilitate crescută
-
Ideal pentru aplicații SPA (React, Angular)
-
Ușor de extins cu autorizare pe roluri/permisiuni
1️⃣ Identity + JWT în .NET Core
✅ Instalare pachete
Adăugăm în proiectul WebAPI:
dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore
dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer
✅ Configurare în Program.cs
builder.Services.AddIdentity<ApplicationUser, IdentityRole>()
.AddEntityFrameworkStores<AppDbContext>()
.AddDefaultTokenProviders();
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options =>
{
options.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuer = true,
ValidateAudience = true,
ValidateLifetime = true,
ValidateIssuerSigningKey = true,
ValidIssuer = "ludo.blog",
ValidAudience = "ludo.blog",
IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("your_secret_key_123456"))
};
});
🔐 Asigură-te că secretul JWT e salvat în appsettings.json sau în UserSecrets.
✅ Generarea tokenului
private string GenerateJwtToken(ApplicationUser user)
{
var claims = new[]
{
new Claim(JwtRegisteredClaimNames.Sub, user.Email),
new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
new Claim(ClaimTypes.NameIdentifier, user.Id)
};
var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_jwtConfig.Secret));
var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
var token = new JwtSecurityToken(
issuer: _jwtConfig.Issuer,
audience: _jwtConfig.Audience,
claims: claims,
expires: DateTime.Now.AddHours(2),
signingCredentials: creds);
return new JwtSecurityTokenHandler().WriteToken(token);
}
2️⃣ Login în React + Păstrarea tokenului
✅ API call din React
const login = async (email: string, password: string) => {
try {
const res = await axios.post("/api/auth/login", { email, password });
localStorage.setItem("token", res.data.token);
setUser(jwtDecode(res.data.token)); // decode token & extract user info
} catch (err) {
setError("Login failed!");
}
};
✅ AuthContext
export const AuthContext = createContext<AuthState>(null);
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
const token = localStorage.getItem("token");
if (token) setUser(jwtDecode(token));
}, []);
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
};
3️⃣ Protejarea rutelor în React
✅ PrivateRoute
const PrivateRoute = ({ children }) => {
const { user } = useAuth();
return user ? children : <Navigate to="/login" />;
};
✅ Utilizare în App.tsx
<Routes>
<Route path="/posts" element={<PrivateRoute><UserPosts /></PrivateRoute>} />
<Route path="/login" element={<LoginPage />} />
</Routes>
4️⃣ Afișarea articolelor personale
✅ Backend: Endpoint securizat
[Authorize]
[HttpGet("me")]
public async Task<IActionResult> GetMyPosts()
{
var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
var posts = await _postService.GetPostsByUser(userId);
return Ok(posts);
}
✅ Frontend: Apel cu token
const token = localStorage.getItem("token");
const res = await axios.get("/api/posts/me", {
headers: { Authorization: `Bearer ${token}` }
});
✅ Concluzie
Am implementat un flow complet de autentificare și autorizare pentru aplicația noastră blog. Tokenul JWT permite o comunicare sigură între frontend și backend, iar React poate gestiona sesiunea folosind Context API și localStorage. În următoarele articole vom extinde acest sistem cu înregistrare, refresh tokens, autorizare pe roluri și UI personalizat pentru useri logați.