>> Hi, everyone. My name is
Simona Cotin and I'm a Web Developer here at Microsoft.
In this video, I'm going to show you how to add
authentication to a web application.
Azure Static Web Apps manages authentication,
which is the process of verifying
the user's identity out-of-the-box.
By default, you have access to a series of
pre-configured authentication providers or
the option to register a custom provider.
The pre-configured ones include Twitter,
GitHub, and Azure Active Directory.
To implement a full authentication workflow in our Static Web App,
we can use a set of system endpoints that
will enable us to add functionality like login,
logout, as well as
retrieve authentication related to user information.
Let's go ahead and implement and use some
of these endpoints in our application.
As you can see here,
I have my application running in my local environment.
If you haven't already,
I highly recommend you check out
the previous videos where you can
learn how to set up this application,
as well as how to setup
the Azure Static Web Apps CLI in your local environment.
Throughout this video, I'm actually going to go step-by-step
through one of the Microsoft Learn modules that we have available,
which is authenticate users with Azure Static Web Apps.
Here you can see that you have
the instructions to run your application in your local,
and one of the first things that we're going to
do is really get the user login status.
We do that by making a query
to one of the system endpoints that I mentioned earlier,
which is /.auth./me in our client application,
and in our case that's a React application.
Let's go ahead and edit the Navbar component,
and I'm going to copy and paste the code here.
So going into VS Code,
opening the Navbar component.
At the top of the function,
I'm going to paste in this code.
We also need to make sure that we import use state and use effect,
which will help us to store our user information into the state.
You can see here that we are
fetching information from the system endpoint
that allows us to retrieve that information
and then we store it in our component state.
We also want to add the login and logout buttons.
But before we do that,
I mentioned that we have a couple of providers that
are configured by default.
Those are Twitter, GitHub,
and Azure Active Directory.
Let's go ahead and copy this providers
array and paste it at the top of our function.
With Azure Static Web Apps,
we also have the option of specifying
or redirect URL once
the login and logout actions are being completed.
We want that redirect to have to be back to the page,
the current page where we are at.
I'm going to define a variable here called redirect,
which is going to retrieve the current path.
Then let's go and add our login and logout buttons.
You can see here that if
user information is undefined or doesn't exist,
we are iterating over the list of providers and we're adding
a link that makes a call to that authlogin/provider.
This is where we are iterating over this array,
which is Twitter, GitHub,
and Azure Active Directory.
We're also specifying the login redirect URL,
which will bring us back to our current path.
We said that we also want to add a logout button,
so in case our user information already exists,
so our users are logged in,
then we want to display the logout button and the logout text.
Awesome. This means that we can test this information,
we can test this functionality.
If I go into our React application,
I can see that now we have on
the left-hand side a list of authentication providers,
Twitter, GitHub, and Active Directory.
Everything is now in place,
and the final step is to test if
everything is working as expected.
In our web application,
let's select one of the identity providers to login.
In this case I'll use GitHub and we'll be redirected to this page,
which is actually a fake authentication page,
which is provided by our Azure Static Web Apps CLI.
Let me just use this username,
learn, and press login.
We can see now that the screen has changed so that I
can see the logout button and it also shows welcome,
learn my username and GitHub,
the provider that I've used.
Let's go ahead and push these changes to GitHub so we can test
them in our Cloud application as well.
I've pushed this to the Cloud and I've pushed this to GitHub,
and what this will do is it will
trigger new action run in our GitHub repository,
which will take our code and
deploy it to our Azure Static Web Apps.
This will take awhile, so I'm going to fast forward here.
Awesome. Now that our application has
been built and deployed to the Cloud,
we can go into our web application and refresh.
Now we can see that we have authentication providers,
Twitter, GitHub, and Azure Active Directory.
Let me go ahead and test this with GitHub.
You can see that this is now the real screen that
allows us to grant consent to this application.
I'm going to click "Run consent" and now I can
see the same functionality for logging out and welcome,
SimonaCo, you've authenticated with GitHub.
In just a couple of steps,
we were able to set up authentication using
Azure Static Web Apps and add
authentication providers like GitHub,
Twitter, and Azure Active Directory.
Stay tuned for the next video so we
can see how we can restrict access
to certain routes or roles in our application.
[MUSIC]