add JWT token authentication, working logout too

Author: mdamyanova

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example.csproj

@@ -34,6 +34,9 @@
     <None Remove="ClientApp\components\Error.tsx" />
     <None Remove="ClientApp\components\Example.tsx" />
     <None Remove="ClientApp\components\users\Logout.tsx" />
+    <None Remove="ClientApp\css\home.css" />
+    <None Remove="ClientApp\css\loading.css" />
+    <None Remove="ClientApp\utils\helpers.tsx" />
   </ItemGroup>
 
   <ItemGroup>
@@ -47,6 +50,9 @@
     <TypeScriptCompile Include="ClientApp\components\users\Login.tsx" />
     <TypeScriptCompile Include="ClientApp\components\users\Logout.tsx" />
     <TypeScriptCompile Include="ClientApp\components\users\Register.tsx" />
+    <TypeScriptCompile Include="ClientApp\css\home.css" />
+    <TypeScriptCompile Include="ClientApp\css\loading.css" />
+    <TypeScriptCompile Include="ClientApp\utils\helpers.tsx" />
   </ItemGroup>
 
   <ItemGroup>

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/About.tsx

@@ -2,6 +2,12 @@
 
 export class About extends React.Component<any, any> {
     public render() {
-        return <h3>This is our about page.</h3>
-    };
+        return (
+            <div className="about">
+                <h3>This is our about page.</h3>
+                <p>Ellipsis loading icon by loading.io</p>
+                <p>Baby cow image by neko-kuma.deviantart.com</p>
+            </div>
+        );
+    }
 }

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/Home.tsx

@@ -5,10 +5,10 @@ import { Grid, Row } from 'react-bootstrap';
 export class Home extends React.Component<RouteComponentProps<{}>, {}> {
     public render() {
         return (
-            <Grid>
+            <Grid className="home">
                 <Row className="text-center">
-                    <h2>Our Products</h2>
-                    <h4>This is an example of setting ASP.NET Core Web API and ReactJS with basic User Authentication. :)</h4>
+                    <h2>Hello!</h2>
+                    <h4>This is an example of setting up an ASP.NET Core Web API and ReactJS with basic User Authentication. :)</h4>
                 </Row>
             </Grid>
         );

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/NavMenu.tsx

@@ -1,9 +1,32 @@
 import * as React from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import { Navbar, NavItem, Nav } from 'react-bootstrap';
+import { isLoggedIn, getUser, removeAccessToken } from '../utils/helpers';
+
+export class NavMenu extends React.Component<{}, {}> {
+    constructor() {
+        super();
+
+        this.logout = this.logout.bind(this);
+    }
+
+    logout() {
+        removeAccessToken();
+        window.location.hash = '/';
+    }
 
-export class NavMenu extends React.Component<{}, {}> {     
     render() {
+        let content = isLoggedIn()
+            ?
+            <Nav pullRight>
+                {/*TODO: getUser can go to user profile page :)*/}
+                <NavItem eventKey={1}>{`${getUser()}`}</NavItem>
+                <NavItem eventKey={2} onClick={this.logout}>Logout</NavItem>
+            </Nav>
+            : <Nav pullRight>
+                <NavItem eventKey={1} href="/login">Login</NavItem>
+                <NavItem eventKey={2} href="/register">Register</NavItem>
+            </Nav>
         return (
             <Navbar inverse collapseOnSelect fixedTop>
                 <Navbar.Header>
@@ -17,10 +40,7 @@ export class NavMenu extends React.Component<{}, {}> {
                         <NavItem eventKey={1} href="/users">Users</NavItem>
                         <NavItem eventKey={2} href="/about">About</NavItem>
                     </Nav>
-                    <Nav pullRight>
-                        <NavItem eventKey={1} href="/login">Login</NavItem>
-                        <NavItem eventKey={2} href="/register">Register</NavItem>
-                    </Nav>;
+                    { content }
             </Navbar.Collapse>
             </Navbar>
         );

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/users/Login.tsx

@@ -1,14 +1,17 @@
 import * as React from "react";
+import { Redirect } from "react-router-dom";
 import 'isomorphic-fetch';
 import { Form, FormGroup, FormControl, ControlLabel, Button, Col, Grid, Row } from 'react-bootstrap';
+import { setAccessToken, setUser, isLoggedIn } from '../../utils/helpers';
 
 export class Login extends React.Component<any, any> {
     constructor() {
         super();
 
         this.state = {
             userName: '',
-            password: ''
+            password: '',
+            loggedIn: isLoggedIn()
         };
 
         this.handleOnChange = this.handleOnChange.bind(this);
@@ -50,6 +53,9 @@ export class Login extends React.Component<any, any> {
     // since it hasn't clue yet; redirect to pages depending of response's status code
     checkStatus(res: any): void {
         if (res.status >= 200 && res.status < 300) {
+            setAccessToken(res.access_token);
+            setUser(this.state.userName);
+            this.setState({ loggedIn: true });
             this.props.history.push('/example');
         } else {
             let error = new Error(res.statusTest);
@@ -59,6 +65,10 @@ export class Login extends React.Component<any, any> {
     }
 
     render() {
+        if (this.state.loggedIn) {
+            return <Redirect to="/" />;
+        }
+
         return (
             <Grid>
                 <Row className="show-grid">

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/main.css

@@ -1,3 +1,5 @@
 /*Import our styles and reference it to the boot.tsx for cleaner code*/
 @import 'site.css';
-@import 'error.css';
+@import 'error.css';
+@import 'loading.css';
+@import 'home.css';

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Controllers/UsersController.cs

@@ -3,37 +3,45 @@ namespace ASPNETCoreReactJS_Example.Controllers
     using Data.Models;
     using Microsoft.AspNetCore.Identity;
     using Microsoft.AspNetCore.Mvc;
-    using Microsoft.Extensions.Logging;
+    using Microsoft.Extensions.Configuration;
+    using Microsoft.IdentityModel.Tokens;
     using Models;
     using Services.Interfaces;
+    using System;
     using System.Collections.Generic;
+    using System.IdentityModel.Tokens.Jwt;
+    using System.Linq;
+    using System.Security.Claims;
+    using System.Text;
     using System.Threading.Tasks;
 
-    [Route("api/[controller]")]
+    [Route("api/[controller]/[action]")]
     public class UsersController : Controller
     {
         private readonly UserManager<User> userManager;
         private readonly SignInManager<User> signInManager;
+        private readonly IConfiguration configuration;
         private readonly IUserService service;
 
         public UsersController(
             UserManager<User> userManager,
             SignInManager<User> signInManager,
-            ILogger<UsersController> logger,
+            IConfiguration configuration,
             IUserService service)
         {
             this.userManager = userManager;
             this.signInManager = signInManager;
+            this.configuration = configuration;
             this.service = service;
         }
 
         // GET All Users
-        [HttpGet("[action]")]
+        [HttpGet]
         public IEnumerable<UserViewModel> All()
             => this.service.All();
 
         // POST Register User
-        [HttpPost("[action]")]
+        [HttpPost]
         public async Task<IActionResult> Register([FromBody]RegisterModel model)
         {
             if (!ModelState.IsValid)
@@ -58,11 +66,14 @@ public async Task<IActionResult> Register([FromBody]RegisterModel model)
 
             this.service.Add(user);
 
-            return this.Ok();
+            // Automatically sign in user ? 
+            //this.signInManager.SignInAsync(user, false);
+
+            return this.Ok(GenerateJwtToken(model.Email, user));
         }
 
         // POST Login User
-        [HttpPost("[action]")]
+        [HttpPost]
         public async Task<IActionResult> Login([FromBody]LoginModel model)
         {
             if (!ModelState.IsValid)
@@ -78,16 +89,41 @@ public async Task<IActionResult> Login([FromBody]LoginModel model)
                 return this.BadRequest();
             }
 
-            return this.Ok();
+            var appUser = this.userManager.Users.SingleOrDefault(u => u.UserName == model.UserName);
+            return this.Ok(GenerateJwtToken(model.UserName, appUser));
         }
 
         // POST Logout User
-        [HttpPost("[action]")]
+        [HttpPost]
         public async Task<IActionResult> Logout()
         {
             await this.signInManager.SignOutAsync();
 
             return this.Ok();
         }
+
+        private object GenerateJwtToken(string email, IdentityUser user)
+        {
+            var claims = new List<Claim>
+            {
+                new Claim(JwtRegisteredClaimNames.Sub, email),
+                new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
+                new Claim(ClaimTypes.NameIdentifier, user.Id)
+            };
+
+            var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(configuration["JwtKey"]));
+            var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
+            var expires = DateTime.Now.AddDays(Convert.ToDouble(configuration["JwtExpireDays"]));
+
+            var token = new JwtSecurityToken(
+                configuration["JwtIssuer"],
+                configuration["JwtIssuer"],
+                claims,
+                expires: expires,
+                signingCredentials: creds
+            );
+
+            return new JwtSecurityTokenHandler().WriteToken(token);
+        }
     }
 }

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Startup.cs

@@ -4,15 +4,20 @@ namespace ASPNETCoreReactJS_Example
     using Data;
     using Data.Models;
     using Extensions;
+    using Microsoft.AspNetCore.Authentication.JwtBearer;
     using Microsoft.AspNetCore.Builder;
     using Microsoft.AspNetCore.Hosting;
     using Microsoft.AspNetCore.Identity;
     using Microsoft.AspNetCore.SpaServices.Webpack;
     using Microsoft.EntityFrameworkCore;
     using Microsoft.Extensions.Configuration;
     using Microsoft.Extensions.DependencyInjection;
+    using Microsoft.IdentityModel.Tokens;
     using Services.Implementations;
     using Services.Interfaces;
+    using System;
+    using System.IdentityModel.Tokens.Jwt;
+    using System.Text;
 
     public class Startup
     {
@@ -39,9 +44,32 @@ public void ConfigureServices(IServiceCollection services)
             .AddEntityFrameworkStores<ExampleDbContext>()
             .AddDefaultTokenProviders();
 
+            // Add JWT Authentication
+            JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear();
+
             // Inject Application Services
             services.AddTransient<IUserService, UserService>();
 
+            services
+                .AddAuthentication(options =>
+                {
+                    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
+                    options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
+                    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
+                })
+                .AddJwtBearer(cfg =>
+                {
+                    cfg.RequireHttpsMetadata = false;
+                    cfg.SaveToken = true;
+                    cfg.TokenValidationParameters = new TokenValidationParameters
+                    {
+                        ValidIssuer = Configuration["JwtIssuer"],
+                        ValidAudience = Configuration["JwtIssuer"],
+                        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["JwtKey"])),
+                        ClockSkew = TimeSpan.Zero // remove delay of token when expire
+                    };
+                });
+
             // AutoMapper, of course
             services.AddAutoMapper();
 
@@ -72,6 +100,9 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
 
             app.UseStaticFiles();
 
+            // Use Authentication
+            app.UseAuthentication();
+
             app.UseMvc(routes =>
             {
                 routes.MapRoute(

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Views/Home/Index.cshtml

@@ -1,7 +1,7 @@
 @{
     ViewData["Title"] = "Home Page";
 }
-<div id="react-app">Loading...</div>
+<div id="react-app"><img class="loading" src="~/elipsis.svg" /></div>
 
 @section scripts {
     <script src="~/dist/main.js" asp-append-version="true"></script>

ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/appsettings.json

@@ -6,5 +6,8 @@
     "LogLevel": {
       "Default": "Warning"
     }
-  }
+  },
+  "JwtKey": "SOME_RANDOM_KEY_DO_NOT_SHARE",
+  "JwtIssuer": "https://127.0.0.1",
+  "JwtExpireDays": 30
 }