Xamarin Forms Simple Login With Rest API

This project is one of the simplest ways how to implement login system using Web Service Rest API.

iOS Preview

// Android Preview soon…

// UWP Preview soon…

Before we begin, we need to prepare our Web Service.

I created an optional prerequisite in creating your basic web service api using ASP.NET Web API.

Here’s the link: Steps in Creating Basic Asp.Net Web Service API

In this sample web service project, I included these following model class properties:

1
2
3
4
5
6
7
public class UserDetailCredentials
{
    public int Id { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }
    public string Name { get; set; }
}

When you are done creating your web service, you can now proceed in creating our Xamarin Cross Platform Mobile App project.

1.0 Creating the project

1.1 Go to File -> New -> Project (Ctrl+Shift+N)

1.2 Choose Templates -> Visual C# -> Cross Platform and rename the project. (Here I named my project as CrossPlatformBasicLoginSystem) and then Click the “OK”

1.3 A white dialog box will appear and you need to choose the following: Template Blank App, Forms in UI Technology and PCL in Sharing. Then click “Accept” to finalize the project creation.

Now you have successfully created your project. This includes the following projects summary:

Main Project Portable (PCL)

Project.Droid (Android)
Project.iOS (iOS)
Project.UWP (UWP)
// other windows platform projects

2.0 Installation of nuget packages

2.1 Install the following nuget packages at the main project solution:

You can use either the Manage Packages for Solution or Manually Type in the packages in the Package Manager Console.

Note: The simplest way is to just install the Microsoft.Net.Http since Microsoft.BCL & Microsoft.Bcl.Build are part of its dependencies.

2.2 Create the following folders in the Portable Project

Models
RestAPIClient
ServicesHandler
Views

3.0 Creating the Model Class

3.1 Right click the Models Folder -> Add -> Class… In this example, we name our class model as “UserDetailCredentials.cs” and click “Add”

3.2 Add the sample properties for our login details

1
2
3
4
5
6
7
8
9
10
11
public class UserDetailCredentials
{
   [JsonProperty("id")]
   public int Id { get; set; }
   [JsonProperty("username")]
   public string Username { get; set; }
   [JsonProperty("password")]
   public string Password { get; set; }
   [JsonProperty("name")]
   public string Name { get; set; }
}

3.3 Build the solution (Ctrl+Shift+B)

4.0 Adding our code snippet in our web service api controller

4.1 Go to your web service api controller and paste this following code snippet. In this code, we create a new HTTP Get Request with a custom route request of api/UserCredentials/username={username}/password={password}

1
2
3
4
5
6
7
8
9
10
11
12
[HttpGet]
[Route("api/UserCredentials/username={username}/password={password}")]
public async Task<IHttpActionResult> UserDetailsLogin(string username, string password)
{
   UserDetailCredentials login =
                await db.UserDetailCredentials.Where(x => x.Username == username && x.Password == password).SingleOrDefaultAsync();
   if (login == null)
   {
      return NotFound();
   }
   return Ok(login);
}

5.0 Creating the Rest Client class

5.1 Right click the RestAPIClient Folder -> Add -> Class… In this example, we name our class model as “RestClient.cs” and click “Add”

5.2 Inside the RestClient class, include this namespace

1
using System.Net.Http;

5.3 And paste this code snippet that I created.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class RestClient<T>
{
   private const string MainWebServiceUrl = "http://MainHost/"; // Put your main host url here
   private const string LoginWebServiceUrl = MainWebServiceUrl + "api/UserCredentials/"; // put your api extension url/uri here

   // This code matches the HTTP Request that we included in our api controller
   public async Task<bool> checkLogin(string username, string password)
   {
      var httpClient = new HttpClient();
      // http://MainHost/api/UserCredentials/username=foo/password=foo. The api value and response value should match in order to return a true status code. 
      var response = await httpClient.GetAsync(LoginWebServiceUrl + "username=" + username + "/" + "password=" + password);

      return response.IsSuccessStatusCode; // return either true or false
   }
}

6.0 Creating the Portable service class

6.1 Right click the ServicesHandler Folder -> Add -> Class… In this example, we name our class model as “LoginService.cs” and click “Add”

6.2 Inside the LoginService class, paste this following code snippet.

1
2
3
4
5
6
7
8
9
10
// fetch the RestClient<T>
RestClient<UserDetailCredentials> _restClient = new RestClient<UserDetailCredentials>();

// Boolean function with the following parameters of username & password.
public async Task<bool> CheckLoginIfExists(string username, string password)
{
   var check = await _restClient.checkLogin(username, password);

   return check;
}

7.0 Creating our Xaml View Page

7.1 Right click the Views Folder -> Add -> New Item… -> Visual C# -> Cross-Platform and choose Forms Xaml Page. In this example, we name our xaml page as “LoginPage.xaml” and click “Add”

7.2 Modify the xaml page. Here I created a basic sample design of the login.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<StackLayout Padding="30"
             VerticalOptions="Start">
   <Label Text="Username"
          HorizontalOptions="Center"/>
   <Entry Text=""
          x:Name="EntryUsername"/>
   <Label Text="Password"
          HorizontalOptions="Center"/>
   <Entry Text=""
          x:Name="EntryPassword"
          IsPassword="True"/>
   <Button Text="Login"
           TextColor="White"
           BackgroundColor="#22A7F0"
           x:Name="ButtonLogin"/>
</StackLayout>

7.3 Adding clicked xaml clicked even handler (Clicked=”ButtonLogin_Clicked”) in the button login with a name identifier of x:Name=”ButtonLogin”

1
2
3
4
5
<Button Text="Login"
        TextColor="White"
        BackgroundColor="#22A7F0"
        x:Name="ButtonLogin"
        Clicked="ButtonLogin_Clicked"/>

Once the Xaml event has been created, automatically our .cs event handler will be created too.

1
2
3
4
private void ButtonLogin_Clicked(object sender, EventArgs e)
{
    // code goes here
}

8.1 Change the event handler to async by adding “async” before the void and “await” inside the event handler.

What does “async” and “await” do, is that it will optimize the waiting thread of the request.

1
2
3
4
private async void ButtonLogin_Clicked(object sender, EventArgs e)
{
    // await code goes here
}

8.2 Reference the login service to the login page class.

8.3 Add the code snippet inside the login event

1
2
3
4
5
6
7
8
9
10
11
12
13
14
private async void ButtonLogin_Clicked(object sender, EventArgs e)
{
   LoginService services = new LoginService();
   var getLoginDetails = await services.CheckLoginIfExists(EntryUsername.Text, EntryPassword.Text);

   if (getLoginDetails)
   {
      await DisplayAlert("Login success", "You are login", "Okay", "Cancel");
   }
   else
   {
      await DisplayAlert("Login failed", "Username or Password is incorrect or not exists", "Okay", "Cancel");
   }
}

9.0 Running the app

9.1 Lastly, change your App.cs and target the MainPage as equal to our login page

1
2
3
4
public App()
{
   MainPage = new LoginPage();
}

9.2 Run the app

Here’s the Github Link For This Post

Give me a ★ :D

Thank you for reading. I hope you’ve learned from me. Feel to comment below!

Read my blog