Firebase Angular Skeleton - Quickly create an application with a fully functional authentication, authorization and user management system.

Overview

FAngS - Firebase Angular Skeleton

FAngS lets you quickly create an application with a fully functional authentication, authorization and user management system. In less than an hour you can easily spin up an environment for your next project that lets you spend more time focusing on what provides value to your end users instead of the complex features they will take for granted.

header

Without any custom code being written, FAngS allows your end users to sign up, sign in, edit their profile, reset their password and change their email. With a few minor changes to the styles referenced by all of the components in FAngS, you will have your logo, theme colors and application name in all the right places. Its that simple to kick start your next project. FAngS comes ready with 100% testing and documentation coverage so you can feel confident in where you are starting from.

Technologies Used

Technology Version
Angular 13.1.1
Node 12.22.5
Firebase Functions 3.11.0

Getting Started

Getting the project set up is simple and will only take a few minutes. This guide assumes you have an understanding of git. Check out the git documentation if you don't.

  1. The first thing to do is clone the project. I would recommend forking the project first, then cloning if you plan to use it as a base for your next project.
    git clone https://github.com/RyanLefebvre/FAngS
  1. Next you'll need to download and install node. Try to match or exceed the version the project is currently using. To verify that you have successfully installed node, you can check the version from the command line.
    node --version
  1. The next step is to create a Firebase Project. Go to the Firebase console and click on the Add project button.

  2. Once your project is created, you will be redirected to that project's management console. You have some set up that needs to be taken care of. First, go to the authentication tab underneath build. You can see it on the sidenav on the left side of the window. Then click on the Set up sign-in method button. At a minimum, select the option called Email/Password and enable it.

auth

  1. Next is your database, go to the Firestore Database tab underneath build. You can see it on the sidenav on the left side of the window. Click on the Create Database button.

  2. Now that the database is created, we need to add the Users table. Click on start collection and create a collection named Users. It will force you to create a document within the collection but its okay to just use the auto-id button and delete the document after if you don't want the one junk document in your database.

db

  1. Go back to the Project Overview by clicking on the house icon above the Build section on the sidenav. You have to add an app to the project to generate client secrets. Choose the web option. During this process you'll be given a Firebase Config object in JSON format. Save this as we will need it again later. It should look something like below.
    const firebaseConfig = {
            apiKey: "XXXXXXXXXXXXXXXXXXX",
            authDomain: "XXXXXXXXXXXXXXXXXXX",
            projectId: "XXXXXXXXXXXXXXXXXXX",
            storageBucket: "XXXXXXXXXXXXXXXXXXX",
            messagingSenderId: "XXXXXXXXXXXXXXXXXXX",
            appId: "XXXXXXXXXXXXXXXXXXX",
    };
  1. The last thing to do in the Firebase Console is create a service account for the cloud functions. Click on the gear icon next to Project Overview then select Project settings and go to the Service accounts tab. Click on the button that says Generate new private key. This will trigger a download of a JSON file, open it up and inside you'll see something like below. Make sure to save this file for later.
    {
        "type": "XXXXXXXXXXXXXXXXXXX",
        "project_id": "XXXXXXXXXXXXXXXXXXX",
        "private_key_id": "XXXXXXXXXXXXXXXXXXX",
        "private_key": "XXXXXXXXXXXXXXXXXXX",
        "client_email": "XXXXXXXXXXXXXXXXXXX",
        "client_id": "XXXXXXXXXXXXXXXXXXX",
        "auth_uri": "XXXXXXXXXXXXXXXXXXX",
        "token_uri": "XXXXXXXXXXXXXXXXXXX",
        "auth_provider_x509_cert_url": "XXXXXXXXXXXXXXXXXXX"
    }
  1. Go back to the project you cloned in Step 1. Navigate to the src directory and create a subdirectroy called environments. In the environments subdirectory create a file called environment.ts. In this file create an object named environment that is exported. The object should have a key called production which is either true or false and one called firebase. The value of the firebase key in the environment object should be the contents of the firebase config object from step 7.
    cd FAngS/app/src
    mkdir environments
    cd environments
    touch environment.ts
Inside environment.ts you would have
    export const environment = {
    production: false,
    firebase: {
        apiKey: 'XXXXXXXXXXXXXXXXXXX',
        authDomain: 'XXXXXXXXXXXXXXXXXXX',
        projectId: 'XXXXXXXXXXXXXXXXXXX',
        storageBucket: 'XXXXXXXXXXXXXXXXXXX',
        messagingSenderId: 'XXXXXXXXXXXXXXXXXXX',
        appId: 'XXXXXXXXXXXXXXXXXXX',
      },
    };
  1. Now install the projects frontend dependencies using NPM
    npm ci
  1. Verify that the frontend unit tests work and show 100% testing coverage using the command below. The output from karma will show you the coverage in your terminal. You should also see a coverage directory that was generated inside the app directory. It contains an istanbul report with more information. If you open the index.html file inside the coverage directory in a browser you can see exactly which files are covered.
    npm run testWithCoverage
  1. Verify that the frontend documentation works and show 100% coverage using the command below. You should see a documentation directory that was generated inside the app directory. If you open the index.html file inside the documentation directory in a browser you can access the projects documentation.
    npm run generateDocumentation
  1. Now that the frontend is good to go, you need to set up the firebase cloud functions for the project. This is most easily done using the firebase-cli. If you haven't already, install the cli which is part of the firebase-tools package. Using the CLI, you will have to login, choose to use the project, then initialize cloud functions. When prompted, be sure to choose TypeScript as the functions language and be absolutely sure not to overwrite any existing files when it asks you. That will definitely break things if you start overwriting those files. If you aren't sure what your Project ID is, you can run the command firebase projects:list to see all your projects and find the one with the correct ID.
    cd FAngS/cloud-functions
    npm install -g firebase-tools
    firebase login
    firebase projects:list
    firebase use YOUR_PROJECT_ID
    firebase init functions
  1. Go back and grab the file from step 8. Rename it service-account.json and put it inside the functions directory.

  2. Now install the projects cloud function dependencies using NPM

    cd FAngS/cloud-functions/functions
    npm ci
  1. For the cloud functions to work, they need to be deployed. Run the following command. It might take a minute, but your cloud functions will be ready to go.
    cd FAngS/cloud-functions/functions
    npm ci
  1. Verify that the backend unit tests work and show 100% testing coverage using the command below. The output from jest will show you the coverage in your terminal. You should also see a coverage directory that was generated inside the tests directory. It contains an istanbul report with more information. If you open the index.html file inside the coverage directory in a browser you can see exactly which files are covered.
    npm run testWithCoverage
  1. Verify that the backend documentation works using the command below. You should see a swagger.json file that was generated inside the functions directory. Paste the contents of this file into editor.swagger.io to see the API documentation
    npm run generateDocumentation
  1. At this point the project should be all set up for local development. Navigate to the frontend portion of the project (i.e. the app directory) and use the npm start command to run the project locally. Once the build finishes you can access the project on localhost:4200

Great Success

  1. DISCLAIMER - This isn't a step thats necessary, but it is worth mentioning. For some reason, cloud functions won't always work the first time they are deployed and will make it look like there are cors errors. If you run into that issue, then you will need to go into the GCP project for your firebase project and assign the allUsers service account a role of Cloud Functions Invoker. A better explanation can be found here.
You might also like...

A small web app that tries to imitate the desktop web version of amazon site, you can add items to the basket, delete them, and have your user authentication feature thanks to Firebase.

A small web app that tries to imitate the desktop web version of amazon site, you can add items to the basket, delete them, and have your user authentication feature thanks to Firebase.

Features Here's the feature's included in this project 👨‍👩‍👧‍👦 Login Page 📦 Products Page 🛒 Cart and Checkout Page 📝 Sign up function with Goog

Aug 22, 2022

The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

介绍 项目集成了工作流引擎、报表引擎和组织机构权限管理后台,可以应用于OA、HR、CRM、PM等系统开发。配合使用tlv8 ide可以快速实现业务系统开发、测试、部署。 后台采用Spring MVC架构简单方便,前端使用流行的layui界面美观大方。 采用组件开发技术,提高系统的灵活性和可扩展性;采

Dec 27, 2022

Firebase Storage with Angular 14 example: Upload File, Retrieve, Display, Download Url & Delete using @angular/fire AngularFireStorage

Firebase Storage with Angular 14 example: Upload File, Retrieve, Display, Download Url & Delete using @angular/fire AngularFireStorage

Angular 14 File Upload to Firebase Storage example I will show you how to make Angular 14 Firebase Storage: File Upload/Display/Delete Application usi

Sep 7, 2022

implements user authentication and session management using Express.js, MongoDB, and secure cookies

Auth-Flow This project is a simple user authentication system that uses Express.js and MongoDB to store user data. The system allows users to sign up

Mar 17, 2023

Custom Remix stack using Clerk for authentication and full user management.

Custom Remix stack using Clerk for authentication and full user management.

New Wave Stack Learn more about Remix Stacks. For more on our thoughts on the New Wave Stack check out our blog post. To view this template in deploym

Oct 11, 2022

Angular 14 Firebase CRUD with Realtime Database - AngularFireDatabase Object and List example: create, retrieve, update, delete

Angular 14 Firebase CRUD with Realtime Database - AngularFireDatabase Object and List example: create, retrieve, update, delete

Angular 14 Firebase CRUD example with Realtime DataBase | AngularFireDatabase Build Angular 14 CRUD example with Firebase Realtime Database that uses

Dec 26, 2022

A library management system that built with JavaScript, HTML, and CSS. Allows the user to add new books and delete books.

Awesome books: with ES6 in this project: Set up the linters for html, css, and JavaScript. Create a popup window for desktop and mobile. Built With Ht

Dec 18, 2022

This is a fully functional DAO, a Web3 project made using Solidity, Hardhat, JS, Next.js, Openzeppelin, CSS, HTML, using the Rinkerby network!

My First DAO! This is made for a DAO-Tutorial via learnweb3.io This is a DAO, a decentralised autonomous organisation, essentially a more collective a

Jun 20, 2022
Owner
Ryan Lefebvre
Better Every Day
Ryan Lefebvre
Dashboard skeleton Simple and fast dashboard skeleton template

Dashboard skeleton Simple and fast dashboard skeleton template. Installation npm install --save dashboard-skeleton-compostrap Version 1x built on Boo

Compostrap 9 Aug 23, 2022
Angular 14 JWT Authentication & Authorization with Web API and HttpOnly Cookie - Token Based Auth, Router, Forms, HttpClient, BootstrapBootstrap

Angular 14 JWT Authentication with Web API and HttpOnly Cookie example Build Angular 14 JWT Authentication & Authorization example with Web Api, HttpO

null 20 Dec 26, 2022
Login of app to remind to drink water, using Firebase tools like Firebase Auth and Firebase Firestore

Water Reminder Login App Menu Contents Motivation Final Images How to download the project and run it? Technologies utilized Dev ?? Motivation This ap

Ilda Neta 10 Aug 22, 2022
An OAuth2 Authorization Server,Based on Spring Authorization Server

?? id-server 一个基于Spring Authorization Server的开源的授权服务器。 概念 一些概念 OAuth2Client 客户端指的是OAuth2 Client,但又不单单是一个OAuth2 Client,连id server本身都是一个客户端。 role 角色必须依附

felord.cn 351 Dec 30, 2022
The LMS (Life Management System) is a free tool for personal knowledge management and goal management based on Obsidian.md.

README Documentation | 中文帮助 The LMS (Life Management System) is a tool for personal knowledge management and goal management based on Obsidian.md. It

null 27 Dec 21, 2022
Full-Stack CRUD Application With Angular + Firebase Database + Authentication + REST APIs

BookCompany Full-Stack CRUD Application With Angular + Firebase Database + Authentication + REST APIs Technologies & Features Angular front-end framew

Rodrigo Bravo 3 Apr 10, 2022
This repository aims to create a POC about authentication and authorization using NestJS, Prisma and JWT.

A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest framework TypeScript starter repository

Vinícius Fraga Modesto 2 Nov 2, 2022
In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. All the elements of the user interface are fully functional.

To Do list: add & remove In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. All the elements of th

Olivier 10 Jan 3, 2023
Aplicação Angular CRUD para uso e prática do Firebase com Authentication, Firestore e Storage

DiariosApp This project was generated with Angular CLI version 13.3.3. Development server Run ng serve for a dev server. Navigate to http://localhost:

José Almir 4 Jun 3, 2022
Example project implementing authentication, authorization, and routing with Next.js and Supabase

Magic Link Authentication and Route Controls with Supabase and Next.js To run this project, To get started with this project, first create a new proje

Nader Dabit 134 Dec 11, 2022