Microsoft 365 Community Identity platform, 25 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using MSAL.js to integrate React Single-page applications with Azure Active Directory – July 2022

Description

This month’s in-depth topic: Deep dive on using MSAL.js to integrate React Single-page applications with Azure Active Directory. Integrate a React single-page app with the Microsoft identity platform. Enable SSO and get an access token for Microsoft Graph API. Step through code for subscribing to MSAL events, protecting routes using MSAL React templates, and acquiring tokens with MSAL React hooks. Finally, how apps can prepare themselves for Continuous Access Evaluation (CAE) events and deploying app on Azure Static Web Apps service. Microsoft Presenters are Doğan Erişen, Salman Salem and Kalyan Krishna. Recorded July 21, 2022

Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/m365/blog
• Download the recurrent invite for this call | https://aka.ms/IDDevCommunityCalendar
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Hey welcome all thank you for joining the call. uh Today we have it says uh kalyan and his team dogan and salman who will be uh talking about m cell js and, like you know, applique web applications. You know using msl js react single page application, integrating with azure id and a lot of things that they have planned to do. As always. It's a very interesting call feel free to chime in to ask your questions.

A

The recording of the call will be available on our youtube channel, we'll be sharing the link on the chat window, and we have a lot of exciting calls lined up every third thursday of the month, so feel free to join in and enjoy the show thanks a lot. What do you collab.

B

Thank you nandish, good morning, everybody, my.

C

B

Is kalyan krishna, I'm a product manager in the identity division focused on developer experiences, especially around our identity, sdks and microsoft. Graph, I'm here with my team members, dwan and salman and together we would be doing this session where we would be basically walking developers who use the react framework on how to use our msol react to integrate their javascript applications with the microsoft identity platform. That's azure active directory for some of you and make calls to microsoft graph.

B

Now these uh the topics that we'll cover are essentially the most basic bare bones that a developer needs to do to get their javascript react applications working integrate with azure id in the right right format, and we think this will be a valuable session or recap session for those folks who are already familiar with the platform. So what I will do next is, I will hand over the control to uh one and uh the one. Would you like to introduce yourself and sell them.

C

Thanks kellyanne, so hey everyone, I'm dawn, I'm an engineer with the identity, developer, guidance team and I help folks to integrate their javascript applications with the microsoft finance platform.

D

Hi everyone, my name, is salman salem, I'm also a developer in the identity, guidance team.

C

So today's agenda is that what we would like to talk about is first, we would like to have a brief look at amsa, js and amsabiak in particular, and then we're going to discuss how to use amsa react in a react single page application. So this is mostly going to be a live coding. Together, uh we're going to look into enabling single sign-on for our application.

C

Then we will try to acquire an access token for microsoft graph and we will call microsoft graph after that. We'll have some time to discuss continuous access, evaluation events and how to handle those in your javascript application, and we will cap the session with deploying our app to azure static web apps.

C

Then, hopefully, we'll have some time to discuss next steps and any questions you might have.

C

So without further ado I'll start discussing the microsoft authentication library for javascript, it's essentially a collection of packages for javascript applications to enable them acquire access tokens for various kinds of apis. It has mainly two branches. We have amsoil node, which you could use in your server side and desktop applications or applications that are running on various kind of devices, and then we have msl browser which allows you to acquire tokens in your applications running in the browser.

C

So it has two wrapper libraries on top of it m cell angular and m salviac, targeting the angular and react frameworks respectively, and today we are going to focus on m salviac, so msalviac acquires tokens using the authorization code grant with the proof key for codexchange flow.

C

So this is a mechanism that prevents authorization code, replay attacks, it supports react, version, 16 and later and also react-based frameworks like next js, gatsby, jkl and etc.

C

It supports server-side rendering with some limitations and if you're, already familiar with msl browser. It has. It exposes the same public api, so you'll have access to the same classes and methods, but on top of that it adds templates, hooks and high order components that you can use in your reac application.

C

So how do you use amsavia in your applications?

C

Well, the happy path would be. You register an app on your azure id depending on your scenario. You go grab a code sample or two from aka.msad code samples and then you'll start coding.

C

So what we are going to do today is that I want this to be a live coding session, so I have a sample app here in this repository. You can go ahead and clone this repo or rather fork this repo. I would recommend and uh then clone it and follow me along as I go forward.

C

So just a couple of prerequisites: you're going to need node.js version 14 or later on installed on your system, you're also going to need an azure subscription to deploy our app to static web apps and, of course, you're going to need a github account to fork the repo so I'll, stop here and go to my code to look into how we can enable single sign-on.

C

So here's my application. This is the repo I've been mentioning a simple react application. At this moment it has no authentication functionality.

C

I've created this using the create react, app tool which I'm sure many of you are familiar, and it also has some libraries like viac router and material ui, for designing our ui elements. So I'm just going to install my dependencies.

C

Then start this app and just show you what we have there already.

C

So this is going to be running on for 3000 and there we have it. So it's a very simple app. I have a navigation bar here. I have some buttons for sign and sign out. They don't do anything yet.

C

I have a text here to identify the signed in user and then I show some text on my home page. Then I also have a profile page, which I'm hoping to eventually display the actual data from microsoft graph right now I just have some dummy data.

C

So let's go ahead and add authentication to this application. I'm going to keep my clones all open just in case.

C

Okay, so the first thing we need to do is that we need to install the necessary dependencies, so these are, let's save them as well.

C

And msul react.

C

So I'll go ahead and install them.

C

While this is happening, we can start coding here.

C

So the first thing I need to do is that I need to instantiate a public client application object from amstel browser, so I'll go. Do that.

C

I'll import the class first and then I create an instance here now. I need to supply some configuration options to this constructor in particular, I'm going to need a client id authority and the reader qri. So I don't have these yet and I'm going to talk about these configuration options more detail later on, but let's go ahead now and register an application with azure id so that we get these parameters.

C

So I'll go to my tenant.

C

I'll click on the azure active directory service, I'll, select, app registration and I'll create a new registration. Here, I'm going to call this msl react demo.

C

I want to sign in users only in my own tenant, so this is going to be a single tenant application and I also need a redirect uri of the type single page application. So this is important, not web single page application.

C

So let's go ahead and use our default cloud.

C

And we register this.

C

Perfect, so I have an application client id here and I have a tenant id here and if I go to my authentication blade, I can see that I configure the platform to be single page application with redirect uri 3000.

C

And I go to my api permissions blade.

C

And there I defined a permission for user read for microsoft graph, which is the user reads permission. This will allow me to access my profile information, or rather designed in users profile information on microsoft graph.

C

So that's all great I'll just copy these values I'll get this client id.

C

Go for that for authority I'll go back and look at my endpoints, so this is the endpoint that I want to authenticate against. Loginmicrosoftonline.Com signifies that I'm authenticating to the global azure instance, and this id is my tenant id. So I'm going to authenticate to my tenants.

C

Copy that and we'll also write here, the redirect uri, but I'm going to use a relative path so that it's easier to deploy our application. We don't have to come back and update this through direct uri later on, and that's pretty much all I need now. I need to pass this object to my application component as a prop I'll go ahead and do that I'll call this msop instance.

C

And I'm also, I also want to start this, keep it running. So, let's go to our app components.

C

This is a very simple component and I only have a couple of pages I serve here. So what I want to do here is that for every component that needs to access the authentication state, the m salvia context, I need to wrap all those components between the msul provider components so I'll import that from msi react.

C

Thank you. Co-Pilots.

C

I'll go ahead and do that.

C

Now, let's also define our prompt, thank you, and what I need to do now is that I need to pass this application instance to the msl provider.

C

Awesome now all of my components have access to the mslbia context. What I will do next is that, well, our application doesn't do anything. Yet, let's refresh this now, I want to add the sign-in functionality. So when I click on this, the app should sign in so one thing important to mention here.

C

If you realize I instantiate the public client application outside of my component tree. So this is important, because I don't want this to get reinstantiated. Every time react renders my pages.

C

And now let me go to the sign in button and add some functionality to this element, so there are many ways of doing this. What I'm going to do is that I'm going to use a hook provided by m cell react, which is called use amsoil.

C

Perfect now I can get access to the application instance. We created earlier.

C

And when we have access to this instance, I can access the apis. Msl provides, so I'm just going to go ahead and create a method here, and what I will do is that I will access this oops and I will use the let's just log in with direct, so this api will take. The browser will redirect the browser to azure id and there it will prompt the user to sign in with their username and password.

C

You can also pass a couple of options to this guy.

C

I want to add scopes: user read because I want users to consent to this permission when they first sign in so that we can get an access token for this later on and I'm gonna go ahead and add this to one click event.

C

There we go so I'll, go back to my application and I'm going to click on this sign in button. So if you already have an established session with azure id, let's say if you already signed in to your tenant somewhere else.

C

This should briefly take me to azure id sign-in page and since I already have an active session, I shouldn't need to re-enter my password. Now. I don't think I have an active session. Okay, unless you have multiple active sessions. In that case, you will see an account selection screen.

C

So I'm going to pick this test account. I have diego and I'll enter my password because I don't have a session active yet and then I see this consent screen.

C

It shows that sign and read your profile and maintain access data that you have given access to, because I am also going to get a refresh token later on. We will discuss these in more detail, so I'll accept- and I think I signed in- I don't know- because there is no indication on the ui, so we should definitely take care of this, but I know I've signed in because I can see my authentication artifacts in the session storage. Now I'm going to talk about what these things are in more detail later on.

C

So, first of all, I want to sort this ui a little bit. I want to have some indication that the user is signed in so let's go ahead and do that amcell react provides us with the necessary tools to do that. So, first of all, I want to render some of the elements conditionally.

C

If the user is signed in to do that, there are multiple ways. First, let's use a hook provided by m salviac called use is authenticated.

C

You don't need the full pads. Thank you.

C

And let's define a variable.

C

Thank you so now that I have this, I can conditionally render these guys.

C

And I also have this welcome name component. That shows welcome, so I'm going to do the same for this guy.

C

Nope, just this.

C

And if the user is not signed in just show nothing.

C

There we go so right now, since we are already signed in, we are only seeing the sign out button. I still have to work on this text and I want to also update these guys as well. So I'll go back to my home page.

C

I want to show this text if they are not authenticated already. So to do that, I could use the same hook or I could use a template provided by msl react. So this is called authenticated templates.

C

And we also have a unauthenticated template so I'll go ahead and use these guys.

C

Perfect copy this as well.

C

Okay- let's put this guy here.

C

C

C

So that's great now I go back to my application. Okay, I'm just showing this text now. I want to show the signed in user's email or username or some sort of identifier, so that we can know who are who is signed into this application.

C

So how can I do that I'll? Go to that relevant component welcome name and there I want to access the current active account that has signed into this application.

C

So the way I'm going to do this is that I need to use amsoil hook to get access to the application instance. We created I'll do that I'll also going to need some state variables.

C

So let's do that as well.

C

You state for the moment we can leave them blank. I need to import these guys too.

C

Use state- and I'm also going to use use effect from react. There we go. Let's do use the user effect so that when this component mounts you want to get the the current active account.

C

So to do that, let's get an access to the instance, application instance and there, let's check for the current account.

C

This api is called get active, account.

C

And then, if I have an active account, I'm just going to set the username from that accounts, and I also want to update this part. So this is going to be username.

C

And I think we have it now I go here. I refresh my page and I see nothing because I never set an active account in the first place.

C

There are some accounts in the cache and if I want I can create them, I can find the account, but that's going to be messy, so we don't need to do that. We can handle this much easier.

C

Oh, I need a dependency here yep.

C

So the way we're going to do this is that we're going to register an event, an msl.js event, so msl.js fires, events with respect to various things, that's happening in the application like if the user signs in if a new account is added, if if it tries to acquire an access, token and etc, etc.

C

So what we're going to do is that we're going to add an event for a login success event which will fire when someone successfully logs in so let's do that. What I'm going to do is that I'm going to check for event type and amsoil has 711 types defined so I'll go here and find that.

C

And there I want to login success event.

C

So when this event fires, what I want to do is that I want to set an active account as the event payload.

C

Account I also want to just console log the event. Let's see. What's there.

C

So, okay, we registered our event. So one thing important to remember about events since we registered this event outside of our component tree. I don't need to do anything special, but you can also register these things inside your components and if you do that, you'll have to keep in mind that you have to appropriately unregister this event. When your component unmounts, you can look at the code examples to do that, but I don't need this at this moment.

C

So I'll go back to my application and I still have no identifier for the user. Why? Because this event never fired. So I need to sign out and sign in again so let's go ahead and sign out. Well, we can't we don't have the functionality yet so I'll go to my sign out button and I'll add that.

C

Just as we did with the sign-in button there we go. Thank you co-pilots.

C

And we'll add this event: don't click.

C

Again, this api accepts a bunch of parameters that you can customize the sign-in process sign out process, but at this moment I'm going to use it as it is so I'll go back to my app and now I should be able to sign out there. We go sign out of diego okay. Now I'm going to sign again.

C

I'll have to enter my password because I just signed out.

C

And here we go yeah this time we can see the username here and also we have logged this event payload. So, let's take a look at and what is there so, when someone successfully signs in msl will send a response that contains a host of information, you have your access token there, which you should normally never log out.

C

You have your when this token expires. You have your account information, you have your id token information and etc. You have your id token claims and a host of other information is available to you. So let's clear this guy, don't do this at home, and I want to take a stop here and just check with you. If you have any questions so far,.

A

Elena has done a great job, answering questions so salman.

C

A

We have one question from rafiki: is the m cell library doing an authorization code flow with pc, apkce or.

C

Is this an implicit flow? No, no. Definitely uh the amsoil browser and amsoil react are using the authorization code flow with pxe. That's right. Okay,.

A

All right, that's that's it! Let's, let's get on with the session sure.

C

Sure so so, when we sign in the most important artifact we get out of that process is the id token we get an id token, and that tells us lots of things about the signed in users.

C

So I just want to take a moment to go back to our slides and discuss what is in the id token and right after that, I'm going to start talking more on single sign-on process.

C

So let's take a look at the id token here, so here's a decoded id token. Your id tokens obtained from azure id will be base64 encoded, but you can decode it using the jaw.ms website if you like, and here you have an audience claim which tells you that this, which application this id token was issued to. So in our case, this is going to be our application's client id.

C

We also have an issuer claim which will contain our tenant id.

C

And if you, if the user is belongs to some security groups, they will also appear in the groups claim. The user's name will appear. The object. Id is an immutable identifier which identifies that particular users across all tenants.

C

If the user have any roles, they will appear there, the user's tenant will appear here and if you have any azure id roles assigned. These are different, azure app roles and they will also appear in the id token, and you can also customize many more claims to appear in the id token so that you can modify your application to make use of these.

C

So I'll go back to my app, and what I want to do is that I'm going to go ahead for the single sign out.

C

So there's a couple of things to discuss there. So amstel provides a sso, silent api which will attempt to sign you in without any interactions, and we can go ahead and code this.

C

But there are some caveats which I will talk about. So let's do that. Let's add this to the pages components so that whenever someone hits to my application it runs immediately so I'll go ahead and oops. I don't need this. I think I'll go ahead and use the usem cell hook again.

C

And I also want to check the authenticated state I'm going to use the use is authenticated hook.

C

All right- and I also want the use effect hook from react so that this runs when the component mounts.

C

C

And there, if the user is not authenticated,.

C

Nope nope, oh I see I see.

C

And if that's the case, then sorry.

C

Let's fire the sso silent api.

C

Now this api, like the login, redirect api or login pop-up api can take in a bunch of parameters. So I'm going to pass the scopes, but, most importantly, you will most likely want to pass a login hint to this api so that it knows which account to automatically sign in the usage. So I'm going to talk about in more details about this. So so, let's get the promise and do something with the promise and let's also get the let's also catch any.

C

Headers just gonna display them. We can handle them maybe later on.

C

And we're gonna have the response here. So, let's use the response to set an active account here is a separate event from login success.

C

And okay, so so we have some caveats to discuss when we are talking about this api I'll go back to my slides here.

C

So if you want to enable single sign-on between multiple apps well, one approach is that you can have sso between tabs for the same app for the same app instance.

C

If you simply set emcel's cache location to local storage, we will do that in a moment, but more likely, you're interested in this case, as you saw between different applications.

C

So the sso silent method will allow you to sign in the user and obtain tokens with other interaction.

C

However, if the user has multiple user accounts already activated azure id, then they'll have to see a account selection screen that we just saw previously.

C

If you need to bypass that screen, you'll have to pass some sort of account identifier.

C

This could be a session id or a login hint such as the upn or the preferred username or an msl account object, and there are many ways you could do this. For instance, let's say you have a company portal application and your users sign in there and then they obtain an id token.

C

And then you have a link on that company portal to your mcelray application.

C

You can redirect the user to msrv act with some account identifier, login hint in the query parameters, and then you can grab them and then just pass them to the sso silence methods, or there are some other methods as well.

C

But the important thing to keep in mind when using this api is that if your browser like safari, is blocking third-party cookies, this will fail. It will fail with the interaction required. Authentication, error and you'll have to catch this error and handle it with an interactive login api.

C

So let's go ahead and do this.

C

C

Grab the username from value patterns- let's say, and am I going to do this, but I'm going to- I want to look into the error handling process first, so we have to catch this error.

C

There we go, we need to import this, it's the network provided by msl browser.

C

C

Okay, now, if that happens, I'm just going to use login to dialect again and let's also pass our scopes here.

C

So now I have an active session with diego. So let's say I pass diego's username as a login hint here.

C

And then let's run this, so I'm going to close this up here, I already have an active session already so I'll go ahead and fire a new instance of my browser I'll go to localhost 3000.

C

All right that did not work for now.

C

Let's do this again.

C

Okay, now I'm sending automatically so because we are using session storage as soon as we are closing our browser. All of our cache is gone, so I want to get into these details a bit more. I also want to see what's going on what the amsoil is doing at that moment. I want to get some logs here, so that can help with my troubleshooting and debugging.

C

So let's go ahead and talk about these configuration details so I'll come back here and I'm going to add a cache option and the system option, and I want to talk what these are.

C

So, let's take a look at caching. First, so amsoil browser and mcelriak will cache your authentication artifacts, and I will talk about more in more details. What those artifacts are in either the session storage, which is by default and will go away when you close your browser or the local storage, which doesn't have an expiry date and will allow you to have sso between tabs of your same application instance, and you also have the option of memory storage.

C

So the local storage and session storage are considered secure, provided that your application doesn't have vulnerability to cross-site scripting attacks, and if you want to make sure for this, you should follow the osp xss prevention cheat sheet.

C

But beyond that there are several mechanisms that azure id ensures that your applications are secure. So, for instance, the single page applications or public client applications in general will have an access token. That is valid only for one hour and refresh and id tokens that are valid only for 24 hours.

C

So, if you are familiar with confidential client tabs, you can realize that this is much shorter than in the confidential client case.

C

You also have some opt-in mechanisms, like proof of possession which cryptographically binds your access tokens to your browser instance, so that those tokens cannot be used outside. Of that browser context and there's some work in progress for bringing this feature to refresh tokens as well, and then you also have continuous access evaluation events, which can invalidate your access token at any point in time by the resource server such as microsoft graph.

C

So if you need to support an older browser that doesn't have support for web storage, api, the cookie storage option is also available and you can use this to support all the browsers like enchant explorers, if you still have the support for that.

C

So what are the authentication artifacts amsoil obtains from aad? So the reason for obtaining these is that amsoil tries to facilitate an authentication and authorization process while trying to maintain a good user experience and to do that. It caches things like access tokens, id tokens refresh tokens account objects.

C

These are persistent and it also collects metadata about the request records, any errors or the current interaction status. It has some telemetry. It collects telemetry for the performance, data and other stuff, and all of these are mainly to help you debugging, maintaining a good user experience and etc.

C

So I'm going to go back to my code and I want to add the change, the caching location, to local storage. I want to have ssl between tabs and I'm going to set this to false just to make it explicit.

C

I also want logging to do that. I can do some. I can use the logo options, property and, I can add a logger callback, and what I want to do is that I just want to console.log these messages.

C

Now I need to set up a log level.

C

I'll use variables.

C

And I can choose if I want to support personally identify if I want to personally identify the information or not. I don't want to do this right now, but it could help you later on with debugging.

C

So I'll save this, and I have some errors here: let's go and fix those.

C

That's fine, so I'll go back to my app and now I can see the amstel logs in the console. It tells me what's going on at any moment. So, for instance, the application initialize starts, uh handle redirect, starts, there's no interaction in progress, returning null and etc, etc, and this is very helpful for debugging and troubleshooting.

C

But if you want to cut it short, you can just use, let's say info.

C

So then, let's go ahead and grab an access, token and call microsoft graph. So let's go ahead and do this I'll go back to my code. So what I'm going to do is that in my profile component I have just dummy data.

C

I want to get a real access token and actually call microsoft graph, so I'll go ahead and use the use m cell authentication hook.

C

Thank you I'll also, gonna need use, state and use effect hooks from react.

C

I'll go ahead and create some state.

C

Let's leave it as null for the moment, then I'm going to get then I'm going to use this museum cell authentication hook. So this is a hook that allows you to acquire access tokens with a given interaction type and a given request. So, first of all, let's get these interaction. Types from emsl, browsers.

C

So I want to use popup as my interaction type and my request can contain various sorts of information. I'm just going to pass user read. I want to access token with this permission and then I'm going to get the results and if there are any errors, the other object so I'll go ahead and run this uh on component mount.

C

So, let's check for if you have the graph data already, let's check for that, and we don't have to do anything I'll. Just cast this to a boolean.

C

We can return, let's also check if we have any errors.

C

Well, let's console.log them. We might have a. We might have a chance to handle that error later on and then do nothing for now and if you have the results, if the authentication, uh if the access token acquisition is successful,.

C

Let's go ahead and get the access token from this guy.

C

And now I want to make a fetch call to the microsoft graph api. So let me just create another file to put this logic into I'll, go ahead and create this fetch.js I'll, define a method.

C

I need an endpoint and an access token.

C

So what I'm going to have is that, let's have our headers for our request.

C

Thank you now. I need to define that.

C

Awesome, let's make it more clear: I'm also going to need a method, so options.

C

Thank you co-pilot, and now we can do a fetch call and get the response.

C

And catch any errors, if you have.

C

Awesome now, let's import this in our profile, components, profile, page.

C

C

Okay, now I want to pass the the endpoint to the where I can get the user's profile information that is going to be me.

C

Graph.Microsoft.Com.

C

3.3.1 and me endpoint and I'll get the response I'll set the graph data with that response, I'll catch any errors. If there are errors- oh let's add our dependencies here as well, so we'll have a dependency on graph data and error and results.

C

Okay. Now I have this. I don't need this dummy data anymore, I'm going to pass the graph data here, and I also want to conditionally render this prop only if I have graph data already.

C

There we go now. This should work, we should get an access token, and then we should call this endpoint with our access token, and we should get the response.

C

Okay, let's go ahead, click on profile and voila. Now we have the actual data from microsoft graph. So that concludes the token acquisition parts.

C

I will hand it over to salman for now to discuss about um continuous access evaluations.

D

Yes, hi everyone. One of the features that we want to discuss today is continuous access. Evaluation or cae c allows microsoft graph to evoke an active session in response to security. Events, like account, revocation account this disablement deletion, user location change, user risk increase.

D

We encourage admins to enable ce and their tenants, because graph will reject your access tokens and will send back a claim challenge that your developer needs to handle, which leads me to my next item: how to handle ca challenges when the graph api rejects the access token, it will send you a response with an error 401 from this response, authenticated header, you will extract an encoded claim. This claim is called claim challenge. We will decode this claim and pass it to msl, acquire token api to re-authenticate the user and acquire a fresh new token.

D

So how do we do this in our application?

D

The first step we need to do is to configure the m-cell application to clear it as capable of handling challenge. Then we grab the authentication header from the for 401 response. After that we will process the header and pass the claim to themselves.

D

As a request, let's actually dive into the code it's hard to to test this live because it takes some time to trigger so we'll just go through the code. At this point sure.

C

D

C

I'll call this demo: let's add our codes here, perfect I'll push this.

D

And forever who was asking about the code? We have a final uh branch that includes everything. If you would like to take a look at the final sample, that'll be great.

C

And let's check out this branch, there we go so I just dropped the branches and where we.

D

Tried to lock it, uh I would like to look at the install configuration so, as I said before, the first thing that we need to do is declare our application as capable of handling challenge, and we do this by saying. Client capabilities is cp1.

D

After, like after declaring this, we go to the same request in the fetch file.

D

This is exactly the same. Fetch request that dugan sent to a graph api. The only difference here is the function of handling claim challenge. When we receive the response, when we receive the response back from graph we'll check, if the response was rejected, with a status for a one and if the header is includes authenticated and then we will extract the claim challenge, as you can see there and store it in the session storage to be used in a different time.

D

So at this point, let's go to the profile component when we call graph again.

D

So at this point, when we call graph and graph rejects our access token, he will ask us to re-authenticate again and pass the claim challenge to insult a request object, and this is exactly what we do in line 10.. We basically see if the storage has the claim challenge and if it does have the clean challenge, we pass it in the request and we receive a new fresh token that allows us to access graph and receive the new data that we wanted and that's basically it for claim challenge. I will pause here.

D

If someone have any questions, if not, can you continue with this tutorial.

C

Yeah, there are many ways to pass this claims object here. We are using session storage for convenience, but you can come up with alternative ways to pass the claims challenge to msol, I'm going to continue with deploying our app to azure static web apps.

C

So let me just briefly discuss what is static. Web app search. The azure static web apps are, is a service that automatically builds and deploys your full stack web apps. So if you're familiar with app service, this is very similar to app service but geared towards single page applications and applications that are running in the browser, mainly so. The main advantage that it provides is that it will globally distribute your static content, meaning that your pages will load faster.

C

It also has very good integration with github and azure devops, and setting up a ci cd pipeline is very easy with that, and it was also integrated with azure functions as a serverless backend web api. So you could do that, use that as well.

C

I will go back to my application and I'm going to deploy this to static web apps. Let's go check out our demo branch again.

C

So we already pushed this actually, so what I can do is that I'm gonna go to.

C

Okay, so I'll go to the azure I'll switch tenants, because I don't have a subscription here.

C

There we go now. I need to find the static web apps service, it's here. If it's not, you can just search for it here, I'll, go ahead and select that and I'll create a static web app.

C

So I need to fill in this information. This is my cons subscription and I need a resource group. I already have one so I'm just going to use that one, I'm going to call this samsung react demo I'll, select the fleet here, that's enough for me at the moment and I'm going to connect my account with github. So this is already connected, but you'll see a connect.

C

Your account with github button here, probably- and you can go ahead and do that so once you connect your account, you'll be able to access all your repositories, your organizations and your branches on github, and this is also available for azure devops as well.

C

So I'll select my own repository.

C

C

And I want to use the deployment branch. The deployment branch is the same with the main branch that has the bayer application. It doesn't have any of the authentication code yet I'll make a pull request, and hopefully this will trigger the deployment process.

C

I'm also going to select the build presets. I'm using react. So I'll use select react. My application is stored from the main route, so that's going to stay as it is, and I don't have a backing web api uh function api. Yet so I'm gonna leave this blank and yeah. I will be using the build folder as my uh to have my distributable files, so I'll go ahead and create this.

C

Alright, while this is happening, apparently it's done so let's go awesome. So if I go back to my repo, something has changed here, so I can go to the deployment branch and I will file this github workflows file. This didn't exist before the static app service integrated with my github repo added this file. So this is a yaml workflow file and what it does is that when I have a push or pull request on deployment branch, this work workbook file will trigger.

C

It will build my application and it will uh deploy it on azure static web apps. So let's do this: let's go ahead and make a pull request. First, I want to make sure that I built this app.

C

This shouldn't take long.

C

All right now, I'm going to push this code.

C

I'll go back to my repo I'll make a pull request.

C

Hopefully there are no conflicts.

C

I'll write something here, I'll create a pull request, and this should now trigger uh okay, so measure that waiting for requirement statement. Okay, don't do this headphone, but I'm gonna. Do this I'll also approve this as myself.

C

Seriously, I can't so I'll go back and change this feature.

C

Oh, let's see if I can merge it already.

C

Someone can you think you can approve this. I think I need an approval yeah. This is a very good feature normally, but now it's blocking us.

C

C

Salman, are you there.

D

I am with you, but I'm trying to find I'll see one second.

D

Not getting anything, though,.

C

Okay, that's bad.

D

Yeah, I'm not getting anything my side again.

C

All right, so, unfortunately, we won't be able to deploy. Apparently, we enable the pr uh check and someone needs to with the right access needs to approve this.

C

uh I think I can give you right x, right access, I'll, go ahead and check this yeah.

B

Do you have a deployed instance somewhere just to.

C

I don't actually I was thinking of. We can do it together. It's really just one click, but.

C

See that was your github handle.

D

Yeah some man 90, I think.

C

D

C

I'll give you right access to approve my ph.

D

D

It's time, though,.

C

So in the meantime, um you can go ahead and shoot your questions. If you have any I'll wait for salman to approve my pr so that the workflow can run.

D

Okay approve granted see if I change anything actually, if anything, actually it's amazing. It's still blocked, though.

C

All right this one approving views, interesting, okay,.

B

Okay, in the meantime, uh we'll give anondish some time to close it close up the session and uh yeah and and if you could uh present the the more information tech, the one in the meantime sure, okay, I.

D

Think I think it nerds they didn't.

C

Make it I think it's run right now. So, let's.

D

C

Deployed, um let's double check if it's here.

D

I think it doesn't need time.

C

Yeah, let's go ahead and see and voila we have it here. Awesome, that's awesome. Certain things are not working.

B

Okay, uh that is awesome, so we can take care of those uh nandisha. You wanna sure.

A

Hey thanks all for joining the call. I think there are some more questions left in the chat, we'll continue answering them, uh but thanks a lot. This was really really insightful. I've tried my hands before, but you know a lot of learning today, uh thanks a lot for that. We have a lot of exciting calls coming up in the next month. Again, the third thursday of every month. Durgan is presenting again the next month and it will be like a series we'll have all the exciting calls.

A

We would love if you could take some time and fill out the survey. This helps us a lot to plan our upcoming uh calls in case you loved it. I saw a lot of comments.

A

You know please go ahead and put it in the survey so that you know uh dogan gets the information because then gets the information. I get the information and we're able to take it and plan. Our next calls all right thanks a lot for joining in did any closing comments. Kalyan salman.

C

Thank you very much for the opportunity and yeah. Hopefully we'll have a similar session on angular as well. I'm sorry angular as well yeah.

B

The next one would be a similar session, but on angular uh we hope to see you all there again and uh yeah.

C

B

Recording the deck all the other links would be available on the yammer uh post in a few days. uh So yeah keep your eyes peeled for it.

D

And if you have.

B

An additional question.

A

Reach your point, I just wanted to point out the one point that I missed. We have put the links for the youtube channel as well as the blog. Where we'll be putting this information, yammer will get it. The blog will get it as well as the youtube channel will get it here is where you have to go for the youtube, and the next call is on august 22nd at 9. 00 am pst and that's the community call calendar go ahead and download that check out our youtube link as well as our blog all right.

A

Thank you. We'll continue answering your questions on the chat. Thanks, a lot have a good one. Bye, bye, everybody.

B