SSO login using Launcher in .NET MAUI

 Some of the scenarios require to open the external/system browser to perform oAuth 2.0 login and then receive the auth code via redirect URL scheme. To open the system browser in .NET MAUI we can use the Launcher functionality. Here’s a complete explanation and sample code for Single Sign-On (SSO) using Launcher.

Before starting with our implementation we have to set-up some prerequisites:

• Registered app in Azure AD
• Redirect URI like webauthenticator://callback
• OAuth 2.0 with PKCE

Set Up Platform-Specific URI Scheme

Android: WebAuthenticatorCallbackActivity .cs

iOS: Info.plist

Create the Authorization Request

Create the auth request using the Launcher functionality to perform SSO login

MainPage.xaml.cs

Helper methods like PkceUtil.CreateCodeVerifier() and PkceUtil.CreateCodeChallenge() are available in my Git repository LauncheroAuth/PkceUtil.cs

Handle Redirect in OnAppLinkRequestReceived

App.xaml.cs

Exchange Code for Access Token

To respond to an Android and iOS lifecycle delegate being invoked, call the ConfigureLifecycleEvents method on the MauiAppBuilder object in the CreateMauiapp method of your MauiProgram class.

Sample code is available in this Git repo — https://github.com/GovardhanNag/oAuthUsingLauncher.git

Disable Dark mode in .NET Maui

Some applications need to be in Light mode even the device is in Dark mode, in that cases we have to override the Dark mode feature and display only the Light mode in our applications. There are many ways to do that, here are the possible ways to disable Dark mode.

Use the below code snippet in App.xaml.cs file in the constructor:

Application.Current.UserAppTheme = AppTheme.Light;

If this doesn't work then use the platform specific code to disable the Dark mode.

Dark mode in iOS

Add the following key into the Info.plist in Platform/iOS folder

<key>UIUserInterfaceStyle</key>
<string>Light</string>

Dark mode in Android

In MainActivity.cs add the following into the OnCreate method:

protected override void OnCreate(Bundle? savedInstanceState)
{
base.OnCreate(savedInstanceState);
//For Android API under 31
AppCompatDelegate.DefaultNightMode = AppCompatDelegate.ModeNightNo;
//For Android API 31+
var uiModeManager = (UiModeManager)GetSystemService(UiModeService);
uiModeManager.SetApplicationNightMode(1);
}

Rounded editor field using handlers in .NET Maui

Customizing the UI elements is challenging in app development when we are using cross platform mobile app development. UIs will be different in both the platforms but as a cross platform app developer they have to write a custom code to match the UI elements in both the platforms.

This customization was implemented using Custom Renders in Xamarin.Forms framework. Now in .NET Maui they are called as handlers. There are many was to write handlers in Maui, for implementing rounded editor we use a  custom controls.Handlers are global, to customize a specific Editor control on a page that contains multiple Editor controls, you should first subclass the Editor control.

CustomEditor

After creating the mappers for your handler, you must provide handler implementations on all platforms. This can be accomplished by adding partial class handler implementations in the child folders of the Platforms folder.

Create the platform controls in Android

CustomEditorMapper

Create the platform controls in iOS

CustomEditorMapper

Register the handler

A custom control and its handler must be registered with an app, before it can be consumed. This should occur in the CreateMauiApp method in the MauiProgram class in your app project, which is the cross-platform entry point for the app:

MauiProgram

Consuming custom controls in XAML file:

MainPage.xaml

Final outcome of this implementation is here:

Complete project can be found here: https://github.com/GovardhanNag/EditorRenderer.git

Rounded entry field using handlers in .NET Maui

Customizing the UI elements is challenging in app development when we are using cross platform mobile app development. UIs will be different in both the platforms but as a cross platform app developer they have to write a custom code to match the UI elements in both the platforms.

This customization was implemented using Custom Renders in Xamarin.Forms framework. Now in .NET Maui they are called as handlers. There are many ways to write handlers in Maui, for implementing rounded entry we use a  customized control approach. Handlers are global, to customize a specific Entry control on a page that contains multiple Entry controls, you should first subclass the Entry control.

CustomEntry

You can then customize the EntryHandler, via its property mapper, to perform the desired modification only to CustomEntry instances:

App.xaml.cs

If the handler customization is performed in your App class, any CustomEntry instances in the app will be customized as per the handler modification.
Consuming custom controls in XAML file:

MainPage.xaml

Final outcome of this implementation is here:

Complete project can be found here: https://github.com/GovardhanNag/EditorRenderer.git

Device ID from iOS and Android platforms using .Net MAUI

In most of the scenarios app developers require unique device Ids to identify the duplicasy of their apps, or to encrypt their data with salt key as device Ids. So to get these device Id's we have to write a platform specific code in .NET Maui. In Xamarin.Forms we rely on Dependency Services to write the platform specific code, but in .NET Maui this can be achieved by creating partial classes. Here I'll explain step by step procedure for obtaining device Id's from partial class.

Cross platform partial class

Create a partial class and partial method, that will be implemented in platform specific partial classes.

 

GetDeviceInfo - Cross platform

With the GetDeviceID method we should obtain device Id's from each platform. 
Note: all the partial classes should have the same namespace, even though they are created in different folders, their namespace should match each other.

Android partial class 

Navigate to Platform\Android folder in the project solution and create another partial class.

GetDeviceInfo - Android

iOS partial class 

Navigate to Platform\iOS folder in the project solution and create another partial class.

GetDeviceInfo-iOS

Here is how we call the platform specific partial method in our MainPage.xaml.cs file.

 

MainPage.xaml MainPage.xaml.cs

Finally the outcome of this implementation is here:

iOS Device id

Android Device Id

Complete project link is here https://github.com/GovardhanNag/DeviceDetails.git

Count Down Timer for re-sending OTP in Xamarin.Forms

This blog demonstrates how to create a count down timer in Xamarin.Forms.

In one of my application I required this feature, so I thought of sharing that solution with others. My requirement was to validate the OTP and to avail the resend button after some time period, as you can see in the other applications. So with the help of Device.StartTimer and along with some logic I have created this sample application.

Here I have taken the countdown time for 10 secs, and when the time reaches to 0 sec, the resend button will enable. I have shared the code in github and here is the simple demonstration of the app.

Github source code link : https://github.com/GovardhanNag/CountDownTimer-Xamarin.Forms

Accordion ListView implementation in Xamarin.Forms

Purpose of this blog is to implement listview inside another listview, technically its called as Accordian ListView or Expandable ListView. I didn't find any relevant or useful plugin to implement this in my project. While surfing internet, I found this link https://xamarinexplorer.com/2018/02/17/accordion-listview-in-xamarin-forms/ which helped me to incorporate accordion listview in my project.

In the above reference link, Author has demonstrated the accordion by implementing 2 levels of listview. As per my project requirement that was not sufficient because, my project demanded 3 levels of listview and also header for each listview. So I tried to implement the required extra features in my project with the example present in the above reference link. And mean while I thought of creating a similar app with 3 levels of listview and with header for each listview, so that it may help other developers who are interested in implementing these addition features.

I tried implementing accordion listview both in iOS and Android platforms. Please find the screen recording below:

 

For source code please refer my github link https://github.com/GovardhanNag/AccordionListView-Xamarin.Forms

Reference:

https://xamarinexplorer.com/2018/05/28/animated-accordion-listview/

https://xamarinexplorer.com/2018/02/17/accordion-listview-in-xamarin-forms/