SECRET OF CSS

How To Use AWS Cognito With DotNet MAUI | by Rafael Escoto | Aug, 2022


How to use AWS Cognito and Google OAuth2 within a hybrid MAUI app for user authentication

Photo by Clay Banks on Unsplash

I won’t be discussing how to set up Cognito and Google since plenty of articles are already discussing this. But, if you are starting from scratch, my favorite reference for this topic is this article on AWS’s knowledge center Set Up Google as a Federated Identity Provider.

It’s worth mentioning that the article doesn’t mention that in your Google Console, you have to add scopes to your OAuth Consent Screen.

For this example, I am using a MAUI Hybrid Blazor App, which is a hybrid app.

Visual Studio for Mac

After creating your project in Visual Studio, you should be able to click on the play button:

1*UWPogAquwWJS hgyRFvYPw

If you have issues running your app on Mac, look at this GitHub Issue. I had to go and install everything related to mobile development. Hopefully, this is fixed by the time you try this out.

We have the default Blazor App running as a Mac application out of the box.

1*QFJIA1CyZ k6RvKGtCmq9g

Let’s add a button on the left pane. Within the shared folder on your test application, create a file called LogInComponent.razor and LogInComponent.razor.css:

1*y27G86Kub3ZlUgQfLOECMw

For our button, we need a small piece of CSS to show/hide the HTML component we’ll add logic for when the user is or is not logged in.

Now in the razor component, let’s add two buttons. The first button will trigger the login action; the second will take care of the logout action.

For this to work, it is key to add this new component in the app to show it. Open the NavMenu.razor and add this after the Toggle Button component.

1*1B8y4ytD5dbch1jsY0uO2Q
NavMenu.razor

With these buttons in place, we can create a service for handling these actions. At the project level, let’s create a folder called BL as in BusinessLogic to hold the actions triggered from the UI. Then a CognitoAuth folder to hold Cognito’s logic.

1*WW7HKPTSb 3gOPqWaP2J9w

Let’s start with Cognito’s logic. For simplicity, I will be writing all the required objects in a single file called CognitoClient.cs.

Out of the box, MAUI configures a ServiceCollection for your app. You can find it in MauiProgram.cs. We will configure the Cognito client to be instantiated by the DI container and have it injected where required. We can start with an Interface for Cognito.

Then the required parameters to call Cognito’s service:

Domain: your App’s Cognito Domain Prefix.
ClientId: your App’s Cognito ClientId.
RedirectUri: your App’s Redirect Uri.

You can find your Domainand ClientId by going to your AWS Console > Cognito > User Pools > <Your Pool> > App integration. There you can find a Domain section and the App clients and analytics section.

1*nUsGTF WQOLeHjgeTdypbw

The RedirectUri is how the authentication service returns to your app after the authentication process is done. This is important, and we will take care of this configuration later.

To hold the result of Cognito’s call.

Following, the actual CognitoClientyou can see the auth config being injected in the constructor and how it is used later on BuildCognitoEndpoint().

As Microsoft recommends, we use the WebAuthenticator to call our authentication service, in this case, Cognito. We pass Cognito’s endpoint and the redirect URI as parameters for this action.

Something important to note. I hardcoded my region to us-west-2 you may be using something different. Or you may want it as a parameter. Just configure it in the AuthConfiguration class.

The result of building the endpoint is a URI with this format:

https://yourDomainPrefix.auth.region.amazoncognito.com/login?response_type=token&client_id=yourClientId&redirect_uri=redirectUrl

At this point, we have Cognito covered. Let’s use this service now. Back in the BL folder, create a file calledAuthenticationActions.cs. Here we will be connecting our button action from the UI to Cognito’s call.

Since the Cognito service is in place, we can request it to be injected directly from the DI container, and we don’t have to worry about it or its parameters.

For the results we send back to the UI, create a class to hold those values.

For the OnLoginClicked event, we simply call Cognito’s client and some simple validation afterward.

At this point, we are almost ready to test our code. We are missing some piping. Let’s configure the DI container to serve these objects when required.

As you can see, here I am setting the RedirectUri. Let’s modify the Info.plist for Mac apps. Here we configure the URL scheme used by our app, which is used for this callback.

1*L2cpFT9LFvOfNanBtkaaUA
1*k96 XwGi2xBdi

Take a look at lines 30 to 44.

This RedirectUri has to be configured as Callback URI in your Cognito’s Configuration. You can validate this on AWS’s Console. After opening Cognito, switch to the old interface (I couldn’t find this config in the new interface; if you know where it is, please let me know!).

1*uV1vZI1ElmkoEjIokDhujw
Open Cognito’s “old” interface.
1*DvnV5qNReSwQujz dyf7jA

OK! That was a piece of work!

Now, let’s try to run our app. Before hitting the play button, let’s set a breakpoint on AuthenticationActions.cs so that we can analyze the result of our authentication process.

1*QqbgUsOSXF41ToFhrmbhRw

Hit the Visual Studio’s Play button. Your app should look something like this:

1*x 3Q4NYGWwGHq3n 7NSVlA

Now for the magic moment, let’s try to log in! Hit the login button, and your typical login screen should open. This comes out of the box, thanks to Cognito.

1*AWUWoYhuDlyRqFww8KbHNA

Here is important to note that Google will only accept test emails you configured to be able to log in. If you sign in with User and Password, you can use any email.

After concluding this process, we should hit the breakpoint, and we can check the contents in the LoginResult object:

1*Vuw

After letting the program run, the UI should show the logout button.

1*SENf

At this point, you have Access/Id/Refresh tokens, and you are ready to identify your user like never before!

I will create Part 2 for this article to describe the logout procedure.



News Credit

%d bloggers like this: