Securing Blazor Client-side Applications GETTING STARTED WITH AUTHENTICATION IN BLAZOR WEBASSEMBLY Kevin Dockx ARCHITECT @KevinDockx https://www.kevindockx.com This bullet list with animations Course prerequisites and tooling Coming Up Blazor authentication scenarios Blazor WASM hosting modes Securing the client application - Logging in and out - Creating users - Protecting the API This slide is with animations Discussion tab on the course page Twitter: @KevinDockx (course shown is one of my other courses, not this one) Course Prerequisites Good knowledge of C# Knowledge of Blazor WASM Course tip: Blazor: Getting Started (Gill Cleeren) Frameworks and Tooling Visual Studio 2019 .NET Core 3.1 v16.4 or better Frameworks and Tooling Visual Studio 2019 Visual Studio Visual Studio for JetBrains Rider v16.4 or better Code Mac This slide is with animations Exercise files tab on the course page (course shown is one of my other courses, not this one) Blazor Authentication Scenarios Blazor WASM (WebAssembly) Blazor Server Blazor WASM Compiled .NET Core assemblies & runtime downloaded to browser WebAssembly bootstraps & configures runtime JavaScript interop to handle (image by Microsoft, https://bit.ly/2NKq1U8) DOM manipulation & API Calls Blazor Server Razor components hosted on the server in an ASP.NET Core application UI updates handled over SignalR connection (also used for JavaScript interop calls) Runtime handles sending UI events from browser to server (image by Microsoft, https://bit.ly/2NKq1U8) and applies UI updates sent by server to client Blazor WASM Runs on the client thus cannot be trusted Any authorization check can be bypassed Focus is on securing the API Blazor Server Runs on the server thus can be trusted Authorization checks can be enforced, access rules can be implemented Securing the API is still a focus point This bullet list with animations Demo Introducing the demo application Security Scenarios for a Blazor WASM Application Token-based security with OAuth2 SameSite cookies and OpenID Connect This slide is with animations The WASM team settled on tokens Security - No CSRF protection required for server endpoints Scenarios for - Tokens have narrower permissions a Blazor - Tokens tend to have shorter lifetimes WASM and can potentially be revoked - The same authentication and Application authorization principles can be used for hosted and standalone applications WASM Hosting Modes Hosted WASM approach Standalone approach WASM hosted on ASP.NET Core backend WASM hosted on a regular HTML page Backend (API) can be built in whichever technology you choose, and can be hosted anywhere WASM Hosting Modes Hosted Standalone Could in theory be secured with Cannot be secured with SameSite SameSite cookies cookies Can be secured with token-based Can be secured with token-based security security WASM Hosting Modes Identity provider User management Generates tokens Custom or based on ASP.NET Core Identity Implements OAuth2/OIDC protocols WASM Hosting Modes Hosted Standalone Could in theory be secured with Cannot be secured with SameSite SameSite cookies cookies Can be secured with token-based Can be secured with token-based security security Identity provider and ASP.NET Core Identity provider is a separate Identity are integrated in the backend component which optionally is that hosts the WASM app integrated with ASP.NET Core Identity Useful when you need a self-contained Useful when you have multiple solution applications that deal with the same set of users This bullet list with animations Demo Inspecting the default authentication template This slide is with animations OAuth2 and If you’re completely new to OAuth2/OIDC - Securing ASP.NET Core 3 with OAuth2 OpenID and OpenID Connect (yours truly) Connect in We’re focusing on specifics related to Blazor WASM Blazor WASM applications This slide is with animations The identity provider (IDP) will be OAuth2 and responsible for providing OpenID - Proof of authentication - Proof of authorization Connect in Blazor WASM to the Blazor application Users will prove who they are at IDP level To ke n -based Authentication with Blazor Identity token Access token Represents proof of identity Represents consent Used at client level Passed from the client to the API, used at API level Common Token Concerns Expiration Token signing and Token format validation Authentication and Securely delivering … authorization tokens to different application types OAuth2 OAuth2 is an open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications This slide is with animations OAuth2 for OAuth2 defines how our Blazor application can securely achieve authorization Blazor To that avail, our Blazor application can Applications request an access token This slide is with animations Not all applications are created equal OAuth2 for - For example: not all application types can safely store secrets Blazor OAuth2 defines how different types of Applications applications can securely get such a token from the IDP through different flows OpenID Connect OpenID Connect is a simple identity layer on top of the OAuth2 protocol This slide is with animations A client application can request an identity OpenID token (next to an access token) Connect for That identity token is used to extract user Blazor information from (client-side apps) or sign in to the client application (server-side Applications apps) This slide is with animations IdentityServer4 - http://docs.identityserver.io/ IdentityServer4 is an OpenID Connect and OAuth2 framework for ASP.NET Core - Part of the .NET Foundation This bullet list with animations Demo Integrating IdentityServer This slide is with animations Identity providers need to authenticate User users Management - Requires access to a user DB (or another with ASP.NET way of achieving the same) Core Identity Most systems require some form of user management ASP.NET Core Identity A membership system that support user interface login functionality This bullet list with animations Demo Integrating ASP.NET Core Identity This slide is with animations Configuring We need to configure the client application and Integrating at level of the identity provider the Client We need to implement part of the flow at Application level of the client application OpenID Connect Flow A set of requests and corresponding responses that eventually result in an identity and/or access token that is or are safely delivered to the client application This slide is with animations The flow to use can depend on multiple factors, including the type of client (eg: Configuring where it lives) and Integrating Best practice the Client - https://bit.ly/3fpEm3P Application - At the moment of recording, for Blazor WASM apps: code flow with PKCE protection, without client authentication Code Flow with PKCE Protection Client application IDP (relying party) create code_verifier hash (SHA256) code_challenge authentication request + code_challenge authorization endpoint store code_challenge user authenticates (user gives consent) code code token request (code, code_verifier) token endpoint Code Flow with PKCE Protection Client application IDP (relying party) token request (code, code_verifier) token endpoint hash code_verifier check if it matches the stored code_challenge id_token id_token token is validated This bullet list with animations Demo Configuring and integrating the client application This slide is with animations Protecting the The API should expect a valid access token to be passed through, by the client, on API each request to it Code Flow with PKCE Protection Client application IDP (relying party) create code_verifier hash (SHA256) code_challenge authentication request + code_challenge authorization endpoint store code_challenge user authenticates (user gives consent) code code token request (code, code_verifier) token endpoint Code Flow with PKCE Protection Client application IDP (relying party) token request (code, code_verifier) token endpoint hash code_verifier check if it matches the stored code_challenge id_token, access token id_token, access token token is validated access_token (as Bearer token in Authorization header) Code Flow with PKCE Protection IDP API token request (code, code_verifier) token endpoint hash code_verifier check if it matches the stored code_challenge id_token, access token (as Bearer token in Authorization header) access token is validated This bullet list with animations Demo Protecting the API This bullet list with animations Summary In regards to security, code that lives on the client cannot be blocked from executing (contrary to code that lives on the server) The hosting mode impacts how you’d secure your application This bullet list with animations Summary Hosted mode - WASM hosted on ASP.NET Core backend - IDP and ASP.NET Core Identity integrated in the backend - Useful if you need a self-contained solution This bullet list with animations Standalone mode Summary - WASM hosted on an HTML page - Identity provider is a separate component which optionally is integrated with ASP.NET Core Identity - Useful when you have multiple applications that deal with the same set of users This bullet list with animations Summary Token-based security with OAuth2 and OpenID Connect is the way to go.