firebase_dart_ui

A dart wrapper for FirebaseUI, a Javascript library that provides sign on flows. This library provides an Angular Dart wrapper around FirebaseUI.

A demonstration application is hosted online here

Usage

The Angular component <firebase-auth-ui> handles Firebase Authentication for your application.

Add this component to your landing page for your SPA application.The component is visible on the page (display is block ) if the user has not been authenticated. The user is presented a dialog with the various social login and email providers that have been configured in your Firebase console. Once the user has authenticated, the components display attribute is set to none making it invisible.

Important

You must add these lines to your index.html <head> section:

<script src="https://www.gstatic.com/firebasejs/x.y.z/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/x.y.z/firebase-auth.js"></script>

<script src="https://www.gstatic.com/firebasejs/ui/x.y.z/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/x.y.z/firebase-ui-auth.css" />

The x.y.z versions above are replaced with the current supported versions. Please see the example/ application.

Running the demo

With DDC:

cd example
webdev serve
# open localhost:8080

To use your our own Firebase project to test, you must edit main.dart and enter in your project credentials. Also edit example/.firebaserc and enter your project name.

To build and deploy the example application

cd example
webdev build
firebase deploy

Known Issues