.NET core MAUI with SQLite Database Login Page example

Sangeetha S
1w
516
0
3

Article

We will discuss MAUI (Multi-platform App UI) with SQLite DB basic app creation, with a login page here. Logic will build with a SQLite helper class by using the SQLite Database. First, will create a MAUI App project in Visual Studio 2022. The project will create one main page like the one shown below.

MAUI App

After that Will create some Basic Login and register xaml page. Then will create SQLiteHelper class for Database activity. Install Microsoft.Data.Sqlite pakage from NuGet package.

public class SQLiteHelper
{
    private string dbPath;
    public SQLiteHelper()
    {
        dbPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "users.db");
        InitializeDatabase();
    }
    private void InitializeDatabase()
    {
        using var connection = new SqliteConnection($"Data Source={dbPath}");
        connection.Open();
        var command = connection.CreateCommand();
        command.CommandText =
        @"
            CREATE TABLE IF NOT EXISTS Users (
                Id INTEGER PRIMARY KEY AUTOINCREMENT,
                Username TEXT NOT NULL,
                Password TEXT NOT NULL
            );
        ";
        command.ExecuteNonQuery();
    }
}

public partial class LoginPage : ContentPage
{
    private SQLiteHelper dbHelper = new();
    public LoginPage()
    {
        InitializeComponent();
    }
    private void OnLoginClicked(object sender, EventArgs e)
    {
        if (dbHelper.ValidateUser(UsernameEntry.Text, PasswordEntry.Text))
            DisplayAlert("Success", "Login successful!", "OK");
        else
            DisplayAlert("Error", "Invalid credentials.", "OK");
    }
    private void OnGoToRegisterClicked(object sender, EventArgs e)
    {
        Navigation.PushAsync(new RegisterPage());
    }
}

Go to App.xaml.cs page adds the Login page as main page like launch view as mention below example

namespace MauiApp1
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            //MainPage = new AppShell();
            MainPage = new NavigationPage(new LoginPage());
        }
    }
}

Output