#218 - Integrate signalR connection into client-side authentication.

src/Money.UI.Blazor/Components/Bootstrap/Modal.cshtml.cs

@@ -129,7 +129,7 @@ protected override void OnAfterRender()
             Native.AddModal(Id, this);
 
             if (isVisibleChanged)
-                JSRuntime.Current.InvokeAsync<object>("Bootstrap.Modal.Toggle", Id, isVisible);
+                Native.ToggleModal(Id, isVisible);
         }
 
         public void Dispose()

src/Money.UI.Blazor/Components/Bootstrap/Native.cs

@@ -19,6 +19,9 @@ internal static void AddModal(string id, ModalBase component)
             JSRuntime.Current.InvokeAsync<object>("Bootstrap.Modal.Register", id);
         }
 
+        internal static void ToggleModal(string id, bool isVisible) 
+            => JSRuntime.Current.InvokeAsync<object>("Bootstrap.Modal.Toggle", id, isVisible);
+
         internal static void RemoveModal(string id)
             => modals.Remove(id);
 

src/Money.UI.Blazor/Interop.cs

@@ -0,0 +1,24 @@
+using Microsoft.JSInterop;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Money
+{
+    internal class Interop
+    {
+        public static void ApplicationStarted() 
+            => JSRuntime.Current.InvokeAsync<object>("Money.ApplicationStarted");
+
+        public static void NavigateTo(string url)
+            => JSRuntime.Current.InvokeAsync<bool>("Money.NavigateTo", url);
+
+        public static void StartSignalR(string url, string token)
+            => JSRuntime.Current.InvokeAsync<bool>("Money.StartSignalR", url, token);
+
+        public static void StopSignalR()
+            => JSRuntime.Current.InvokeAsync<bool>("Money.StopSignalR");
+    }
+}

src/Money.UI.Blazor/Services/ApiClient.cs

@@ -16,6 +16,7 @@ namespace Money.Services
 {
     public class ApiClient
     {
+        private const string rootUrl = "http://localhost:63803";
         private static string token;
 
         private readonly HttpClient http;
@@ -33,7 +34,7 @@ public ApiClient(HttpClient http, CommandMapper commandMapper, QueryMapper query
             this.commandMapper = commandMapper;
             this.queryMapper = queryMapper;
             this.exceptionHandler = exceptionHandler;
-            http.BaseAddress = new Uri("http://localhost:63803");
+            http.BaseAddress = new Uri(rootUrl);
 
             EnsureAuthorization();
         }
@@ -42,12 +43,16 @@ private void ClearAuthorization()
         {
             token = null;
             http.DefaultRequestHeaders.Authorization = null;
+            Interop.StopSignalR();
         }
 
         private void EnsureAuthorization()
         {
-            if (token != null)
+            if (token != null && http.DefaultRequestHeaders.Authorization?.Parameter != token)
+            {
                 http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
+                Interop.StartSignalR(rootUrl + "/api", token);
+            }
         }
 
         public async Task<bool> LoginAsync(string userName, string password, bool isPermanent)

src/Money.UI.Blazor/Services/Navigator.cs

@@ -34,7 +34,7 @@ private void OnLocationChanged(object sender, string e)
             => LocationChanged?.Invoke(e);
 
         private void OpenExternal(string url)
-            => JSRuntime.Current.InvokeAsync<bool>("Money.NavigateTo", url);
+            => Interop.NavigateTo(url);
 
         public void OpenSummary()
             => uri.NavigateTo(UrlSummary());

src/Money.UI.Blazor/Startup.cs

@@ -33,7 +33,7 @@ public void Configure(IBlazorApplicationBuilder app)
         {
             app.AddComponent<App>("app");
 
-            JSRuntime.Current.InvokeAsync<object>("Money.ApplicationStarted");
+            Interop.ApplicationStarted();
         }
     }
 }

src/Money.UI.Blazor/wwwroot/js/site.js

@@ -23,41 +23,55 @@ window.Bootstrap = {
     }
 };
 
-window.Money = {
-    ApplicationStarted: function () {
-        isLoaded = true;
-    },
-    NavigateTo: function (href) {
-        window.location.href = href;
-        return true;
-    }
-};
+var connection = null;
+function StartSignalR(url, token) {
+    StopSignalR();
+
+    var connection = new signalR.HubConnectionBuilder()
+        .withUrl(url, { accessTokenFactory: function () { return token; } })
+        .build();
 
-var connection = new signalR.HubConnectionBuilder()
-    .withUrl("http://localhost:63803/api", { accessTokenFactory: function () { return "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiZGVtbyIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWVpZGVudGlmaWVyIjoiMjhmNGQxNzYtNjg5ZS00ZDRkLTlhMzgtYTg3MGQ5NzFhZDc5IiwiZXhwIjoxNTUyNzI2NDU2LCJpc3MiOiJodHRwczovL2xvY2FsaG9zdCIsImF1ZCI6Imh0dHBzOi8vbG9jYWxob3N0In0.4tSJlngLynld3Ul_HuicpO4zUERjYZ4FFjTrJxfE8Po" }})
-    .build();
+    connection.on("RaiseEvent", function (e) {
+        console.log("JS: Event: " + e);
 
-connection.on("RaiseEvent", function (e) {
-    console.log("JS: Event: " + e);
+        DotNet.invokeMethodAsync("Money.UI.Blazor", "RaiseEvent", e);
+    });
 
-    DotNet.invokeMethodAsync("Money.UI.Blazor", "RaiseEvent", e);
-});
+    connection.on("RaiseException", function (e) {
+        console.log("JS: Exception: " + e);
 
-connection.on("RaiseException", function (e) {
-    console.log("JS: Exception: " + e);
+        DotNet.invokeMethodAsync("Money.UI.Blazor", "RaiseException", e);
+    });
 
-    DotNet.invokeMethodAsync("Money.UI.Blazor", "RaiseException", e);
-});
+    connection.onclose(function () {
+        if (window.location.hostname != "localhost") {
+            alert('Underlaying connection to the server has closed. Reloading the page...');
+        }
+
+        //setTimeout(function () {
+        //    window.location.reload();
+        //}, 2000);
+    });
+    connection.start().then(function () {
+        isStarted = true;
+    });
+}
 
-connection.onclose(function () {
-    if (window.location.hostname != "localhost") {
-        alert('Underlaying connection to the server has closed. Reloading the page...');
+function StopSignalR() {
+    if (connection != null) {
+        connection.stop();
+        connection = null;
     }
+}
 
-    //setTimeout(function () {
-    //    window.location.reload();
-    //}, 2000);
-});
-connection.start().then(function () {
-    isStarted = true;
-});
+window.Money = {
+    ApplicationStarted: function () {
+        isLoaded = true;
+    },
+    NavigateTo: function (href) {
+        window.location.href = href;
+        return true;
+    },
+    StartSignalR: StartSignalR,
+    StopSignalR: StopSignalR
+};