DEV Community: Pieter van der Westhuizen

Introduction to CSharp2Dart.com

Pieter van der Westhuizen — Fri, 07 Jan 2022 07:22:00 +0000

If you've ever written a mobile app with Flutter that integrates with an API, then you'll know that there are a lot of model objects that get passed between the app and the API.

JSON Serialization in Flutter can also take a fair amount of boilerplate code in order to work and can feel somewhat tedious and repetitive. If you're building your API using C#, you'll also duplicate the same model structure in C# in order to receive the serialized models from Flutter and vice versa.

With this in mind, and to help remove some of the slog work, I've created https://www.csharp2dart.com/.

The site provides a simple interface where you can paste your C# code and then generate it's Dart equivalent. If the site looks somewhat familiar, I did take some inspiration from https://csharp2json.io/

You'll have some control over the code that is generated by setting the following options:

a) Add @JsonSerialization() annotation
This will add an import and part statement to the top of the file as well as decorate the class with the @JsonSerialization() annotation. e.g.:

b) Add toJson() method
This option generates the toJson() method, which in turn will make it easy to serialize the object to JSON. The json_serializable package will generate this method for you and it can be found inside the generated *.g.dart file.

c) Add fromJson() method
This method does the inverse of the toJson() method. With this method you can create a new instance of your class from JSON. As with the toJson() method json_serializable does all the code generation.

d) All fields should be nullable
If you need all the fields of the Dart class to be nullable, setting this property will automatically do that for you.

e) Required constructor parameters
The last option, if set, makes all the constructor parameters required.

If you want to generate more than one class at a time, it is possible. For example, the following code:

    public class Product
    {
        public int ProductId { get; set; }      
        public string Title { get; set; }       
        public string SubTitle { get; set; }        
        public bool IsActive { get; set; } = true;  
    }

    public class ProductOption 
    {       
        public string Title { get; set; }
        public double Price { get; set; }
        public int QuantityInStock { get; set; }
    }

will produce two Dart classes:

// -- product.dart --
class Product {
    int productId;
    String title;
    String subTitle;
    bool isActive;

    Product(this.productId,this.title,this.subTitle,this.isActive,);
}
// -- product_option.dart --
class ProductOption {
    String title;
    double price;
    int quantityInStock;

    ProductOption(this.title,this.price,this.quantityInStock,);
}

Please feel free to use it and if you run into any bugs or want to suggest any new feature, please create a new GitHub issue.

Thank you for reading. Until next time, keep coding!

-P

P.S. To learn more about JSON and serialization in Flutter, please see the Flutter documentation.

Searching Azure Blob Storage using Blob Index

Pieter van der Westhuizen — Mon, 19 Apr 2021 11:41:00 +0000

Back in May 2020, Microsoft announced a new feature for Azure Blob Storage called Blob Index. Essentially, this enables you to add key/value tags to your Blob objects and be able to query said Blob objects without having to use a separate service like Azure Search.

This is great because in many instances you'd only want to store a few additional properties for your Blob objects and still be able to query on theses properties without having to create and maintain a separate database that does this for you (or setup something like Azure Search)

Now, bear in mind this is still in Preview and the features can still change and there are also a few limitations to consider (source):

Each blob can have up to 10 blob index tags
Tag keys must be between one and 128 characters
Tag values must be between zero and 256 characters
Tag keys and values are case-sensitive
Tag keys and values only support string data types. Any numbers, dates, times, or special characters are saved as strings
Tag keys and values must adhere to the following naming rules:
- Alphanumeric characters:
- a through z (lowercase letters)
- A through Z (uppercase letters)
- 0 through 9 (numbers)
- Valid special characters: space, plus, minus, period, colon, equals, underscore, forward slash (+-.:=_/)

With that said, I was excited to try this out, so in this post I'll show you how you can search your Azure Blob Storage files using Blob Index and C#.

The Console App

We'll create a simple .NET Core Console Application to upload a few files to Azure Blob Storage, with some tags and then search them. I'm not going to take you through the process of creating the Console Application, but if you get stuck on this, let me know in the comments.

After you've created the Console Application, add the Azure.Storage.Blobs NuGet package and create a new class called StorageService. This class will have the following two methods:

UploadFile, which is a simple class to upload a file and associate some tags with it.
FindCustomerFiles, will return a list of Blob objects associated with a customer or a tag called Customer.

Uploading Azure Blob objects

The code for the UploadFile method follows:



public async Task UploadFile(string containerName, string filePath, Dictionary<string, string> tags)
{
    string fileName = Path.GetFileName(filePath);
    BlobContainerClient container = _client.GetBlobContainerClient(containerName);
    BlobClient blob = container.GetBlobClient(fileName);

    using FileStream fileStream = File.OpenRead(filePath);
    await blob.UploadAsync(fileStream, false);
    fileStream.Close();
    await blob.SetTagsAsync(tags);
}

You'll notice the method does not do anything spectacularly different than usually when uploading files to Azure Blob storage, however, take a look at the .SetTagsAsync method on the BlobClient object. This method take a Dictionary object containing all the tags we want to associate with the Blob object.

To upload files, we'll call the UploadFile method as illustrated below:



static async Task UploadFile(string filePath)
{
    string accountName = "<your-account-name>";
    string accountKey = "<your-account-key>";

    var storageService = new StorageService(accountName, accountKey);

    Dictionary<string, string> tags1 = new Dictionary<string, string>
    {
        {"customer", "Acme Inc."}, 
        {"product", "Anvil"}
    };
    await storageService.UploadFile("files", filePath, tags1);
}

The code above creates a new instance of the StorageService class and passes in the Azure Blob Storage account name and key as constructor parameters. Next, we create a new Dictionary object containing two tags called customer and product. Lastly, we upload the file to a Blob container called files. (The full code listing for the StorageService class is available at the bottom of this post.)

After uploading a few files using the UploadFile method, we should see them inside our files Blob Container, e.g.:

We're using the Microsoft Azure Storage Explorer to view these files. If you do not already have it installed, get it here.

To test whether our code worked, right-click on a file and select Edit Tags...

You should see a list of tags associated with the Blob object:

Searching for Azure Blob objects

The FindCustomerFiles method will perform a relatively simple search that will return any Blob objects in a specified container with a "customer" tag containing the supplied customer name. The code for the method follows:



public async Task<List<TaggedBlobItem>> FindCustomerFiles(string customerName, string containerName = "")
{
    var foundItems = new List<TaggedBlobItem>();
    string searchExpression = $"\"customer\"='{customerName}'";
    if (!string.IsNullOrEmpty(containerName))
        searchExpression = $"@container = '{containerName}' AND \"customer\" = '{customerName}'";

    await foreach (var page in _client.FindBlobsByTagsAsync(searchExpression).AsPages())
    {
        foundItems.AddRange(page.Values);
    }
    return foundItems;
}

The most important part of the FindCustomerFiles method is the FindBlobsByTagsAsync method on the BlobServiceClient object. It takes an ANSI SQL WHERE clause parameter and supports the following operators =, >, >=, <, <=, AND. Note that it will return ALL Blobs in the storage account that match the search expression, if you want to limit the results to a particular Blob container add @container to the search expression.

To use the FindCustomerFiles method to find all Blobs associated with customer Acme Inc. in the files Blob container, you'll use the following code:



static async Task FindFiles()
{
    string accountName = "<your-account-name>";
    string accountKey = "<your-account-key>";

    var storageService = new StorageService(accountName, accountKey);
    var files = await storageService.FindCustomerFiles(customerName: "Acme Inc.", containerName: "files");
    foreach (var file in files)
    {
        Console.WriteLine(file.BlobName);
    }
}

StorageService code listing

The full code for the StorageService class follows:



public class StorageService
{
    private readonly BlobServiceClient _client;

    public StorageService(string accountName, string accountKey)
    {
        var connectionString = $"DefaultEndpointsProtocol=https;AccountName={accountName};AccountKey={accountKey};EndpointSuffix=core.windows.net";
        _client = new BlobServiceClient(connectionString);
    }

    public async Task UploadFile(string containerName, string filePath, Dictionary<string, string> tags)
    {
        string fileName = Path.GetFileName(filePath);
        BlobContainerClient container = _client.GetBlobContainerClient(containerName);
        BlobClient blob = container.GetBlobClient(fileName);

        using FileStream fileStream = File.OpenRead(filePath);
        await blob.UploadAsync(fileStream, false);
        fileStream.Close();
        await blob.SetTagsAsync(tags);
    }

    public async Task<List<TaggedBlobItem>> FindCustomerFiles(string customerName, string containerName = "")
    {
        var foundItems = new List<TaggedBlobItem>();
        string searchExpression = $"\"customer\"='{customerName}'";
        if (!string.IsNullOrEmpty(containerName))
            searchExpression = $"@container = '{containerName}' AND \"customer\" = '{customerName}'";

        await foreach (var page in _client.FindBlobsByTagsAsync(searchExpression).AsPages())
        {
            foundItems.AddRange(page.Values);
        }
        return foundItems;
    }
}

I hope you can see the same potential for this as I can and how easy it is to add a simple and quick file search to your Azure Blob Storage solutions.

Thank you for reading! Until next time, keep coding!

Using AWS Cognito with Vue/NuxtJS

Pieter van der Westhuizen — Tue, 06 Apr 2021 07:16:52 +0000

In my last post, "Using AWS Cognito with Xamarin Forms", I showed how to authenticate with Amazon Cognito using Xamarin Forms and the Xamarin.Essentials Web Authenticator.

In this post, we'll go through the process of using the AWS Cognito Hosted UI with your own Vue/NuxtJS site. For an idea on the final result, please take a look at the video below.

Setting up an AWS Cognito user pool

We'll be using the same AWS Cognito User pool and App client that we've created in my previous post. Please refer to the instructions details therein.

Creating the Vue/Nuxt project

To create the Nuxt project, open up your preferred terminal window and enter the following command:



yarn create nuxt-app mynuxtapp

When prompted, you can select the following options:

Project name: mynuxtapp
Programming language: JavaScript
Package manager: Yarn
UI framework: Vuetify.js
Nuxt.js modules: Axios
Rendering mode: Single Page App
Deployment target: Static (Static/Jamstack hosting)

I've assumed you've already installed everything necessary to create Vue/Nuxt projects. If not, please refer to the NuxtJS documentation

Adding the nuxt/auth dependency

Add the nuxt/auth dependency to you project by executing the following command:



yarn add --exact @nuxtjs/auth-next

Next, in the nuxt.config.js file, add the nuxt/auth module to the modules array.



  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/auth-next"
  ],

While we have the nuxt.config.js file open, also add the auth section as below:



  auth: {
    strategies: {
      awsCognito: {
        scheme: "oauth2",
        endpoints: {
          authorization: "https://myxamarinapp.auth.us-east-1.amazoncognito.com/login",
          token: "https://myxamarinapp.auth.us-east-1.amazoncognito.com/oauth2/token",
          userInfo: "https://myxamarinapp.auth.us-east-1.amazoncognito.com/oauth2/userInfo",
          logout: "https://myxamarinapp.auth.us-east-1.amazoncognito.com/logout"
        },
        token: {
          property: "access_token",
          type: "Bearer",
          maxAge: 3600
        },
        refreshToken: {
          property: "refresh_token",
          maxAge: 60 * 60 * 24 * 30
        },
        responseType: "token",
        redirectUri: "http://localhost:3000/login",
        logoutRedirectUri: "http://localhost:3000/login",
        clientId: "4jlfe2iki0ucn32uc44clmib3d",
        scope: ["email", "openid", "profile"],
        codeChallengeMethod: "S256"
      }
    }
  }

We're using the built-in OAuth2 scheme and we're calling it awsCognito. The endpoints are:

authorization
This is the domain/url we've configured in AWS Cognito with /login appended. This loads the login page.

token
This is the domain/url we've configured in AWS Cognito with /oauth2/token appended. This endpoint is used to get the user's tokens.

userInfo
This is the domain/url we've configured in AWS Cognito with /oauth2/userInfo appended. This endpoint is used to retrieve information about the authenticated user.

logout
This is the domain/url we've configured in AWS Cognito with /logout appended. Used to sign the user out.

For more detail regarding these endpoints, please refer to the Amazon Cognito user pools Auth API Reference

The rest of the auth options should be relatively self-explanatory. For this example the important config entries are:

response_type
Set this to token to inform AWS Cognito that we want an access_token back.

redirectUri
This value should also be added to the list of Callback URL(s) under App integration > App client settings in AWS Cognito.

clientId
Is the same Client Id as configured in AWS Cognito. You'll find this under General settings > App clients

codeChallengeMethod
Amazon Cognito authentication server only support S256. This value must be supplied for the nuxt/auth OAuth scheme to work or else you'll receive a "unsupported code challenge method" error.

The last change we need to make in the nuxt.config.js file is to enable the auth middleware globally. Do this by setting the router middleware, as show below:



 router: {
    middleware: ["auth"]
  }

UI Changes

Login Page
We'll add a simple login page, inside the pages folder, called login.vue. The page will prompt the user to log in if they are not authenticated. I contains a simple login method that logs in using the awsCognito scheme we've configured in the previous step, the code for the method follows:



methods: {
    login() {
      this.$auth.loginWith("awsCognito");
    }
  }

The full code listing for the login page are:



<template>
  <v-row align="center" justify="center">
    <v-col cols="12" sm="8" md="4">
      <v-card class="elevation-12" v-if="loggedIn">
        <v-card-title>Logging in.</v-card-title>
        <v-card-text
          >Logging in, please wait...
          <v-progress-circular indeterminate color="green"></v-progress-circular>
        </v-card-text>
      </v-card>
      <v-card class="elevation-12" v-else>
        <v-card-title>You're not logged in</v-card-title>
        <v-card-text>Click the button to log into your account. </v-card-text>
        <v-card-actions>
          <v-btn @click="login" color="primary">Login</v-btn>
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  layout: "unauthorized",
  data() {
    return {
      loggedIn: false
    };
  },
  created() {
    this.loggedIn = this.$auth.strategy.token.get();
  },
  methods: {
    login() {
      this.$auth.loginWith("awsCognito");
    }
  }
};
</script>

In the page template we use v-if and v-else directives to either show a login button or a message informing the user that they are being logged in. This is useful when AWS Cognito redirects to the login page after the user has logged in.

Home Page
The home page is located in the pages/index.vue file. This file should've been automatically added for you when you've created the project. This page will only be shown once the user is authenticated and will display some of the user's information as illustrated in the following image:

There is not much logic in the page. The most important aspects is that we show the user information using properties on the this.$auth.user object and the logOut method uses this.$auth.logout() to log the user out when the "Log Out" button is clicked.

The full code listing for the page follows:



<template>
  <v-row justify="center" align="center">
    <v-col cols="12" sm="8" md="6">
      <div class="text-center">
        <logo />
        <vuetify-logo />
      </div>
      <v-card>
        <v-card-title class="headline"> Welcome {{ username }}, you are logged in! </v-card-title>
        <v-card-text>
          <p>
            Here are your user details, retrieved from the
            <a href="https://docs.aws.amazon.com/cognito/latest/developerguide/userinfo-endpoint.html">/USERINFO</a>
            endpoint:
          </p>
          <template>
            <v-simple-table>
              <template v-slot:default>
                <thead>
                  <tr>
                    <th class="text-left">
                      Property
                    </th>
                    <th class="text-left">
                      Value
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Email</td>
                    <td>{{ email }}</td>
                  </tr>
                  <tr>
                    <td>Phone number</td>
                    <td>{{ phoneNumber }}</td>
                  </tr>
                  <tr>
                    <td>UserId/sub</td>
                    <td>{{ userId }}</td>
                  </tr>
                  <tr>
                    <td>User name</td>
                    <td>{{ username }}</td>
                  </tr>
                  <tr>
                    <td>Access Token</td>
                    <td>{{ accessToken }}</td>
                  </tr>
                  <tr>
                    <td>Refresh Token</td>
                    <td>{{ refreshToken }}</td>
                  </tr>
                </tbody>
              </template>
            </v-simple-table>
          </template>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" @click="logOut">
            Log Out
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
import Logo from "~/components/Logo.vue";
import VuetifyLogo from "~/components/VuetifyLogo.vue";

export default {
  components: {
    Logo,
    VuetifyLogo
  },
  data() {
    return {
      email: null,
      phoneNumber: null,
      userId: null,
      username: null,
      accessToken: null,
      refreshToken: null
    };
  },
  created() {
    this.email = this.$auth.user.email;
    this.phoneNumber = this.$auth.user.phone_number;
    this.userId = this.$auth.user.sub;
    this.username = this.$auth.user.username;
    this.accessToken = this.$auth.strategy.token.get();
    this.refreshToken = this.$auth.strategy.refreshToken.get();
  },
  methods: {
    logOut() {
      this.$auth.logout();
    }
  }
};
</script>

Note: I've explicitly shown on the page that the Refresh Token's value is false. This is because that AWS Cognito only returns refresh tokens if the Authorization Code grant is used. You can read more about refresh token in the Amazon Developer docs.

If everything goes according to plan, you should see a program flow similar to the video at the top of this post. I hope this post has been informative and that it can help you get started with Vue/Nuxt and Amazon Cognito.

Thank you for reading. Until next time, keep coding!

Full source code is available on GitHub: https://github.com/Pietervdw/vuenuxt-awscognito

Using AWS Cognito with Xamarin Forms

Pieter van der Westhuizen — Wed, 24 Mar 2021 08:43:09 +0000

In this post, I'll show you how to quickly and easily set up user authentication for your Xamarin Forms app using Amazon Cognito.

AWS Cognito is a user identity management solution by Amazon. It is a really easy way to add authentication to your application without having to worry about building and managing your own identity/authentication solution.

Xamarin Forms is an open-source cross-platform framework that you can use to create applications for Android, iOS and Windows.

Setting up an AWS Cognito user pool

First, we will need to create a user pool in AWS Cognito, which we'll use to create users and an App client. Head over to your AWS Cognito console and click on the "Manage User Pools" button.

Click the "Create a user pool" button, in the top-right corner of the next page. Next, enter a name for and choose the "Review defaults" option

On the next page, you can review the default options (I'll leave you to experiment with the different settings on your own) and scroll down to App clients.

Click on the "Add app client..." link and on the next page, click "Add an app client".

Next, only enter an App client name (We'll use "My Xamarin App" and keep all the options with their default values, scroll down and click "Create app client"

Click the "Return to pool details" and finally click on the "Create pool" button.

Creating a new user

Before we can log in, we first need to create a user. To do this, click on Users and groups under General settings and click the "Create user" button.

Complete the form, by entering a valid email address (This will be needed shortly) and make sure to tick the Send an invitation to this new user? and Email checkboxes.

With the user created, we need to configure the App client to allow the user to sign in.

Configuring the App client

Click on App client settings under App integration. Check the Cognito User Pool checkbox and complete the Callback URL(s) and Sign out URL(s). These can be any valid web address for now, we'll change them a bit later on for use with our Xamarin app.

Next, check the Implicit grant OAuth flow and select the email, openid and profile OAuth scopes (The scopes won't be super important for this demo, but is when you integrate with your own API, etc.)

Choose a domain name

With the App client configured, you need to choose a domain name. Click on Doman name under App integration and enter any domain prefix you prefer and check if it is available by clicking on the Check availability button.

If your domain name is available, save the changes, and move onto customizing the UI for the sign-in page.

Customizing the sign-in UI

Customizing the UI is an optional step, but it is a nice way to make the UI fit in with your color scheme. Not much need to change with the default style, the only change is to add a custom logo.

Testing the sign-in UI

Save your changes and head back to App client settings where you will notice that we now have the Launch Hosted UI link at the bottom of the page:

Clicking on the Launch Hosted UI link will open the sign-in page in a separate browser tab and you should see something similar to the following:

Go ahead and sign in using the credentials for the user we have created earlier. You'll be prompted to specify a new password, remember this password as we'll use it shortly to log in via our Xamarin app.

The Xamarin Forms App

I'm not going to walk you through the process of creating the Xamarin Forms app as I'm assuming you are familiar with the process. The app will not be very complicated and will consist of only one view/page.

Prism Library

I'm a fan of Prism for my Xamarin Forms apps, and will use it for this one, but the code will still work with standard Xamarin Forms or any other MVVM framework.
I'm using the Prism Template Pack to create as basic Xamarin.Forms Prism Blank App. This project template will stub out all the necessary files we need for this example.

Xamarin Essentials

First, add the Xamarin.Essentials NuGet Package to your projects. If you're using MVVM (Like we're doing in this example), you'll ideally want to install the Xamarin.Essentials.Interfaces NuGet Package

Android Project Changes

In the Android project, add a new class called WebAuthenticationCallbackActivity and add the following code to it:

using Android.App;
using Android.Content.PM;

namespace XFCognito.Droid
{
    [Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop)]
    [IntentFilter(new[] {Android.Content.Intent.ActionView},
        Categories = new[] {Android.Content.Intent.CategoryDefault, Android.Content.Intent.CategoryBrowsable},
        DataScheme = "myxfcognitoapp")]
    public class WebAuthenticationCallbackActivity
        : Xamarin.Essentials.WebAuthenticatorCallbackActivity
    {

    }
}

Make note of the DataScheme value, myxfcognitoapp, we are going to need this later.

AndroidManifest.xml
If you're targeting Android 11, you'll need to add the following to AndroidManifest.xml:

<queries>
  <intent>
    <action android:name="android.support.customtabs.action.CustomTabsService" />
  </intent>
</queries>

iOS Project Changes

Info.plist
In your iOS project add the following to Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>myxfcognitoapp</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myxfcognitoapp</string>
    </array>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
  </dict>
</array>

Note that we're using the same value(myxfcognitoapp), that we've used for the DataScheme value in Android for CFBundleURLName and CFBundleURLSchemes.

AppDelegate.cs
Override the OpenUrl and ContinueUserActivity methods in the AppDelegate class with the following:

public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
{
    if (Xamarin.Essentials.Platform.OpenUrl(app, url, options))
        return true;

    return base.OpenUrl(app, url, options);
}

public override bool ContinueUserActivity(UIApplication application, NSUserActivity userActivity, 
    UIApplicationRestorationHandler completionHandler)
{
    if (Xamarin.Essentials.Platform.ContinueUserActivity(application, userActivity, completionHandler))
        return true;

    return base.ContinueUserActivity(application, userActivity, completionHandler);
}

The Xamarin.Essentials documentation is an excellent resource if you need more information on how the Web Authenticator works. I can highly recommend it.

Shared Project Changes

App.xaml.cs
Open the App.xaml.cs file and change the RegisterTypes method to the following:

protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    containerRegistry.RegisterSingleton<IWebAuthenticator, WebAuthenticatorImplementation>();

    containerRegistry.RegisterForNavigation<NavigationPage>();
    containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
}

All we're doing is registering the WebAuthenticator so that we can inject it into our ViewModel and setting up the Prism navigation.

MainPageViewModel.cs
Next, open the MainPageViewModel.cs class in the ViewModels folder. Change the code to the following:

using Prism.Commands;
using Prism.Navigation;
using System;
using System.Threading.Tasks;
using Xamarin.Essentials.Interfaces;

namespace XFCognito.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        private readonly IWebAuthenticator _webAuthenticator;

        private string _accessToken;
        public string AccessToken
        {
            get => _accessToken;
            set => SetProperty(ref _accessToken, value);
        }

        private DelegateCommand _loginCommand;
        public DelegateCommand LoginCommand => _loginCommand ?? (_loginCommand = new DelegateCommand(ExecuteLoginCommand));

        public MainPageViewModel(INavigationService navigationService, IWebAuthenticator webAuthenticator) : base(navigationService)
        {
            _webAuthenticator = webAuthenticator;
            Title = "AWS Cognito & Xamarin Forms";
        }

        async void ExecuteLoginCommand()
        {
            try
            {
                var results = await _webAuthenticator.AuthenticateAsync(
                    new Uri("https://myxamarinapp.auth.us-east-1.amazoncognito.com/login?client_id=4jlfe2iki0ucn32uc44clmib3d&response_type=token&scope=email+openid+profile&redirect_uri=myxfcognitoapp://"),
                    new Uri("myxfcognitoapp://"));

                AccessToken = results?.AccessToken;
            }
            catch (TaskCanceledException  e)
            {
                AccessToken = "You've cancelled.";
            }
        }
    }

}

In the code above, we've created a property that will hold the AccessToken we get back from AWS Cognito, we've also added a LoginCommand that calls the Xamarin Essentials WebAuthenticator's AuthenticateAsync method.

The AuthenticateAsync method takes two parameters, the first is the URL to the AWS Hosted UI, you can get this by copying the URL that opens when clicking the Launch Hosted UI link in AWS Cognito's App client settings.
The second parameter is the DataScheme value (myxfcognitoapp) that we've used previously with a colon and two forward slashes appended.

Final Changes

Go back to the App client settings in AWS Cognito and change the Callback URL(s) to the DataScheme value, in the following format:

myxfcognitoapp://

The app in action

When running the app on Android, the first view will be the MainPage.

Tapping on the Login button, you'll be taken to the AWS Cognito Hosted Login page.

After entering your credentials and signing in, the app will navigate back to the MainPage and your AccesToken will be displayed.

This AccessToken can now be used to make any authenticated API calls you need.

The experience on iOS is similar:

Thank you for reading. Until next time, keep coding!

Full app source code is available on GitHub: https://github.com/Pietervdw/xamarinforms-awscognito