How to Connect Firebase Users to their Data - 3 Methods

Fireship · Beginner ·📊 Data Analytics & Business Intelligence ·9y ago

Key Takeaways

This video covers three methods for associating Firebase users with data in the Realtime database, including nesting data under user IDs, saving user IDs as attributes on items, and creating collections of members nested under item IDs. It also discusses security considerations for each method, including using Firebase database rules to control access to data.

Full Transcript

in this episode I'm going to talk about ways to associate Firebase users with data in the real-time database I'll go over three different methods and when to use them and also talk about ways to keep them secure on the back end but before we get into that it's important to go over a couple nosql database design best practices if you come from a SQL background you're used to designing a database that is completely centered around relationships in no SQL we care less about relationships and more about about the efficiency of the actual query that we're making consider a database design that has everything nested under the user ID if you wanted to Loop over just the users and display their username you'd also have to load all the nested data further down the tree which would become very inefficient if you have a lot of Records a better way to handle this is to keep the data shallow so you only query for the actual data you need now we can start building some user relationships with Firebase and angular 4 the first method work works by nesting a user's items under their own user ID this is ideal when you're showing data that's organized by user for example a Twitter feed here we have an item service and we're going to import both the angular fire database and the angular fire off module then we create an item class which represents our data at this point with just one body string attribute this class will be returned to us as an angular fire list Observer when we inject the service we want to subscribe to the angular fire off State and we'll set the user ID return from that off state to the user ID on the service this allows us to make queries based on the currently logged in users ID now that we have the user ID we can hit the database for the list that is nested under that user ID if it's undefined we just return null it's defined we interpolate it into the path to the database if we want to create a new item it's as simple as pushing another item object onto this list observable back in the app we can see that when we create a new item it's nested under that user's user ID as expected if we log out and log in with a different user we shouldn't see any items in the feed which we don't and if we create a new item with this user their data is nested under their user ID essentially separ ating the data by user this works great on the front end but we also need to secure the backend data with a Firebase database rule in this example we match the user ID that the data is nested under with the actual o ID and Firebase if it's a match then we allow the right operation to take place a second way to associate users with items is to save the user ID as an attribute on the item itself this approach is useful when you need the association but you're not quering by the user for example comments on a blog post or something similar we can make this work by modifying three lines of code first we add a user ID to the item class then we set that user ID on the item when it's created then we remove the user ID from the database path because we're no longer nesting under the user ID back in the app we create a new item and we can see that user ID is on the item itself then if we create another item with a different user we should have a different user ID on that item but still both items are coming up in the feed now in Firebase we can see the user ID attribute is on each item to secure the back end we see if the existing data in the database has a matching user ID and we also allow the right to occur if it's null because that means the user is creating a new item the third scenario is when you have items that can be associated with multiple users in this case we create a collection of members that are nested under the item ID and the key for each member is that user's user ID back in the service we'll create a new function to join an item passing it the items key as an argument the data will be the user ID for the key set to true we return the current members as an object observable then update that observable with the new data to leave an item we follow the same basic approach we query for an object observable with the current user ID and if it exists we remove it back in the app we create a new item that defaults to no members and then we can click the join button which will add that user ID to the list of members when we log in with a different user we should see that they can also add their user ID to this item going into Firebase we can see that the members collection on this item gets updated with the key after each button is [Music] clicked that's it for this episode if you found the video helpful please like And subscribe and if you want to support the channel consider becoming a pro subscriber at angular firebase.com for just a few bucks a month you'll get access to exclusive content as well as free oneon-one project Consulting thanks for watching and I'll see you next [Music] time

Original Description

Fully documented lesson at https://angularfirebase.com/lessons/managing-firebase-user-relationships-to-database-records/ Learn how to maintain user/data relationships with Firebase users and data from the Realtime database. I provide three different methods for commonly encountered scenarios.
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Fireship · Fireship · 19 of 60

1 Angular 4 Development and Production Environments with Firebase
Angular 4 Development and Production Environments with Firebase
Fireship
2 OAuth with Angular and Firebase Tutorial
OAuth with Angular and Firebase Tutorial
Fireship
3 Anonymous Authentication with Angular and Firebase - Lazy Registration
Anonymous Authentication with Angular and Firebase - Lazy Registration
Fireship
4 Angular Router Guards for Firebase Users
Angular Router Guards for Firebase Users
Fireship
5 Angular Firebase CRUD App with NoSQL Database Tutorial
Angular Firebase CRUD App with NoSQL Database Tutorial
Fireship
6 Upload Files from Angular to Firebase Storage
Upload Files from Angular to Firebase Storage
Fireship
7 How to Deploy an Angular App to Firebase Hosting
How to Deploy an Angular App to Firebase Hosting
Fireship
8 Sharing Data between Components in Angular
Sharing Data between Components in Angular
Fireship
9 Loading Spinners for Asynchronous Firebase Data
Loading Spinners for Asynchronous Firebase Data
Fireship
10 Angular 4 Transactional Email with Google Firebase Cloud Functions
Angular 4 Transactional Email with Google Firebase Cloud Functions
Fireship
11 Firebase Database Rules Tutorial
Firebase Database Rules Tutorial
Fireship
12 Autocomplete Search with Angular4 and Firebase
Autocomplete Search with Angular4 and Firebase
Fireship
13 Reddit Inspired Upvoting System with Angular and Firebase NoSQL
Reddit Inspired Upvoting System with Angular and Firebase NoSQL
Fireship
14 Angular Drag-and-Drop File Uploads to Firebase Storage
Angular Drag-and-Drop File Uploads to Firebase Storage
Fireship
15 Text Translation with Firebase Cloud Functions onWrite and Angular 4
Text Translation with Firebase Cloud Functions onWrite and Angular 4
Fireship
16 Custom Usernames with Firebase Authentication
Custom Usernames with Firebase Authentication
Fireship
17 Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
Fireship
18 Simple Pagination with Firebase and Angular 4
Simple Pagination with Firebase and Angular 4
Fireship
How to Connect Firebase Users to their Data - 3 Methods
How to Connect Firebase Users to their Data - 3 Methods
Fireship
20 Add Toast Message Notifications to your Angular App
Add Toast Message Notifications to your Angular App
Fireship
21 Facebook-Inspired Reactions System with Angular and Firebase
Facebook-Inspired Reactions System with Angular and Firebase
Fireship
22 Learn NgModule in Angular with Examples
Learn NgModule in Angular with Examples
Fireship
23 Lazy Loading Components in Angular 4
Lazy Loading Components in Angular 4
Fireship
24 Stripe Checkout Payments with Angular and Firebase - Part 1
Stripe Checkout Payments with Angular and Firebase - Part 1
Fireship
25 Process Stripe Payments with Firebase Cloud Functions - Part 2
Process Stripe Payments with Firebase Cloud Functions - Part 2
Fireship
26 Selling Digital Content in Angular with Stripe Payments - Part 3
Selling Digital Content in Angular with Stripe Payments - Part 3
Fireship
27 Angular 4 Full Text Search with Algolia - Part 1
Angular 4 Full Text Search with Algolia - Part 1
Fireship
28 Algolia with Firebase Cloud Functions - Part 2
Algolia with Firebase Cloud Functions - Part 2
Fireship
29 Firebase Phone Authentication in Angular 4
Firebase Phone Authentication in Angular 4
Fireship
30 Top 7 RxJS Concepts for Angular Developers
Top 7 RxJS Concepts for Angular Developers
Fireship
31 Learn Angular Animations with 5 Examples
Learn Angular Animations with 5 Examples
Fireship
32 Advanced Firebase Data Filtering (Multi-Property)
Advanced Firebase Data Filtering (Multi-Property)
Fireship
33 Realtime Maps with Mapbox + Firebase + Angular
Realtime Maps with Mapbox + Firebase + Angular
Fireship
34 Angular Reactive Forms with Firebase Database Backend
Angular Reactive Forms with Firebase Database Backend
Fireship
35 Send Push Notifications in Angular with Firebase Cloud Messaging
Send Push Notifications in Angular with Firebase Cloud Messaging
Fireship
36 Top 7 Ways to Debug Angular 4 Apps
Top 7 Ways to Debug Angular 4 Apps
Fireship
37 Infinite Scroll with Angular and Firebase
Infinite Scroll with Angular and Firebase
Fireship
38 Use TypeScript with Firebase Cloud Functions
Use TypeScript with Firebase Cloud Functions
Fireship
39 Realtime Graphs and Charts with Plotly and Firebase
Realtime Graphs and Charts with Plotly and Firebase
Fireship
40 Role-Based User Permissions in Firebase
Role-Based User Permissions in Firebase
Fireship
41 User Presence System in Realtime - Online, Offline, Away
User Presence System in Realtime - Online, Offline, Away
Fireship
42 Location-based Queries with GeoFire and Angular Google Maps
Location-based Queries with GeoFire and Angular Google Maps
Fireship
43 Angular ngrx Redux Quick Start Tutorial
Angular ngrx Redux Quick Start Tutorial
Fireship
44 Angular Ngrx Effects with Firebase Database
Angular Ngrx Effects with Firebase Database
Fireship
45 Progressive Web Apps with Angular
Progressive Web Apps with Angular
Fireship
46 Angular Ngrx with Firebase Google OAuth User Authentication
Angular Ngrx with Firebase Google OAuth User Authentication
Fireship
47 RxJS Quick Start with Practical Examples
RxJS Quick Start with Practical Examples
Fireship
48 Send SMS Text Messages with Twilio and Firebase
Send SMS Text Messages with Twilio and Firebase
Fireship
49 Firebase Database Performance Profiling
Firebase Database Performance Profiling
Fireship
50 Native Desktop Apps with Angular and Electron
Native Desktop Apps with Angular and Electron
Fireship
51 Subscription Payments with Stripe, Angular, and Firebase
Subscription Payments with Stripe, Angular, and Firebase
Fireship
52 Firestore with AngularFire5 Quick Start Tutorial
Firestore with AngularFire5 Quick Start Tutorial
Fireship
53 Angular HTTP Client Quick Start Tutorial
Angular HTTP Client Quick Start Tutorial
Fireship
54 Google Sign-In with Firestore Custom User Data
Google Sign-In with Firestore Custom User Data
Fireship
55 Star Review System from Scratch with Firestore + Angular
Star Review System from Scratch with Firestore + Angular
Fireship
56 Angular Chatbot with Dialogflow (API.ai)
Angular Chatbot with Dialogflow (API.ai)
Fireship
57 Learn @ngrx/entity and Feature Modules
Learn @ngrx/entity and Feature Modules
Fireship
58 Infinite Scroll Pagination with Firestore
Infinite Scroll Pagination with Firestore
Fireship
59 Faster Firestore via Data Aggregation
Faster Firestore via Data Aggregation
Fireship
60 Contentful - CMS for Angular Progressive Web Apps
Contentful - CMS for Angular Progressive Web Apps
Fireship

This video teaches three methods for associating Firebase users with data in the Realtime database, along with security considerations for each method. It covers NoSQL database design, Angular and AngularFire, and data security and authentication.

Key Takeaways
  1. Design a NoSQL database with efficient queries
  2. Implement user authentication and data security in Firebase
  3. Associate users with data in the Realtime database using three methods: nesting data under user IDs, saving user IDs as attributes on items, and creating collections of members nested under item IDs
  4. Use Firebase database rules to control access to data
  5. Optimize database queries for performance
  6. Ensure data security and integrity in the backend
💡 Using Firebase database rules to control access to data is crucial for ensuring data security and integrity in the Realtime database.

Related AI Lessons

Up next
Spreadsheet Guy Meets the CFO: "Define How Much"
Digital Transformation with Eric Kimberling
Watch →