Learn SvelteKit and Firebase: The Ultimate Guide
Learn how to use SvelteKit and Firebase to build high-performance, scalable web applications.
Loading Lesson...
⚠️ Notice: I may need to reshoot this video as FirebaseUI is up to v4.1.0v4.0.0 Removed all FirebaseUI underlying dependencies on deprecated and removed APIs in Firebase version 6.0.0. FirebaseUI no longer supports versions older than 6.0.0.
We will continue building out our app to Authorize users and then add Firestore rules to Authenticate within our Angular application. One of my favorite full time authentication companies is Auth0. Auth0 has many great articles, the one I refer to when trying to teach others about AuthN vs. AuthZ is Authentication and Authorization.The biggest takeaway is this:
Autentication (AuthN)Determines whether users are who they claim to beAuthorization (AuthZ)Determines what users can and cannot access
Setup
We can start from the previous lesson and build upon it by adding AuthN and AuthZ. Previous Lesson: Angular Material Router Awareness
git clone <https://github.com/AJONPLLC/lesson14-angular-material-router-awareness.git>
This will give us a solid base to start working from, however if you are creating a new firebase project you should change the environment/environment.ts file to match your firebase details. If you have never done this please see Angular Navigation Firestore as this will provide more details on how to update.Make sure you update your npm packages
npm install
Firebase Authentication (AuthN)
The Firebase Authentication docs have a great amount of detail on how exactly this works for each of their SDKs that they support. When I originally made this video I don't believe that FirebaseUI was fully supported and added to the documentation, but it is now. You can still find the main github repo, which has several issues, but Authentication is the baine of my existence!Thankfully Firebase makes this super simple and I am going to show you how.
FirebaseUI install
FirebaseUI was always a seperate project but it gained huge amounts of popularity. It is a simple drop in solution for authentication that was much needed for Web based authentication with Firebase.First we will need to add firebaseui to our npm package dependencies.
npm i firebaseui@3.5.2
Create User Module
Using the Angular CLI to create modules and components. You can find specific details about this schematic in the ng generate CLI section.
ng g mis a sort hand for ng generate module, more can be found heremodules/useris the directory from src/appwhere the module will be located.-routingadds the routing module
ng g m modules/user --routing
Create User Signin Component
Using the Angular CLI to create modules and components. You can find specific details about this schematic in the ng generate CLI section.
ng g cis a sort hand for ng generate component, more can be found heremodules/user-signinis the directory from src/appwhere the module will be located, this command will also understand that we want to add this component to the already generated module.
ng g c modules/user-signin
You should see an output similar to below: Loading image...
Update User Signin Template
We just need a very simple div so that firebaseUI can locate the ID and then inject itself./src/app/modules/user/user-signin/user-signin.component.html
<div id="firebaseui-auth-container"></div>
