Xamarin Shell and Authentication

The Xamarin Shell is a new UI page layout available starting Xamarin Forms v4.0. This post presents a method of handling common on-boarding scenarios using the Xamarin Shell.

We have upgraded JWT Tokens Sample to demonstrate the method.

Revisions

  • 2019-09-22 : First draft.
  • 2019-10-22 : Changes to page flow adding an initial Bootpage.

What can be done with Shell?

The name “Shell” gives a hint to its creators intention. The new layout provides a single shell or container where the UI can begin and spread to include other features. The layout is composed of a flyout page, tabs, menus, styling and navigation. It is an all-encompassing alternative to the way how the UI can be structured.

The Shell sample illustrated below is from the David Ortinau’s Blog. The blog post includes links to more than 100 other samples demonstrating the Shell in action.

Xamarin Shell Sample UI

Those who are familiar with Angular JS will feel quite at home with the new page navigation. Routes are used instead of a stack for page navigation.

There are merits in both methods. The stack makes it easy to trace back to a root where the navigation started. Whereas the page routes do not consume as much memory since a stack pages aren’t always maintained.

User Authentication

The Shell is created in the Xamarin Forms Application class as follows.

MainPage = new AppShell();

This launches and opens the shell. However, it does not give an opportunity to authenticate the user prior to launching the home page. One way is to authenticate the user prior to launching the shell as follows;

For example;

MainPage = new LoginPage();

// Authenticated!! - now open the shell

MainPage = new AppShell();

However, the transition does not appear smooth visually. A better alternative is to navigate to the login page declared within the Shell itself.

The Boot page is opened first. The user is routed to the on-boarding page if a valid JWT is not found.

API Security App

We have updated the JWT Sample to use the shell. Is this a better option? Is there another way? Let me know in the comment section below.

The link to the source code is provided.

The Demo

Conclusion

The Sample Code provides Xamarin forms code and the .NET Core server that authenticate users using JWT Tokens.

Further Information