SinghaSpace.Razor 1.6.0

SinghaSpace utility libraries for .net

Features

• Firebase Auth On Blazor
  • Support Firebase UI
  • Google, Email, Email link, LINE and custom authentication providers
• Google Sheet Services (currently supports reading public sheets only)
• More features coming soon...

Firebase Auth Blazor

Setup

1. Install NuGet package

dotnet add package SinghaSpace.Razor

2. Add service in Program.cs

builder.Services.AddSinghaSpaceRazorService(new FirebaseSettings()
{
    FirebaseConfig = new FirebaseConfig
    {
        ApiKey = ApiKey,
        AuthDomain = AuthDomain,
        DatabaseURL = DatabaseURL,
        ProjectId = ProjectId,
        StorageBucket = StorageBucket,
        MessagingSenderId = MessagingSenderId,
        AppId = AppId,
    },
    DebugMode = true,
    UseEmulator = false
});

3. Add JavaScript and CSS in index.html or _Host.cshtml

<script src="_content/SinghaSpace.Razor/bundle.js"></script>

4. Add using directive in _Imports.razor

@using SinghaSpace.Razor.Components

Usage

1. Inject Firebase service into your components

@inject FirebaseBlazor Firebase

2. Used

As Component-based

<FirebaseAuthUi Context="ctx" Config="_config">
    <button class="btn btn-primary" @onclick="@(async () => { await ctx.SignOut("/auth"); })">
        @ctx.LoggedIn?.User.DisplayName Sign out
    </button>
</FirebaseAuthUi>

As programmatically

<button @onclick="@(_ => Firebase.SignInWithPopup("google.com"))">
    Login via google.com
</button>

3. Configure authentication providers

var config = new FirebaseUiConfig()
{
    SignInSuccessUrl = "/redirect-path",
    SignInOptions = new List<FirebaseAuthProvider>()
    {
        new GoogleAuthProvider(),
        new EmailAuthProvider(),
        new LineAuthProvider()
        {
            Scopes = ["profile"],
            CustomParameters = new Dictionary<string, object>()
            {
                { "prompt", "consent" }
            }
        }
    }
};

4. Create custom authentication provider

public class CustomAuthProvider : FirebaseAuthProvider
{
    public CustomAuthProvider() : base("custom.com")  // provider ID
    {
        // Configure provider options
        Name = "Custom Provider";  // Display name
        ButtonColor = "#FF0000";   // Button background color
        IconUrl = "path/to/icon";  // Provider icon URL

        // Add custom scopes
        Scopes = new[] { "profile", "email" };

        // Add custom parameters
        CustomParameters = new Dictionary<string, object>()
        {
            { "prompt", "select_account" },
            { "custom_param", "value" }
        };
    }
}

// Usage in config
var config = new FirebaseUiConfig()
{
    SignInSuccessUrl = "/redirect-path",
    SignInOptions = new List<FirebaseAuthProvider>()
    {
        new CustomAuthProvider()
        {
            // Override default options if needed
            Scopes = ["custom_scope"],
        }
    }
};

Google Sheet Services

Usage

1. Read as CSV

var csvData = await GoogleSheetsService.GetCsvFromPublicSheetAsync(sheetId, sheetName);

2. Read as typed objects

var list = await GoogleSheetsService.GetFromPublicSheetAsync<T>(
    sheetId,
    sheetName,
    reader => { reader.Context.RegisterClassMap<TMap>(); }
);

Example

// Reading movies from a sheet
var movies = await GoogleSheetsService.GetFromPublicSheetAsync<Movie>(
    "your-sheet-id",
    "Sheet1",
    reader => { reader.Context.RegisterClassMap<MovieMap>(); }
);

License

MIT