/TrailBlazor

Blazor WASM single-page app with Firebase login capabilities.

Primary LanguageHTML

TrailBlazor: Blazor Standalone WASM with Firebase Authentication

By Chelsea Becker and Eric Endsley, 4/27/21

Introduction/Project Overview

This project was developed by Netrush interns in Spring of 2021 for the purpose of demonstrating authentication with Firebase and in a standalone client-side Blazor Web-Assembly App. The application succesfully utilizes JSInterop to makes calls to Firebase authentication service, and returns Firebase user data to a custom AuthStateProvider which authorizes that user with the Identity functionality built into Blazor pages (e.g. AuthorizeView, UserRoles, @context.Identity, et cetera). Currently the only login route uses email and password with no email verification, but other Firebase auth routes should be easy to integrate following the Firebase documentation. JWT tokens generated by Firebase are stored in 'Blazored' LocalStorage which may then be used to further authenticate the users call to other APIs and services.

The app runs a timer to automatically refresh and store a new Firebase ID token for an authenticated user prior to the token's expiration, every 50 minutes. There is a button on the main landing page which automatically triggers this refresh functionality and stores a new token on cilck. The page also runs a timer to automatically sign a user out and expire their authenication after a specified period of time. The page includes a hardcoded demonstration of an "Admin" user role, which assigns an Admin user role claim to a Firebase user with a specified uid (this uid is hardcoded and corresponds to a user with firebase login info {email: "testchel@gmail.com", password: "Blahblah1@" }), and enables this user to view an Admin page that other users cannot access. In practice the hard-coded process to check uid would be replaced with a database query, for example to NRDB.

Languages & Technologies Used

  • Blazor Web Assembly
  • .NET 5.0 (TrailBlazor) and .NET Core 3.1 (FirebaseFunApp)
  • C#
  • JavaScript
  • Firebase
  • Blazored Local Storage
  • RadZen
  • Bootstrap (from Blazor template)

Setup

Before using the application, replace the Firebase config secrets in index.html with a new Firebase account.

What Works Best

  • Using a custom AuthStateProvider which recieves data from a successful call to Firebase
  • Using 'Blazored' local storage to pass values accross application (tokens and userId)

Things We Tried That Didn't Work

  • Using Blazor WASM built-in auth (OIDC)
  • Checking tokens via Firestore (unnecessary because Netrush doesn't use Firestore)
  • Adding Firebase Admin Auth SDK (needed server-side startup.cs)
  • Passing ID & refresh token string values through static properties across application -- used Blazored Local Storage

Things We Tried That Weren't Optimal

  • Custom authorization (ASP.NET hosted) using LocalDb
  • Attempting to sync userdata in a LocalDb to Firebase in a dual-auth scheme.