How to use AWS Cognito and Google OAuth2 within a hybrid MAUI app for user authentication
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.
After creating your project in Visual Studio, you should be able to click on the play button:
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.
Let’s add a button on the left pane. Within the shared folder on your test application, create a file called
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.
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.
Let’s start with Cognito’s logic. For simplicity, I will be writing all the required objects in a single file called
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
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.
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
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:
At this point, we have Cognito covered. Let’s use this service now. Back in the BL folder, create a file called
AuthenticationActions.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.
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.
Take a look at lines 30 to 44.
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!).
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.
Hit the Visual Studio’s Play button. Your app should look something like this:
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.
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
After letting the program run, the UI should show the logout button.
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.