How to Implement Authentication in React with .NET Core Backend?

In contemporary web projects with React on the front end and ASP.NET Core on the back end, authentication is a basic necessity. Only authorized users are able to access protected APIs and application resources thanks to a secure authentication system. Because JSON Web Token (JWT) based authentication is stateless, scalable, and appropriate for distributed systems, it is frequently employed in enterprise-grade applications.

This article describes how to use secure API endpoints, role-based authorization, and JWT tokens to build authentication in a React application with a.NET Core backend.

Architecture Overview

In a typical React and ASP.NET Core authentication flow:

The user submits login credentials from the React frontend.
The ASP.NET Core Web API validates credentials.
If valid, the backend generates a JWT token.
The React app securely stores the token.
The token is sent in the Authorization header for protected API requests.
The backend validates the token before granting access.

This stateless authentication approach improves scalability and works well for cloud-native and microservices-based systems.

Step 1: Configure Authentication in ASP.NET Core Backend

Install required NuGet packages:

Microsoft.AspNetCore.Authentication.JwtBearer
Microsoft.IdentityModel.Tokens

Configure JWT authentication in Program.cs:

builder.Services.AddAuthentication("Bearer")
    .AddJwtBearer("Bearer", options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = builder.Configuration["Jwt:Issuer"],
            ValidAudience = builder.Configuration["Jwt:Audience"],
            IssuerSigningKey = new SymmetricSecurityKey(
                Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Key"]))
        };
    });

builder.Services.AddAuthorization();

Add middleware:

app.UseAuthentication();
app.UseAuthorization();

Step 2: Generate JWT Token After Login

Create a login endpoint in your controller:

[HttpPost("login")]
public IActionResult Login(LoginModel model)
{
    if (model.Username == "admin" && model.Password == "password")
    {
        var claims = new[]
        {
            new Claim(ClaimTypes.Name, model.Username),
            new Claim(ClaimTypes.Role, "Admin")
        };

        var key = new SymmetricSecurityKey(
            Encoding.UTF8.GetBytes(_configuration["Jwt:Key"]));

        var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);

        var token = new JwtSecurityToken(
            issuer: _configuration["Jwt:Issuer"],
            audience: _configuration["Jwt:Audience"],
            claims: claims,
            expires: DateTime.Now.AddMinutes(60),
            signingCredentials: creds);

        return Ok(new
        {
            token = new JwtSecurityTokenHandler().WriteToken(token)
        });
    }

    return Unauthorized();
}

Step 3: Protect API Endpoints

Use the Authorize attribute to secure endpoints:

[Authorize]
[HttpGet("secure-data")]
public IActionResult GetSecureData()
{
    return Ok("This is protected data");
}

For role-based authorization:

[Authorize(Roles = "Admin")]

Step 4: Implement Login in React Frontend

Install axios for API communication:

npm install axios

Create login function:

import axios from "axios";

const login = async (username, password) => {
  const response = await axios.post("https://localhost:5001/api/auth/login", {
    username,
    password
  });

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

Step 5: Send Token in API Requests

Attach JWT token to request headers:

const token = localStorage.getItem("token");

axios.get("https://localhost:5001/api/auth/secure-data", {
  headers: {
    Authorization: `Bearer ${token}`
  }
});

This allows the ASP.NET Core backend to validate the request.

Step 6: Create Protected Routes in React

Example of a simple protected route component:

import { Navigate } from "react-router-dom";

const PrivateRoute = ({ children }) => {
  const token = localStorage.getItem("token");
  return token ? children : <Navigate to="/login" />;
};

Use it in routing:

<Route path="/dashboard" element={
  <PrivateRoute>
    <Dashboard />
  </PrivateRoute>
} />

Security Best Practices

Store JWT securely (consider HTTP-only cookies in production)
Use HTTPS for all API communication
Set reasonable token expiration time
Implement refresh tokens for long sessions
Validate user roles and claims on backend
Avoid storing sensitive information in JWT payload

Common Authentication Mistakes to Avoid

Not validating token lifetime
Storing tokens insecurely
Exposing secret keys in frontend
Not implementing proper CORS configuration
Skipping server-side authorization checks

Proper implementation of authentication ensures application security, protects sensitive APIs, and enables scalable user management in React and ASP.NET Core applications.

Summary

Implementing authentication in a React application with a .NET Core backend typically involves configuring JWT-based authentication in ASP.NET Core, generating secure tokens after validating user credentials, protecting API endpoints with authorization attributes, and sending the token from the React frontend in the Authorization header for protected requests. By following secure coding practices such as using HTTPS, validating claims, implementing role-based authorization, and handling token storage carefully, developers can build scalable, secure, and production-ready full-stack applications using React and ASP.NET Core.

Best ASP.NET Core 10.0 Hosting Recommendation

One of the most important things when choosing a good ASP.NET Core 8.0.11 hosting is the feature and reliability. HostForLIFE is the leading provider of Windows hosting and affordable ASP.NET Core, their servers are optimized for PHP web applications. The performance and the uptime of the hosting service are excellent and the features of the web hosting plan are even greater than what many hosting providers ask you to pay for.

At HostForLIFE.eu, customers can also experience fast ASP.NET Core hosting. The company invested a lot of money to ensure the best and fastest performance of the datacenters, servers, network and other facilities. Its datacenters are equipped with the top equipments like cooling system, fire detection, high speed Internet connection, and so on. That is why HostForLIFEASP.NET guarantees 99.9% uptime for ASP.NET Core. And the engineers do regular maintenance and monitoring works to assure its Orchard hosting are security and always up.