Angular Firebase Dashboard
Angular app with Firebase Authentication that displays a dashboard with login, logout, forgot-password etc. buttons & routing
User details stored in a Cloud Firestore database
Tutorial code from D-I-Ry with some modifications - see π Inspiration below
Note: to open web links in a new window use: ctrl+click on link
π Table of contents
π General info
Firebase authentication used to identify user
This is not a practical auth. dashboard - too many buttons displayed. I had to modify the code not to display login and logout button together, for example.
π· Screenshots
πΆ Technologies
πΎ Setup
Create project in Firebase console then add email authentication.
npm i
to install dependencies
npm prune
to remove unused npm modules
ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
ng update
to update Angular
π» Code Examples - by D-I-Ry with some modifications
login function that signs in user with details from html form
loginUser ( email : string , password : string) : Promise < any > {
return this . afAuth
. signInWithEmailAndPassword ( email , password )
. then ( ( ) => {
console . log ( 'Auth Service: loginUser: success' ) ;
this . router . navigate ( [ '/dashboard' ] ) ;
} )
. catch ( ( error ) => {
console . log ( 'Auth Service: login error code' , error . code , error ) ;
if ( error . code ) return { isValid : false , message : error . message } ;
return { isValid : true , message : 'no errors :-)' } ;
} ) ;
}
π Features
'Verify email' actually works and sends an email to the user with a link to click on. Refresh required to change boolean state on screen. Firebase backend code does make things easier.
π Status & To-Do List
Status: Working
To-Do: Nothing
π Inspiration
π License
βοΈ Contact