Entra External ID & Angular: Build Your First Secure Login (Hands-On Guide)

🚀 Ready to build secure logins with Microsoft Entra External ID and Angular?

In this highly anticipated Part 2 of our Microsoft Entra External ID series, we're putting theory into practice! If you watched Part 1 and learned about the future of CIAM, now it's time to get hands-on.

This video is your complete, step-by-step guide to setting up your first secure customer login experience using Microsoft Entra External ID with an Angular application. We'll cover everything you need to know from the ground up:

Create Your External ID Tenant: Walk through the process of setting up your new dedicated tenant in the Microsoft Entra admin center (entra.microsoft.com).
Register Your Angular App: Learn how to correctly register your single-page application (SPA) in Entra External ID for secure communication.
Configure User Flows: Understand what user flows are, why they're crucial for sign-up/sign-in experiences, and how to associate them with your Angular app registration.
Angular App Setup & Integration: We'll dive into a simple Angular sample application, configuring MSAL (Microsoft Authentication Library) to interact with your new Entra External ID tenant.
Live Demo: Sign Up, Sign In, Sign Out: See the entire flow in action – from a brand new user signing up, to an existing user logging in, and finally, managing sessions with sign-out.
Inspect Tokens & Claims: Learn how to access and understand the ID tokens and claims received by your Angular app, giving you the user data you need.
This hands-on guide is perfect for Angular developers looking to implement robust and modern authentication for their customer-facing applications.

Missed Part 1? Watch it here:
▶️ [https://youtu.be/s8eF6BIUuGc?si=cb9HZ0MA6zXPaCEk]

Video Chapters:
0:00 - Intro & What We're Building
00:48 - Quick recap from Part 1, hook for Part 2, and overview of today's hands-on agenda.
00:01:49 - Creating Your Entra External ID Tenant
Demonstration of navigating to entra.microsoft.com and creating the "External" tenant.
04:29 - User Flow creation
5:00 - Understanding & Creating User Flows
Explanation of what user flows are, why they're needed, and the process of creating a "Sign up and sign in" user flow.
09:03 - Registering Your Angular Application
Step-by-step guide to registering a new SPA in the Entra admin center, configuring redirect URIs, etc.
13:50 - Linking User Flows to App Registration
How the user flow is implicitly used by the application through the authority URL.
23:22 - Setting Up the Angular Sample App
Walkthrough of the Angular project setup, installing MSAL, and configuring the app.module.ts (client ID, authority/user flow URL).
26:31:12 - Live Demo: Sign Up Experience
Running the Angular app, demonstrating a new user signing up through the user flow.
#EntraExternalID #Angular #Authentication #CIAM #MicrosoftEntra #AzureAD #LoginTutorial #SecureApp #FrontendDev #IdentityManagement #AngularAuthentication #HandsOnGuide #DevelopersPlease

Post your questions in the comment section, and I will happily answer them.

Subscribe for more useful videos just like this: https://www.youtube.com/channel/UCKUxSY2xp12QiP3c60sOc-g?sub_confirmation=1

Happy coding!

Видео Entra External ID & Angular: Build Your First Secure Login (Hands-On Guide) канала Learn Smart Coding