.NET MAUI provides different techniques for local storage, in my previous article, explain preferences. This article will explain how to use secure storage in your mobile iOS, Android, and windows applications.

Secure storage is like a shared preference. It stores data in key and value pairs. The data is encrypted and users a key made from a unique device key to encrypt and decrypt the data stored. The data is stored in a secure storage directory where only the OS can access it.
  Secure storage - .NET MAUI - Microsoft Docs
You must keep in mind Do and Don’t Do things about Secure Storage.
  1. There are no storage limitations for secure storage, best practices, and performance, secure storage may be impacted if you store large amounts of text, as the API was designed to store small amounts of text.
  2. You can store an unlimited number of keys inside
  3. The data gets deleted once the app is uninstalled.
  4. Best practice, you can choose to disable Auto Backup for your entire application, or You can create a custom rule set to exclude Secure Store items from being backed up.

Don’t Do in Secure Storage

  1. Secure storage to store data that should be encrypted and hidden from the user. That data should store only store users' sensitive data such as their API keys and not your server private keys and server connection string. Although data stored in secure storage are encrypted, it isn't entirely secure. Users can root/jailbreak their devices which gives them full control of the OS. There are tools that can intercept keys as they are provided and use them to decrypt the data. The only way to prevent that is to never save the server details and non-user-related data to the user device. You should store it on a server that you can control.
  2. When you try to save the max length string into the Preferences and secure storage to your device, it throws a Memory Exception when Preferences and secure storage data exceed 1.42 MB so don’t try to save a large amount of text, so if you have more than 1.42 MB data size to save it’s better to save use File storage or SQLite database.

Secure Storage VS. preferences

You probably already know about preferences, which is very useful when you want to save non-private information, but where you need to use secure storage, the following key difference will help you to understand.
Local Settings: Preferences and Secure Storage

Getting started with MAUI Secure Storage

The following steps are to create/get / Clear secure storage using.Net MAUI application. The .Net MAUI Secure Storage and ISecureStorage types are available in Microsoft.Maui.Storage namespace.

Secure storage will work on all the platforms iOS, macOS, Android, and windows, Only iOS simulator debugging require extra setup will explain in the last section.

Create New project

You can open visual studio 2022 from your Windows / Mac machine. You must follow the below 3 steps to create a new MAUI application.

Step 1: Select Create a new project

Step 2: Search the MAUI project template or choose Project Type > MAUI from the drop-down.

Step 3: Provide the configuration Details as a project name, Location, and Solutions name.
Xamarin.Essentials: Secure Storage

Namespace

Secure storage is storing data in key-value pairs and can be easily managed via the secure storage class from Microsoft.Maui.Storage namespace, so accesses secure storage add the Microsoft.MAUI. storage namespace

Save Secure Storage

SetAsync method, providing the key and value. it supports strings only. If you want to store other types of data, you can encode them as a string. The most convenient way to do that is probably JSON. You can use JSON serialize and deserialize.

await SecureStorage.SetAsync("Key String ", "Value String ");

For Example, while using implementation you can use like below

await SecureStorage.SetAsync("UserPassword", "MSdevBuild@123");

The Mobile Secure storage will work as per the platform-specific; the below section will show how different platforms store the secure storage in the device.

Android Device Secure Storage

Secure Storage uses the preference API and follows the same data persistence with a filename

[YOUR APP Package name ID].microsoft.maui.essential.preferences

However, data is encrypted with the Android EncryptedSharedPreference Class, and the secure storage value is encrypted with AES-256 GCM.

iOS Device Secure Storage

Key Chain is used to store values securely on iOS devices. The SecRecord used to store the value has a Service value set to

[YOUR-APP-BUNDLE-ID].microsoft.maui.essentials.preferences.

Windows Device Secure Storage

DataProtectionProvider is used to encrypt values securely on Windows devices.Encrypted values are stored in ApplicationData.Current.LocalSettings, inside a container with a name of

[YOUR-APP-ID].microsoft.maui.essentials.preferences.

Read Secure Storage

In the above code snippets, you understood the saved the secure storage string value, in the below statement will get the value from existing secure storage.

await SecureStorage.GetAsync("Existing save Key");

Here you don’t have the option to check the key already available or not, but you can check values there or not using strining.IsnullorEmpty.

string securepassword = await SecureStorage.GetAsync("UserPassword");

if(!string.IsNullOrEmpty(securepassword))
{
//Statement
}

Remove Secure Storage

Remove and Remove all will use for dropping the Secure Storage key and value, suppose if you are doing any logout or switching to a different user this will help to clear all the Secure storage from your device.

Remove will give the confirmation with the bool return type, this will help us for navigation after confirmation.

bool isremoved = SecureStorage.Remove("UserPassword");


Suppose, User tries to log out or switch to different users, the best way to use remove all secure storage

SecureStorage.RemoveAll();

IOS Specific Secure Storage Setup

You must follow the below steps for only IOS simulator

Secure Storage Setup for IOS Simulator

I have received this question from many of them, “I want to use Secure Storage on iOS and Android mobile phones and tablets, but I get this error message on iOS simulator but it works well in Android emulator, devices and IOS devices”

SecureStorage requires Entitlements.plist update for iOS

The above issue is common for Xamarin and MAUI, you can follow the below steps will work in IOS simulator.

When developing on the iOS simulator, enable the Keychain entitlement and add a keychain access group for the application's bundle identifier.
Step 1: Create or open the Entitlements.plist in the project and This will automatically add the application's identifier as a group
Step 2: In the project properties, under iOS Bundle Signing set the Custom Entitlements to Entitlements.plist.

Secure Storage plugin not working in ios simulator

Export compliance documentation for encryption, while Uploading AppStore

Complying with Encryption Export Regulations screen when uploading to the apple store, suppose you app makes calls to a web service via HTTPS and MAUI Xamarin Secure Storage to store secure information, in this case, you don’t worry about Encryption export Regulation, as per Apple documentation No documentation required.

Complying with Encryption Export Regulations

If you do the below steps, next time you won’t get the above Dialog wizard.

Add the ITSAppUsesNonExemptEncryption key to your app’s Info.plist file with a Boolean value that indicates whether your app uses encryption. Set the value to NO if your app using only Secure Storage and https API call, next

Is HTTPS exempt from export compliance?

Summary

The Secure Storage class is intended to store small pieces of secure storage information. If you need to locally save and retrieve more complex and structured data, a good option is to use a local database.
.NET MAUI provides 4 techniques for local storage options for storing data in locally on a device, depending on the nature, structure, and size of the data. The most used following 4 ways to store the local data on mobile devices.
  • Preferences
  • Local File Storage
  • Local Database
  • Secure Storage.
In this article, will share about the .Net MAUI Preference storage technique. Preferences is stores data in key-value pairs and can be easily managed via the Preferences class from Microsoft.Maui.Storage namespace and if you do Uninstall the app will also remove all local preferences, but if you are close and open the application still local preference can able to retrieve the old data.

.NET Multi-platform App UI (.NET MAUI) | .NET

The Preferences class stores preferences in the native local storage, more specifically
  • For Android, in the SharedPreferences.
  • For iOS, in the NSUserDefaults.
  • For UWP, in the ApplicationDataContainer.
On each platform, preferences are key/value pairs. The value can be of one of the primitive .NET types. Before understanding how preferences work, it is important to list the methods exposed by the Preferences class

Where to save .Net MAUI user settings

Create a new MAUI Application

You can open visual studio 2022 from your Windows or Mac machine. You must follow the below 3 steps to create a new MAUI application

Step 1: Select Create a new project

Step 2: Search the MAUI project template or choose Project Type > MAUI from the drop-down.

Step 3: Provide the configuration Details as a project name, Location, and Solutions name.

NET MAUI - app data storage options

Save Preferences

Save/ Set Preference will store simple value, preference having different key and value, preference key always string type, the value of preference must be one of the following types
  • Boolean
  • Double
  • Int32
  • Single
  • Int64
  • String
  • DateTime
Preferences are set by calling the Preferences. Set method, providing the key and value

 Preferences.Set(“KEY”,” Value”).


Get/ Default Preferences

In this example already saved the two-preference value, in the below statement will the get the value from existing preference or if preference value is not there automatic or return the default value.

Preferences.Get("Existing preferences key", Default Value);

The following code confirmed already saved preference key is available or not


Clear Preferences


Clear and remove will use for dropping the preference key and value, suppose if you are doing any log out or switching to a different user this will help to clear all the preference key and value.

Preferences.Clear();

Suppose if you want to remove a particular key preference in the mobile, you can use remove preference as like below

Preferences.Remove(“Name”);


Summary

The Preferences class is intended to store small pieces of information represented by primitive .NET types. If you need to locally save and retrieve more complex and structured data, a good option is to use a local database like SQL lite and you can refer below screen output for the preference sample application.

Screen 1: Show the first screen and display the default Date Time preference value in the label

Screen 2: After clicking on Register store the user name and the latest time in the preference

Screen 3: Display the existing preference value, if the user clicks on the logout option, the preference value becomes clear.

Building Mobile Apps with .NET MAUI
This article provides an understanding of VerticalStacklayout and HorzontalStackLayout using .NET Multi-platform APP UI (MAUI), which is a cross-platform framework for creating native mobile and desktop apps with C# and XAML

A StackLayout organizes child views in a vertically oriented or horizontally one-dimensional stack, but the Microsoft team introduced VerticalStacklayout and HorzontalStackLayout same as stack layout with improved a lot more performance and avoided unnecessary layout calculations being performed. this article will show a quick demo of VerticalStacklayout and HorzontalStackLayout.

.NET MAUI : VerticalStackLayout and HorizontalStackLayout Layout using Visual Studio 2022

Environment Setup

I have shared a details explanation of the MAUI Development environment setup and getting started with the first MAUI application in my previous article. Microsoft MAUI team continuously releases changes, so make sure you have updated the latest visual studio 2022 preview version.

.NET MAUI : VerticalStackLayout and HorizontalStackLayout Layout using Visual Studio 2022

Create a new MAUI Application

You can open visual studio 2022 from your windows machine. You must follow the below 3 steps to create a new MAUI application

Step 1: Select Create a new project

Step 2: Search the MAUI project template or choose Project Type > MAUI from the dropdown.

Step 3: Provide the configuration Details as a project name, Location, and Solutions name.

.NET MAUI : VerticalStackLayout and HorizontalStackLayout Layout using Visual Studio 2022

The generated templates contain one project with Android, IOS, Windows, Mac and Tizen.

.NET MAUI : VerticalStackLayout and HorizontalStackLayout Layout using Visual Studio 2022

HorizontalStackLayout

The Xamarin forms already have StackLayout organizes child views in a one-dimensional stack, either horizontally or vertically. The HorizontalStackLayout organizes child views in a one-dimensional horizontal stack and is a more performant alternative to a StackLayout.

In this example, we have a design registration screen with 3 important sections label control, an entry box, and an error label.

Add the HorizontalStacklayout instead of Stacklayout with orientation.

Many of them asked questions like, How to align a label and entry box horizontally same line label at the start and Entry at the end? You could set VerticalOptions of that two control to Start/Centre, then the control would align horizontally .


Label, Entry, and Error label add same as Xamarin Forms Design



Once you did the design, the output looks like below

.NET MAUI : VerticalStackLayout and HorizontalStackLayout Layout using Visual Studio 2022

VerticalStacklayout

The VerticalStackLayout organizes child views in a one-dimensional vertical stack and is a more performant alternative to a StackLayout with a vertical. Position and size of views is based on the HeightRequest, WidthRequest, HorizontalOptions and Vertical Options. The following example we used VerticalStackLayout for designs the screen. VerticalStackLayout used for displaying your control one by one.

The LayoutOptions is set via the HorizontalOptions or VerticalOptions properties on any View. They can be set to any of the following options: Start, Center, End, Fill, StartAndExpand, CenterAndExpand, EndAndExpand, FillAndExpand and you can add the following code as per below



The layout looks like the below with 3 controls

.NET MAUI : VerticalStackLayout and HorizontalStackLayout Layout using Visual Studio 2022

Nested VerticalStackLayout/HorizontalStackLayout

A VerticalStackLayou and HorizontalStackLayout can be used as a parent layout that contains nested child of both objects, and other child layouts.

You can see the below example XAML for nested layout, the more the nested layouts will impact your performance., if you are trying to add multiple levels, you can try choosing the correct layout control.



In this example, the parent VerticalStackLayout contains nested HorizontalStackLayout objects and adds the control set.

.NET MAUI : VerticalStackLayout and HorizontalStackLayout Layout using Visual Studio 2022

Summary

In this article, you have seen the demo .NET MAUI VerticalStackLayout and HorizontalStackLayout Layout and how different from stack layout using Visual Studio 2022, Thanks for reading, will share more Dotnet MAUI related articles in the upcoming days.

.Net MAUI is a cross-platform framework for creating native mobile and desktop apps with c# and XAML. You can refer to my previous article for getting started with the Dotnet MAUI application. Building iOS application in Windows machine Using Visual Studio 2022, Will do following two approaches for debugging and build the iOS application.
  1. Remote Host (Required Mac)
  2. Xamarin Hot Restart (Without Mac)
In this article, I will show Pair to Mac M1 Chip from windows machine for MAUI iOS app using Visual Studio 2022 preview. I am going to show a POC app with Visual Studio2022 preview, you can also use the same steps in Visual Studio 2019 or 2022++ version.

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

Mac M1 Chip Setup

Mac Setup is ready here with the following configuration, Upgraded macOS Monterey 12.0.1 version in the Apple M1 Pro Macbook.

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview


The Mac system installed Xcode 13.3 ++ and Visual Studio for mac. You have to open Xcode manually after installing so that it can add any additional components.

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

You must follow the below steps to enable Remote Host.
  1. Select the “System preferences
  2. Click on the Sharing pane.

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

You must configure remote login and follow the below configuration
  1. Remote login Set as “ON
  2. Configured to allow access for all users.
  3. If prompted, configure the macOS firewall.
Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

You must connect your Mac with the same Wi-Fi network or wired network.

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

You can click on the Computer icon to connect mac machine or select Tools > iOS > Pair to Mac.

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

If it is on the same network as the windows machine, the Mac should now be discoverable by Visual studio, if the Mac is still not discoverable, try manually adding a Mac.

Provide Mac name or Mac IP address which is in the remote Login preference on the Macbook.

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

At the prompt, enter your username and password for that machine after the IP address is entered in the above screen.

Pair to Mac uses these credentials to create a new SSH connection to the Mac, Remote Host will take care of automatically checking the connection and verifying the Mac machine setup, if any mismatch you will get the error popup and ask you resolve and retry.


Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview


When Visual Studio is connected to a Mac, that Mac's item in the Pair to Mac dialog displays an icon indicating that it is currently connected

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

You will be able to see the below screen automatically. All iOS simulators are loaded after the mac connected successfully and also able to see the computer icon indicated with a green icon.

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

If you have any issue verify in iOS setting a windows machine, On Visual Studio > Tools > options > Select the iOS setting.
  1. Verify the XCode path, make sure Xcode installed in the application folder from Mac machine
  2. Remote Simulation should be on, otherwise, Simulator won’t be displayed on windows machine


Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

Remote iOS Simulator shows up as a black screen

Completely unable to use the iOS Simulator for Windows 10, only happening when using an M1-based Mac. When using an Intel-based Mac, we can successfully use the iOS simulator.

A fix for this issue has been Microsoft implemented and is being prepared for release. Microsoft will update to all once it becomes available for download.

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

There is a workaround to force the simulator to load on the Mac M1, which works, but is certainly not a great solution and isn’t viable for many.

You can go to Tools->Options->Xamarin->iOS Settings and uncheck ‘Remote Simulator to Windows’.

Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

The MAUI application is ready to show on the iOS simulator from Mac M1 chip.


Xamarin MAUI: Pair to Mac M1 chip from Windows machine for iOS development using Visual Studio 2022 Preview

Summary

This article showed steps how to use Pair to Mac M1 chip to connect Visual Studio 2022 preview to a Mac build host, enabling Visual Studio 2022 preview developers to build iOS applications with MAUI


.Net MAUI is a cross-platform framework for creating native mobile and desktop app with c# and Xaml. In my previous article, we did warn welcome to Dotnet MAUI and shared information about the History of Xamarin.

MAUI as everybody already knows is a name for a new upgrade solution as a Multi-platform APP UI framework for building native cross-platform apps with .Net for android, iOS, macOS, and Windows. I am going to show how to create, build and debug the First MAUI application using Visual Studio 2022.

NET MAUI is the .NET Multi-platform App UI, a framework for

MAUI and other third-party framework teams started working on support for upgrading the app and old NuGet package to MAUI. MAUI will also provide you support for building the apps in different modern patterns and frameworks MVVM, MVU and RxUI.

.NET MAUI IDE


Microsoft provided 3 fantastic IDE Tools to create and develop apps with .NET MAUI and the happy news is MAUI is an open source.
  1. Visual Studio
  2. Visual Studio for Mac
  3. Visual Studio Code

Visual Studio 2022

On Windows or Mac machines you can use Visual Studio Code or Visual Studio/ VS for Mac for development. You will need the visual studio 2022 17.1.0 preview version. Microsoft released Visual studio 2022 version 17.0 in Nov month, but MUAI is still in preview so you can start to install visual studio 2022 17.1.0 preview version to create your first MUAI application.

Build your first .NET MAUI app

After installation success, Open the Visual Studio IDE

What .NET MAUI Means for Xamarin Developers

In this sample demo application, I am  going to show Android, iOS, and Windows app using MAUI, so Get started with “Create New Project”

What is .NET MAUI, and How Does it Differ from Xamarin?

On the new Project template, select project type as an” MAUI” and you will all the MAUI preview template, if you are not finding the MAUI template means, you have not installed the latest preview version so make sure you have installed the latest preview version 17.1 ++.

Microsoft Replaces Xamarin Toolkits with New .NET MAUI

In the Configure your new project window, name your project, choose your project location where you need to save, and click the Create button

The future of Xamarin: .NET MAUI

MAUI Solutions Structure

After clicking on Create, MAUI solutions default template loaded with all the related MAUI NuGet packages. There is a single project with different platform folders and resources.

Creating first .Net MAUI project

MainPage.XAML

The main page, whichever design, will support all other platforms as well, and also Main Page XAML build action modified in MAUI app.

Main Page.Xaml build action modified with MAUIXAML, make sure Xaml Build action is correct.

Right click on the XAML page >>Properties>>BuildAction of XAML Page to MauiXaml.

Creating new .NET 6 MAUI project

.NET Generic Host


The Worker Service templates, create a .NET Generic Host, HostBuilder. The Generic Host can be used with other types of .NET applications, such as Console apps.

Maui Program class enables apps to be initialized from a single location, and provides the ability to configure fonts, services, and third-party libraries.

iOS, Android, windows, and all the platform entry point calls a CreateMauiApp method of the static MauiProgram class that creates and returns a MauiApp, while lunch the application

.NET MAUI: How MAUI Will it impact on Xamarin Native applications?

Application Class

The App class derives from the Application class

Workload Repair failed: `dotnet workload repair - MAUI



Resources

The resources are a good improvement in MAUI. The AppIcon, image and font folder will be available under the MAUI project and it is just a single SVG, Looks like Maui will just automatically take care of generating all the different icon sizes for different devices.


How do I determine where the error is when I check MAUI compatibility with maui-check?How do I determine where the error is when I check MAUI compatibility with maui-check?

Run IOS App

Building MAUI iOS applications requires access to Apple's build tools, which only run on a Mac. Because of this, Visual Studio 2022 must connect to a network-accessible Mac to build iOS applications.

You must install the Xcode 13.1++ version on the Mac machine before connecting Visual Studio 2022 to the Windows machine.

Windows Configuration 

  1. Connect same wifi network
  2. Download and install Visual Studio 2022 with MAUI

Mac Configuration

  1. Connect same wifi network
  2. Install Xcode 13.1 ++
  3. On Network preference > switch on Remote login
Pair to Mac machine from windows

Pair to Mac for Xamarin.iOS Development

Program.cs

Program class file is the main entry file on IOS app and executes the main method of the application, here you can define your custom app delegate file and other configuration files

Appdelegate.cs

Each platform will call MauiProgram static class for initialize. On iOS will call as below

You can select iOS simulator and device and click Run icon for executing the application



The out as like below



Run Android App

The android application, MainApplication.cs will execute first, it will call the MauiProgram static class initially as like below
 
You can select android simulator or device as below, press F5 to run the application
 


The output like below



Run Windows App


The Windows application executes  App.xaml.cs file first, it will call the MauiProgram static class initially as like below

Select the device and run the Application



MAUI Windows device

Demo Video

I have shared a recorded demo video with two versions, English and Tamil. It will help you to understand more about creating, building, and debuging the First MAUI application.

English Demo Video



Tamil Demo Video 



Hope this article is very useful for you, If you have any questions/ feedback/ issues, please write in the comment box

Featured Post

How to use .Net MAUI Secure storage in your Mobile application ( iOS, Android and Windows )

.NET MAUI provides different techniques for local storage, in my previous article, explain preferences. This article will explain how to use...

MSDEVBUILD - English Channel

MSDEVBUILD - Tamil Channel

Popular Posts