The document outlines a presentation by Joonas Westlin on securing modern web applications using Entra ID, OpenID Connect, and OAuth 2. It includes a series of demos covering app configuration, token types, and front-end and back-end integration, as well as important considerations regarding permissions and security. Additional resources and sample applications are provided to assist in implementation.

1. Securing a modern Web application
with Entra ID

2. Speaker intro
• Joonas Westlin
• Developer / Architect @ Zure
• Worked with Azure for 9 years
• All time #1 for AAD / Entra ID
answers on Stack Overflow
joonasw.net

3. Agenda
• Entra ID, OpenID Connect, and OAuth 2
• Demo: Walkthrough of OpenID Connect and OAuth 2
• Recap of first demo
• Demo: Configuring the app in Entra ID
• Demo: API back-end and Microsoft.Identity.Web
• Demo: Front-end and MSAL.js
• Q&A

4. Entra ID, OpenID
Connect, and
OAuth 2

5. Entra ID
• Previously Azure Active Directory (AAD)
• Identity and access management
• Users
• Applications
• Devices
• Permissions
• Used by Microsoft 365, Azure, …
• Entra External ID tenants and Azure AD B2C are a bit
different, but use the same protocols

6. What is a tenant?
• Organization
• Collection of users, apps and devices
• If you “create an Entra ID”, you are creating a tenant
• Identified by domains
• something.onmicrosoft.com by default

7. OpenID Connect and OAuth 2
• Standards for authentication (OIDC) and authorization
(OAuth)
• OAuth is about getting access to protected resources
• OIDC builds on top of OAuth 2 and focuses on
identifying the user
• If you are having difficulties sleeping (or like auth stuff):
https://openid.net/specs/openid-connect-core-1_0.html /
https://datatracker.ietf.org/doc/html/rfc6749

8. Token types
• ID token
• Identifies the user
• From OIDC
• Intended for client application
• Access token
• Used to call an API
• From OAuth
• Intended for an API (one, not many)
• Refresh token
• Used to get new tokens

9. Demo: Walkthrough
of OpenID Connect
and OAuth 2

10. Recap

11. Front-end authentication

12. Token validation

13. On-behalf-of flow

14. Demo:
Configuring the
app in Entra ID

15. Important parts of app configuration
• Tenant ID (or “common” / “organizations” / “consumers”)
• Client ID
• Client secret / certificate (if needed)
• Platforms and redirect URIs
• Exposed API permissions
• Required API permissions

16. Demo: API back-end
and
Microsoft.Identity.We
b

17. Important parts of back-end configuration
• Add Microsoft.Identity.Web Nuget package and add its
configuration in Program.cs / Startup.cs
• Instance, Tenant ID, client ID in app settings
• Client secret / certificate will need secure storage
• Require authentication for all requests
• Some level of additional authorization for all requests (see
next slide)

18. Note on permissions
• Please make sure you validate that all tokens either:
• Contain a valid delegated / application permission
• Or are from an application you trust
• In case of delegated permissions, also verify user access (if
applicable)
• It is possible to acquire an access token to any application in the
tenant without permission assignment
• These tokens won’t contain permissions (obviously), but will fly
straight through checks that only check for valid token from the
tenant
• Microsoft.Identity.Web checks by default

19. Demo: Front-end
and MSAL.js

20. Important parts of front-end configuration
• Add @azure/msal-<react> or @azure/msal-browser
• MSAL.js configuration
• Authority, Client ID, Scopes
• Consider using BFF pattern instead of storing tokens in
the browser
• Pros: Protects tokens from malicious JS / browser extensions,
authentication with Entra ID is entirely in back-end
• Cons: Increased complexity as you may need another back-
end, need to protect against CSRF; malicious extensions etc.
can still run actions as user

21. Links
• Slides: https://westl.in/entraid
• Entra ID code samples:
https://learn.microsoft.com/en-us/entra/identity-platform/sample
-v2-code
• Entra ID protocol reference:
https://learn.microsoft.com/en-us/entra/identity-platform/v2-oau
th2-auth-code-flow
• BFF pattern:
https://auth0.com/blog/the-backend-for-frontend-pattern-bff/
• Sample app:
https://github.com/juunas11/Joonasw.EntraIdAuthenticationSamp
le

22. Q&A