Ionic Angular Firebase - ZERO to ONE [Updated 2020] | Jai Preston | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Ionic Angular Firebase - ZERO to ONE [Updated 2020]

teacher avatar Jai Preston, Software Engineer, Futurist, Founder

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

86 Lessons (7h 28m)
    • 1. Intro: What You'll Learn

    • 2. Getting Started

    • 3. Tools

    • 4. Authentication — 1) Login

    • 5. Authentication — 2) Google Login

    • 6. Authentication — 3) Login Errors

    • 7. Authentication — 4) Login CAPTCHA

    • 8. Authentication — 5) Showhide Password

    • 9. Authentication — 6) Signup

    • 10. Authentication — 7) Signup Validation

    • 11. Authentication — 8) Monitoring Authentication Status 1

    • 12. Authentication — 9) Role Based pt1

    • 13. Authentication — 10) Role Based pt2

    • 14. Guards — 1) AngularFire Guards

    • 15. Guards — 2) Classic Guards

    • 16. Structure — 1) Core Module

    • 17. Structure — 2) Global Header

    • 18. Data — 1) Firestore Data Manipulation

    • 19. Data — 2) Local Storage for Better UX

    • 20. Data — 3) Profile Picture

    • 21. Up-The-Ante — 1) Profile Picture 2

    • 22. Up-The-Ante — 2) Account Card 2

    • 23. Up-The-Ante — 3) Data Presentation

    • 24. Up-The-Ante — 4) Reset Password

    • 25. Up-The-Ante — 5) Tooltips Simple

    • 26. Up-The-Ante — 5) Tooltips Advanced

    • 27. Basics — Framework Architecture

    • 28. Data — CLI & Routing

    • 29. Data — Guards

    • 30. Data — Forms pt1

    • 31. Data — Forms pt2

    • 32. Data — Ionic: Grid, UI Components, Animations

    • 33. Data — NgModel

    • 34. Data — Lifecycles

    • 35. Data — Services

    • 36. Data — Models

    • 37. Data — Data Presentation

    • 38. RXJS — 1) Observables

    • 39. RXJS — 2) Transforming Data

    • 40. RXJS — 3) Filtering Data

    • 41. RXJS — 4) Timing & Plucking Data

    • 42. RXJS — 5) Awaiting & Buffering Data

    • 43. RXJS — 6) Unique Values

    • 44. RXJS — 7) Economical Code

    • 45. RXJS — 8) Side Effects, Debugging & Logging

    • 46. RXJS — 9) Combining Data Streams

    • 47. RXJS — 10) Errors & Retries

    • 48. The Todo App — 1) Getting Started

    • 49. The Todo App — 2) Dash Page for Todo List

    • 50. The Todo App — 3) Editing Todo Items

    • 51. The Todo App — 4) Todo Item History

    • 52. The Todo App — 5) Better Tree Structure

    • 53. The Todo App — 6) Improving Todo Form

    • 54. The Todo App — 7) Completing Todo Items

    • 55. The Todo App — 8) Adding Todo Items

    • 56. The Todo App — 9) Filtering & Sorting the List 1

    • 57. The Todo App — 10) Filtering & Sorting the List 2

    • 58. The Todo App — 11) Menu

    • 59. The Todo App — 12) Todo Service

    • 60. The Todo App — 13) Trash

    • 61. The Todo App — 14) Storage

    • 62. The Todo App — 15) Settings

    • 63. The Todo App — 16) Theme

    • 64. The Todo App — 17) Export Data

    • 65. The Todo App — 18) Import Data

    • 66. The Todo App — 19) Authentication pt1

    • 67. The Todo App — 20) Authentication pt2

    • 68. The Todo App — 21) Settings (Firebase)

    • 69. The Todo App — 22) Publishing PWA pt1

    • 70. The Todo App — 23) Finishing Touches: Database Service

    • 71. The Todo App — 24a) Reminders pt1

    • 72. The Todo App — 24b) Reminders pt2

    • 73. The Todo App — 24c) Reminders pt3

    • 74. The Todo App — 24d) Reminders pt4

    • 75. The Todo App — 25) Finishing Touches: Better Settings

    • 76. BONUS — Angular Directives

    • 77. BONUS — Font Awesome

    • 78. BONUS — Compression

    • 79. BONUS — Kubernetes

    • 80. BONUS — Custom Scripts

    • 81. BONUS — Local Libraries

    • 82. BONUS — Reminders with Cron

    • 83. BONUS — Node Server with Express

    • 84. BONUS — Shared Features

    • 85. BONUS — Multiple Versions of Node

    • 86. Outro: What You've Learned 1

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


This course will be of great benefit regardless of your familiarity with Ionic, Angular, and/or Firebase. It's designed in such a way that linearity is not necessary: helpful if you are new, but if you know what you're looking for it's quick easy to find. This is fact how true learning happens: through non-linear, creative engagement with information.

The only thing prerequisite on your part is familiarity with Javascript and/or web development, and genuine curiosity. Everything else will fall into place.



The framework releases used in this course span across Ionic 4 and 5, and Angular 8 and 9. All code in the repo has since been updated to the latest releases and tested.  More information can be found at the GitHub repo.



All code from this course can be found at the GitHub monorepo (didaktio/Ionic-Angular-Course). The monorepo is broken down into submodules, which are independant repositories also locatable on the didaktio GitHub profile. Attached to every video (in Resources) is a link to the specific repo containing the code used in that video.


This is a future-proof course for practical people. Unlike many other such courses, little time is given to theory. Heavy theory about the concepts of Ionic, Angular, Javascript. Web Development, Firebase etc. are of little use early on - and rarely needed at all. What matters is their capabilities and potential as relevant to your needs. This course is about that. This course is making these powerful technologies do what you want. That isn't learned from documentation, but problem-directed doing.

In this course you will pick up 90% of the important principles underlying Ionic and Angular by focusing on specific and common problems like: login, user registration, role-based capabilities, blocking particular URLs, storing and manipulating data, notifications, sending emails, and more. Every line of code in this course was written on a live development server, so most videos finish with the result live in the browser.

The course is as anti-academic as you can get. We'll work through solutions together, often line-by-line, thinking in real-time. This means we'll encounter errors, figure out alternatives on-the-fly, and that things will be uncompromisingly changed when necessary.

The guiding philosophy is Just-in-Time Learning. Like every subject-area in the world, advancement in understanding is amplified 100-fold when the information being provided maps onto a local problem — in other words, we learn much faster when working with problems that we understand AND that are interesting. Absent well-defined problems, learning never really happens; theory only sticks when you're familiar with the subject area.

Again, this is a practical course. Only take it if you're serious about learning how to develop applications and build websites with Ionic and/or Angular.

Amongst the learnings on offer:

  • The fundamentals of the LATEST Ionic and Angular releases + TypeScript, Node, Google Cloud, RXJS, and more

  • User Login and Signup (multiple methods)

  • Popovers, Modals, Alerts

  • Notifications, automatic emails, text message logic (and all common background task needs)

  • How to deploy an app/website to the web using Kubernetes and/or Firebase Hosting

  • Storing data on device for user detection (like how most websites know it's you even when you're logged out)

  • How to stream, convert, transform and present live, complex data as good as Netflix (RXJS)

  • Angular Modules, Components, Pipes, Attributes, Directives (ngFor, ngIf, ng-container, ng-template etc)

  • Building a fine-grained theme controller

  • Ionic Pages, UI Components, CLI

  • Role-Specific capabilities: routes, data-viewing and entirely different UI's  for different types of users (eg admin vs customer)

  • Lifecycles

  • Forms: Simple and advanced, validation, error-handling and pre-population

  • Services, reusable utilities, global features

  • Interpolation, DOM Sanitisation

  • CAPTCHA forms and the 'Are You a Robot?' test

  • Custom scripts

  • Build and publish a Progressive Web Application (PWA)

  • Firebase: Firestore Documents, Collections, Permissions

  • Cloud Storage: uploading and accessing images and other media types

  • Cloud Functions: running secure backend processes, scheduling, fine-grained control over your app

  • Designing for all device screen sizes using Ionic Grid and other SCSS tricks

and much, much more.

The videos are fast-paced, dense, and sometimes unforgiving. Where necessary, they're slowed down —but practical people with work to do(!) want and need information that can be employed immediately. Hopefully every single video delivers on this measure. It certainly does sound-wise: every minute is backgrounded by brainwave-enhancing, epiphany-inducing sounds from the brilliant Steve Reich.


NOTE: The Basics section of this course is where to go if you're stuck with or unsure about some of the core concepts (directives, interpolation, forms, data presentation, services etc). It one of the latter modules by design — because your first foray into any domain should be to get a feel for it. You likely already have knowledge of the basics: realistic, tangible (and personal) problems are how we weave independent and fragmentary threads of knowledge into something deep and functional. Starting with theory before practice is at minimum going to slow down learning rate, and is typically the most reliable and quickest way to become disinterested and eventually turned off.



There is no Right Way to Learn. There is the way that works for you. The course is as loosely structured as it can be without sacrificing on quality. In other words, the naming needs to be informative but not --verbose, the sectioning needs to have a purpose, and each video must be lean and to the point but also able to stand on its own. The Just-in-Time Learning philosophy must only be deviated from when necessary; videos should first and foremost be practical, concise, and time well spent. With all that in mind, what follows is a few pointers for navigating your way up Mount Everest. They're not all incompatible; use those that appeal to you, experiment, iterate, throw others in the trash. The critical thing to know is: formalities and structure and tyrannical rules about sequence are usually bad things, and freedom to explore and follow interest are good. This isn't school. This is you taking control over your own learning. And yes, it can — and should! — be fun. To the tips:

  • Watch the Outro before you start.

  • Move laterally. For example, you might do the Basics section first and then jump to the intro, and then the RXJS section, and then the Badass Todo App

  • Do the Basics section first if you're unfamiliar with Angular.

  • Criticise. Have the confidence to change things, improve the code, structure the code in your preferred manner.

  • View everything through a practically-oriented lens. Watch videos wearing your technique-coloured glasses, not those lawyer-esque analysis spectacles.

  • Use tools(!) — those recommended in the course and those you discover yourself. The heuristic here is simple: if it lets you get on with working on the most important stuff (the HARD problem solving, the stuff that requires true creativity), then it's worth it. All other benefits — it saves time, increases readability, better security etc — are secondary.

  • Speed up videos. Slow down videos. Install Video Speed Controller on your browser to enable easier jumping through and speed manipulation of the tutorials.

  • Use the supporting materials where possible (download the files, visit the links).

  • Peruse the GitHub repository when one exists.

  • Post questions.

  • Combine this course with other courses and brilliant bodies of work (Fireship on YouTube, Angular in Depth, The Net Ninja on Youtube...)

  • Use The Problem of Concern as your North Star.



  • Prioritise techniques and concepts over formalities.

  • Use Stack Overflow and the relevant GitHub Issues pages for errors and/or optimisations.

  • Know that things will constantly evolve, which means you shouldn't lock yourself in from the first day. This means being liberal with typings (use any and unknown quite a lot early on), and worrying about structure and clean imports and other formalities when things are working. The heuristic here is: let small fires burn. Small fires rid the woodlands of flammable materials, thereby minimising the chances of one big, catastrophic fire. This applies to pretty much all aspects of life, but is starkly manifest in programming.

  • When building for users, how you do things under the hood should be extremely conservative relative to the UX. This is most apparent with form input, where users should be able to enter typos and other different representations of the same data without any fuss. Under the hood, all data is converted and normalised into a standard form. For example with dates, you might let the user enter a date or use a datepicker. This means two different types of data. Combine this with the usual complication accompanying date manipulation (dealing with timezones, incorrect dates, offsets, readability, unix vs iso etc), and you've got the ultimate recipe for a migraine. A far-reaching decision to make early on might be to deal only with ISO strings in the backend, meaning you convert EVERY single date into an ISO. If the datepicker gives you a date object, you convert it to an ISO. If the user enters something like (10.12.2019), you convert it to an ISO. This ISO is how you store the information backend. Displaying it frontend then becomes a doddle: another conversion into the preferred format, and some interpolation — simple. This method works because ISO strings, like unix and javascript timestamps, are the same for everybody.

  • Don't worry about testing.

  • The less code the better. Condensed, concise code has more to it than beauty: by demanding true understanding, it protects against the illusion that information consumption equals knowledge. It doesn't. I can read one thousand lines of code and, thinking that the time invested and length of information absorbed is impressive enough, be satisfied with my grasping. But later on I end up coming back to that code repeatedly and making a ton of other errors because actually, I don't understand. Alternatively, I could breakdown (and even improve upon) that one line of code which resembles a spacetime equation, and not leave until I actually understand. And if I cannot understand, at least I don't have the illusion that I do. Finally, condensed code far better facilitates principles of modularity, flexibility, changeability, and debuggability.



This is a future-proof course. Just like any real-world project or company or system, the course and it's supporting resources (links, GitHub Repo) will be continuously updated — new tutorials, errors addressed, dependencies updated, and additional content added as requested or necessary. The course uses a combination of Angular 8 and 9, node 10 and 12, and Ionic 4 and 5. If you have any problems, a question or something else you'd like to talk about, do reach out.

keywords: ionic, angular, web development, ionic 4, ionic 5, angular 8, angular 9, typescript, node, kubernetes, firebase, npm, websites, progressive web application, pwa, future-proof, coding, programming, google cloud, aws, docker, git, role-based, notifications, reminders

Meet Your Teacher

Teacher Profile Image

Jai Preston

Software Engineer, Futurist, Founder


Since the age of 8 I have been fascinated with everything computer related - from motherboard components to the BIOS to the code of the operating system. I was pulling apart, tinkering, breaking and fixing computers for many years before writing a professional line of code. This was a blessing, as it's given me an appreciation for the domain that is not very common amongst software engineers. Today we have insanely powerful hardware and expertise; what's lacking is  the software, platforms, interfaces and systems to match. We've come very far, but we still have massive leaps ahead. And these are only the foreseeable leaps! My principle intention with these courses and other introduction is to show what is possible, how code can make your life better and easier, how you can change t... See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Intro: What You'll Learn: first thank you for your interest in this course. And second, if you look at this, will be different from the usual course content centered around, not theory and formalities, but interesting problems and personal projects. And, frankly, just fun in this course has been made for you. It's made not to be watched and probably forgotten, but to warm you to new ideas, to tickle your interests to awake in those dormant dreams. It's not about information, but understanding, which comes from trial and error. Working on things that interest you knowing had to formulate an idea and testy. And then it's right would inevitably fails. School isn't about understanding. Modern education is in many ways, the antithesis off a landscape for learning is there for one surprising. How great is the number off? Uninspired, laborious, wasteful courses and diplomas and degrees and the like. If you dance the description, you know this course is weaved ball a threat off just in time, learning if you want to pull a personal or professional website or an application served on the Web or downloadable in the APP store. If you're interested in with development, I want to get stuck right into building that is into rotting riel production. Ready code If you have a dream vision, a big idea if you want to make some money on the side or write an application for your business or local community. If you want to put a dent in the universe while contained, nothing gold other than just writing. This is a cause for beginners and experts for doers, for people with a voracious curiosity for those wanting to turn from newbie to amateur, from amateur to professional. For people who love learning, introductions usually tell you what you're going to love. That's boring. But if you must now try the outre video at the end of the course, which rapidly skims over the numerous learnings on offer. Of course, you can also proves the course content. Re read the description. Re watch. This video will shoot me an email, or you can just jump in and try things out. You don't know what you don't know. You might just made the best decision you ever made. Thanks for watching hope they'll see you on the other side. 2. Getting Started: all prerequisites, aside from genuine interest, are secondary in this course that said familiarity with JavaScript probably a no based framework lot react Angela or an IQ would be ideal. The only other thing is an Internet connection, which, apparently you have a decent machine on the code. Editor. V S code is more choice on the one used throughout this course. The next steps need only be completed once for the entire course. The first thing lead installed is node. The best way to do this is with no version manager, which enables easy installation on easy switching between different versions off node. Would you something quite important if you're going to be doing a lot of development? Alternatively, you can store only a single note version. W linking the resources to a guard for the option for node version, manager or envy. M had over to the get help documentation. I'm follow the instructions for your machine. It's relatively simple, and detailed solutions to common problems are provided near the end of the docks. Won't you installed MBM and open a fresh terminal on M V M install with at least version 10.15 point three that on Version 12 is used in this course interchangeably. Next to run NPM, install flag Jay at Angula CLR Ionic types grouped Firebase tools. This really stole the important packages at the global level. Now we're going to set up a basic Arctic application with fire base. It will take only a moment and lays the foundation for the next few sections of the course from your preferred directory run Arctic Start. This will take you through some basic questions, which could also be passed. His options on the command itself. Give the other name and choose a basic template while site installs. Jump into the fire base console and he creates a project. For now, analytics aren't important. Accept the terms and create in the projects. Authentication. Tap. Go to signing methods. Here we have a list of all possible avenues for authentication. Well, that's typical. Email and password signing and Google Sign in in for Twitter and Facebook, as well as the less common. Get up on Apple Game Center, next year's database initialization. Hop into the data based up on press, create database starting test mood and select the appropriate region because you're following a course. Choose in the region that covers your coronal. Keisha is a good idea. In production applications, you would choose the region that covers the most users. The documentation is a place of finding out which regions use. Finally, in the storage top, click get started and again, a story location. If one isn't already set my back in the editor one for by slug it, this will open a browser, probably new to log in with Google. One Stone returned to the editor and CD into the new Applications Root directory, then run for base in it. Again. There will be some questions about the configuration. Hit the space bar on Faisal Functions and Storage. Jews Tops Group for the language. Yes, for tears, Lynn and yes, to install dependencies now the final step is optional. I might not be necessary in later versions of Arctic, with the version I'm using here. Arctic includes three packages or necessary for our use case. They are our nick native packages, meaning there for classic downloaded and installed laps we're developing for the Web specifically appeared. We way the various locks but out by these packages can be annoying. So here on first removing them from the no modules, then deleting all calls in the APP components. Yes. And at model ts, you can also delete the up component spec ts far and now everything set. 3. Tools: can't you got the off? Miserable lives are pathetic purists the exemplary explorations off the explainers who advance our understanding off while code, which now rules the world on the concerns of specialist tinkerers whose critical contributions make it all possible, Great tools are bedrock to productive, creative, smart. Perhaps most importantly, gratifying development tools can be the difference between your spent aren't conceiving, marking grope on producing from scratch the M V p of your big idea on doing it over a weekend before your Monday morning meeting with investing Mr Deep Pockets. It could be the difference between internally pleasing, happy, purposeful work on enormous induced by laborious on creative, boring work. It could be the difference between a five minute book fix and patch on $100,000 mistake. It is the difference between a box of matches on Flint tools made possible. This unbelievable civilization. Yes, tools should be top of your list of considerations. There is important as a big problem. You're trying to solve the discovery of a tool my even solved the problem itself from your broadband's be to your quoted war, a preference from the browser of choice steel preferred programming language from the ram and processor of your machine to the theme of your favorite code editor. Tools matter. They could save you hundreds of hours, a decent amount of dollars on a significant proportion off sanitary. Speaking of code editors, there's a plethora of options out there, the most popular being sublime atom brackets and V s code. The last one is leading our charge into the future with a lively, enormous and ever growing community of passionate engineers, hobbyists, entrepreneurs and so on. V s coat is rightfully the preferred choice off the many rabbit holes to go down extensions . The massive marketplace of imaginative, time saving, weird and wonderful tools built by altruistic enthusiasts boarding opportunistic businessmen and women and everyone and everything in between. Extensions are the free candy store off the programming world, and the candy is gluten free. In fact, it's highly nutritious. You can ensure eat as much of it as you want to. On the menu in this course are several exalting, energizing, colorful finds that can and will leave a lasting memory First. These angular snippets, the one by Michael Moreland, is fantastic and used exclusively in this course. But there's a couple of others work, Jackie nine, and many can be used in combination. John Popper's extension is perhaps just as good. Likewise, and I'm snippets. Extension will also serve you very well, especially if you're not yet fluent in Ionic. You cannot call us. Write your own snippets, but why bother when you come on click install, either or both of these are rather loads of code. We just a few characters. Snippets are as good in haste tomorrow as they are. NTS files next. So please rainbow brackets a tall for on blurring the lines. When you're dealing with deeply nasty functions, recursive logic and so on. This could be extremely helpful. But whatever your project, the next Amazon, or just another to do out because why not rainbow brackets will enable cognitive bandwidth to be better spent. Some extensions are useful early on, either in a project or in your understanding of a language or framework. Snippet is an example, and some a lot of D boogers are needed, in which later all those consistently bear the tastiest fruit. One such extension is PATH intelligence, which in addition to the native ES code intelligence, makes falling ports a breeze. NPM intelligence is also worth mentioning obvious. Could icons providing much needed upgrades, the default file and folder icons? You'll get access to a great many different styles for the falls in the project tree, mostly categorized by language under platform type for which the extension will prompt. Knew about if it recognizes your projects, dependencies. Customization is also an option. As you can see, I have quite a few extensions installed here. The full list of links can be found in the description. Aside from the code at its are there are some of the tools worth mentioning. The first is flight got a beautifully simple and ridiculously valuable manager for your machines. Clipboard, it say's that the 19 on copied or court items and provide the customizable pop over for browsing through every single one. Of course, this is useful for all worked on on a computer, but in developing, you make something like completing forms of mark data, duplicating code copy pasting from stack, and so on. A doddle stepping to the line marked chrome or rather, the chrome extension marketplace. One of the reasons, but perhaps the straw that breaks the camel's back for reasons I'll get into in a moment. One of the reasons I use chrome instead of other browsers is the extensions. Just Thought We V s Code. There's a boozing marketplace jam packed with predominantly small but mega handy additions to the standard served website with scroll while plus bookmarks, functionality of the browser all mention to Auto Scroll, which is pretty self explanatory. It's especially useful on Twitter and video speed controller, which lets you turn your keyboard into a fine grain control out for YouTube Vimeo. And, in fact, most video served on the Web, whether it benefits may or not be more even work on this very video. Finally, I have to mention the brave browser. If you don't know about him, get over to the salt right now and check it out. The only drawback on the reason it's not using this course or why it's my browser of choice when developing is the inability to add extensions, though that is not an outdated thing to say, because brave have made it a simple is it using chrome? Which means it's time for me to end this video and schedule a move 4. Authentication — 1) Login: we're going to implement firebase use an Anglophile library. There is great documentation on Get Hope with guides and how to use core for based features like hosting fire store functions and messaging from the root of our up directory in store , angle of fire and fire base, then in the APP model TS for important necessary modules as well as the APP environment for include annular fire office in providers. If cost and performance are of concern, it's important to tell firebase which regions use Germany. You want to use the region closest to the majority off your users information on which locations come under which regions could be finding the Google docks. There will also be a link in the resources section. Notice We've called initialize up on the annual fire module and passed the firebase conflict variable, which we're now going to create in the four Vice Consul Trick the ad web at butter. Give it a name and he register rob, Then copy the firebase conflict property to the clipboard and paste it into the involvement object in the involvements Fall next general locking page with Arctic G page logging. This will give us a standard Onek page within the CSS module Hedge 10 Mile and Tears far. We also get a suspect for in this course spec falls, and testing in general is not going to be covered. We'll get into the reasons later in the course. It's good practice to separate APP Infrastructure code from user interface code where possible for these weaker and at core directory into which would create a services directorate within that create fall named all service ts. If you have the angle asleep, it's extension is thought simply top service and select Engy service from the pop of a menu when it's a new far. Sometimes it could take 2 to 3 seconds. For this to appear. You can, of course, talk to service, but it's a good idea to make full use of snippets, intelligence and other such tools that could down a laborious work and a late to get on with the more interesting problems in the decorator set provided into route these tiles angular To make the service globally available in the constructor, we inject annular fire roars. First you make a logging method, which takes an email and password. These arguments in tax is an example of the construction. He tells the function to peruse the incoming object argument for keys named email and password their values and become available inside the block. Deconstruction will be used a lot in this course. He saves time that makes for a cleaner code. Are looking simply returns the signing with Human, a passable method on the angular Pharrell's class, you can think of the entire An unified library is essentially an angular base of wrapper around the fire base. Job is good. SdK We talked help for lectures like guards on native up manipulation methods. We're also going to need love. I got method, which is that simple. Now we move to the log in Page DS, fall and eject the all service in uniform builder on angular router on a logging for invariable, create any form group with the group method of the form Builder, which takes an object with the keys is the form, field names and values as configurations for that field? There's a couple of ways to do this. The easiest way is Laakso, an array with the first item as the initial value optionally ika create an array of validators as a second autumn. Don't worry too much about the details here. This and everything else in the course will make more sense every time using by which I mean right test It's right and repeat formed on. Now we need to submit method for the phone creators of meat method. To get some intelligence on the income reform, we can create an interface, then cast it to the incoming form data. We're also going to mind this method of icing function. First, we call are all service lugging method, passing the entire form later. Object as one argument. Wear white that the symptom navigate to the home page using the angular Rusa. No, to design the locking perch, we're going to use it on a grid and credit basic love. Inform with email and password fields on a logging butter that is deciding what if nobody dies has been answered. Note that the log in button cause the submit with that of the phone, which caused the logging method we just created as an argument. It passes log, informed our value which, quite importantly, includes only the values from the form in object. Former Before we testings out, go ahead and change the default landing page of the up in the root module file, changing from an empty string to logging, which would alright users to the log in page. So here's our page. When we try to log in and area is locked, why is this? While it's not Bob who's the problem, It's The firebase doesn't recognize the details. There are several ways to create users. Invite base. The most obvious way is with the registration form. We'll get to that later in the course, but for now, let's create Bob via the council. Go to the authentications up and creating a user. Now with the email address and password of union user tries it again and they reduce No, no errors were routed through a home page. Finally, we need to make our password form. We would hide the characters on entry, simply set the top, actually, being on the import element to password 5. Authentication — 2) Google Login: most websites and naps today have alternative signing methods. Lot, Facebook, Twitter, Google and so on. The most common is Google is also the easiest to implement and probably the safest. Hence, that's what we're going to adhere in the four based console. Go to the authentication type quick signing methods and enable Google signing. Make sure you man is selected in the project Support email field. You'll see a popular different options here for Microsoft. Get hope, the Apple Game Center, etcetera Nafisa Code In the all service we created earlier, you poor far based off using the since actually see here. This is important for tree shaking, which in name was terms is how your application drops unnecessary falls and modules. When it served to the browser, they were correct. A simple Google logging function. Here we're combining two functions into one. The first is a creation of a new Google with provider. We passed that as an argument to the role of an angular fire signing method. We speak to this method from my log in page in the ts creating method for the Google logging bottom again, we simply await successful logging in and then route to the home page. Finally, in the Hasty Maher on a Google Lockheed Martin somewhere, let's try it out. So we stock you weren't into this era here, which Google have yet to properly address within a clear documentation or automatic fix. It seems to be a problem with permissions, which with Google is usually all gone under the hood. The first thing to ensure is an email was selected with a neighboring Google signing. The second, on largely solution, is to click the learn more link on the error page that will open up the Google Cloud platform and take you to the water consents. Green simply give you application and name optionally an image and then hit Save natural again. And as you can see, it works just fine. They have it give a logging in under two minutes. 6. Authentication — 3) Login Errors: curly errors have being locked into the terminal. This isn't going to winners. Any design awards we might be in for a chance if we start informing the user about what's going on, do you agree to the hasty male? And that the conditional on item with this front element that inter plates an era property , the on our terms will show only if the air property is true thing inside the forms of it method. Could the current code and replace it with the try catch statement. He saw Troy at the code back in it so it catch loved the era of the concert every statement and said, This is the era to the past. There a message, I think create the air of property. Now go ahead and try to argue with on created user and there's our era. There's a host of possible areas. We fire base. They are likely ever only running to three or four. Issue probably set up a firebase era is an object. The two important properties only are the code and message. The code allows us to determine which kind of error has occurred, and he struck the user accordingly in the Catch Block rights. Which statement for the common error codes, namely invalid email or password. Recognize details on Bandel Disabled users. Also right. Catchall before error message for rare new or unexpected errors. Now writing a customary message for invalid passwords is not recommended by Google because it gives potential hackers a hint, namely, that they got the email or use the name part correct. And it's a good idea to merge the Invalidpassword era into another, such as the using our founder. You can make this cold more consultants by using deconstruction in the cutback argument. And now, when you run into a particular our especially what caused the message will be displayed to the user. 7. Authentication — 4) Login CAPTCHA: Are you a robot? If so, start now. This course isn't for you. If you are the robot king of the world in the year is 3001 Be sure to keep looking after the humans. They're actually pretty decent. Would you get to know them? If you are a human who was sick to death of the Are you a robot? Questions Then refer to the answer given to the robot Because here we're going to implement that. Are you a robot capture feature into the application? Indeed, it is a feature because it makes your application far more secure. Currently, we felt locking too many times within two smaller window firebase will return a code that we get to rock custom Logic four, he said we get this mysterious message about monkeys on Planet of the Age was fiction, right? Right in the switch statement for the lugging errors at a case for or too many requests inform the user with a message, then called the stock present capture. We'll get to that method in a moment. First jump into the orthe service and create a recapture form generator. It takes an arbitrary, hasty My element I D and optionally on options object. Then we simply return a firebase. Crazy, very fire all the necessary authentication. He's don't under the heart now for that present capture method. Make it a sink, and first, to find the idea of the element in which are very far will be presented. Let's call it captured container. Next we grab the element with document that get minimum by day and set it in HTML to an empty string. Then we set capture solved to force. This step ensures that a fresh verify is called. A few surpassed the robot test, but again, files log in too many times. Of course, if it repeatedly happens, this had gone forever. We could also implement additional logic that can't see my time. This happens when over assigned, Lemme thes more, get directed to support a day and salt for robots or the unified field theory problem to present capture. We seem to call the recapture generator in your service. The cool about property is a function called where the generator or host, when the verification succeeds, calling render presents the capture form. Finally, we need to page him out crowded dif good place to this would be inside the conditional era elements because it's an item we can pass it. A Slav end said. The idea on Hayden attribute to true if the country sold always yet to be opened things capture solved property. He's a symbol Boolean in the t s file. Now we see that the question is posed after consecutive failures because Google knows that I am indeed not robot. I'm not here asked to identify cats and for hydrants, but you might be so be prepared. Suck before we finish. There's a slight problem. Click fever resulting duplicate verifiers. This will lose his points. The easy solution is to disable the log in button. If the capture has at least once being presented on does Not being solved. Onda Now it performs. 8. Authentication — 5) Showhide Password: the show High Password feature named Me The Abilities of You, your password as you're entering. This is surprisingly lie entrant to the global stage. For many years, people entered stars and prayed as the number of possible passwords grew. To do least lengthen. Attention spans shortened. Andi, I am locked out of my account complaint, Scott rocketed. Someone somewhere out there figured out that he might be a good idea to give users the option to show or hide their password. In the copy, Cat effect went to work. Now it's everywhere, including soon in our application with our Nick. It's that simple in the form field html code and important to the item, said the Phil and slot attributes to clear and End on Click. We want to set a show hot property to its opposite value. In the bottom. We have a conditional icon. You sure pass it is true. We display an eye, if not across that I made the type attribute of the import conditional. What's happening in square brackets? If your password is true, the talk import is set. The text, if false, is set to password. Finally declare the show password variable in the ts far I'm a dog 9. Authentication — 6) Signup: Now we're going to create a use. A sign of feature. The first thing we need is a new sign of page. Generate one using the Ionic CLI in this yes far create an interface for the incoming form . Data of basic details like name, date of birth and a handle full of sun in Anne Meara. And a password. Of course, in injected form, builder Ruta uses service or service on dining. Toast Controller will be creating the user service in a moment. Create the sign a form with some basic but reliable validation requirements. Will also need some options for the on date picker Credit date on conflict object with Miramax Properties. Then we have also meet Method it a sink and deconstruct specific form. Data values. What's assigning all the rest to a form data property, right? Try catch statement and he saw a tribe. We await the create Use a method called on your service to entry Pass owned the email and password Democratic. That instance from the airport of the debt on picker, which isn't always so string. Get the day month and you set them along with other form data to a basic user data object. This will be the users database record. We will also set the users the unique I D, which is also generated by five days. Then we call up there on the user service, passing the news, a document on way free to complete once it's complete. To start with the log in, we never get to the home page. Toast always goes down a tree are as you spoke with a welcome message on the user's name, D materializes within three seconds. Now for the hasty mark. Working with the on A grid is generally a breeze. Perfectly censoring elements in a four page is still not simple as it should be. A give the main arm wrote a class of Roe Full Hoitz and in the APP s CSS, or preferably, the global that I see assess, Fall said the on agreed and Rosie A says, is shown for the sign of form. We have basic on items with inputs on floating labels for the day. Picker we use on daytime, which uses options from our data on conflict for the handle will do something a little different, right? The item initiative with the spun label as its first child. Use an iron note with this lot of start to give the at sign prefix. Then we have some more form fields and the submit button, which hooks to the form Angie submit method. We can also set this button to hide if the form is untouched. Some stars with a handle field on this chicken up. Okay, bland. But on the way next year, a new service called DB Service he saw the Decorah said. Provided into route if you followed or the videos in the course. The services directory is a good place to nasty you, poor Daniel. If I store and query FN from angular fire, then inject Magnify store in the constructor as well is a macro operator on observable from mark shares. This service would be the way components and pages in the application interact with fire store. Our first method will be for creating new force or documents will call it set dark. It takes a path and data object. Then we simply pass the path to the annual If I stored up method call set with our data. This rice data to the past specified. It is also a destructive method, meaning if anything exists of the path given it will be over, written this committee Sebold with a simple extra argument. But I like to keep a dedicated method for such functionality. To be sure. Clarity, we can use a special kind of comment. Former Common law. This gives us the intelligent with which will be very familiar if you use the S code our next month and will be uptight, Doc. It is identical to set dark except for one crucial data. The most true setting past as an object merge will rot new documents and merge data. If a document already exists at the location, then we have two methods of grabbing data from Father's store. The first looks for a document at the given path when he turns the data, and also it's all day as an object wrapped in an observable. The collection method is similar. He takes a path and optionally a forced or queary. The path argument should match a collection if no queries past the method returns all documents in the collection at the path the documents are returned again as objects with an additional already property. The idea is helpful toe have on hand as you come to realize when you work before store more because multiple documents might be found. The return value is in Iraq the query capabilities of forced to our video or two on their own in the force of luck imitation. It's very useful. We just know that what's defined as optional here, it's always a good idea to use a query for performance and security reasons. More importantly, for cost the dollar so folks on each method indicates that this property is or returns an observable. It is good practice to make distinctions between observable those and other properties on coronet. This is the best the most common way of doing it. Next, Create user service just like the DB service. A user service will typically handle all methods related to the Koran user on their data. The first property is a stream of the uses data pulled directly from fire store. If you are unsure about observable, are express or any of the operators used here, check out the Ark share section of the Arctic angular course or visibly learn Rx Jess website, which is a very useful resource even for experts. Will you switch map to listen for changes to the users. Authentication statements I use the locking triggers a query of the fossil database looking for the users data. The query uses the uses You idea to find the correct document. It isn't assigned to the dock s property as an observable. The tap operator is used to set the first name, and you are de of the EU's out for quick and easy access throughout the APP. If you use locked down, we return an observable of no. Then we have an update method, which is what we used to update the user's data. He uses the you already set via the top operator to build the path argument. Now it won't be to the or service. Assigning is a property to the or state of the angular fourth instance, the Allstate is an observable of the corn authentication status. If subscribe to or listen to with an operator, locks, which map this observable will admit when the user locks in or out when they log in a firebase use a record is omitted like outriggers, a full CIA mission. Finally, we need to create use a method which caused the admirably explicit. Create user with email and password method on Goto at some additional GOPer stall to the honor Great here, which would give us a noise Instagram esque effect. Finally, at a sign of bonds of Larkin Page, that one click will route the user to the sign of page. We were sort of back to log in button on the side of page, and there it is. Click sign up and to the basic details on press submits brought to the home page when presented with the personalized toast in the Far West. Console Weaken. View the user record on data. But what about users who authenticate with Google? While we can create a new use, a record every time a new user uses Google lugging their application, what chicken that is new user property Return ball. Google off. In our Google logging method, we say, if is no use, it is true. Create a new document with their data you could like to request. Further information will give them an option to update their details with an account or more profile page, which indeed will be looking at later 10. Authentication — 7) Signup Validation: So here's our sign. A form if using makes an error or as every user like me doesn't just plays around with the fields, we get these red lines courtesy of Ionic. But what did they mean? It isn't clear? What is clear is that we need some more clarity. We can't do that by listening to events on the form and updating your accordingly. Nissanit es fall the finest getters for each value on the form than in the hasty Val. At a conditional span, elements good places beneath the on import was still inside the item. The conditional expression is if first name is invalid and has a value then despite this element, first name refers to the getter, which returns a form control instance which contains a host of checks are valid, invalid, dirty Christine and so on. Then we simply repeat this logic for each field. Finally, at some CSS for the error message. Now, if we enter something processes invalid by the form validators, we get this error message boy too little, too erratic from while RG Just how fast does this form expect us? The time we're not robots after all, this is actually a common problem with angular, and it tends to be resolved or are in custom validation ology instead of relying on getters . Luckily, with our Nick, we need only sent one attributes. The Arctic import, like many iron that you are components has many properties that enable host off customization. One of these is de bands, which allows us to specify how long after a user's finished typing we should let Angela know about it. Go ahead and add the attributes to one or two relevant and test it out. He takes many seconds. So we sent 1000 for one second, which is Germany. Good, say, and now the user can at least do some sinking whilst they talk. 11. Authentication — 8) Monitoring Authentication Status 1: monitoring the authentication status of a user is a common need. There's several forms of observations and even more ways to do it here. We're going to simply monitor whether the user is locked in anywhere, not whether they're active or even recently active. It's one of the least evasive forms of user observation a company or developer can perform , but equally as uninformative. The first thing we're going to do is create a locked in property on the user document. The benefit of strong typing using toxic interfaces and tops is that it can quickly make global changes. The objects and variables the renamed symbol feature is brilliant for this. We're just the intelligence errors are useful for pinpointing exactly where there are inconsistencies. So first World Day in the interface, if you have two more interfaces, have only stop variation. What we do here Astana practice in typescript is to write a basin to face containing the common properties. So here we do that for account type, created out, U R D and handle, and then the locked in property we made. The other interfaces include this base class within extend statement. Next in your service, create a property called new logging, which will be a 1,000,000,000 indicating whether this user just locked in. This is not to be confused with a new user, so we can add a comment for intelligence there. For each method used to log in the user, we set the new locking property to true in the user service where authentication changes are observed, we chose whether new logging is true. You'll be tears. We update the database property. Then we set new log in in your service to faults. Finally, we create a new middle man, A thing like that method and I use a service. You start to try block. We'll wait the document wrong to set logged into false and then we love the user out before re compiling. Change all. I got calls throughout the out to instead use the use of service method now destroyed out walking and then check the database. As you can see, nothing is true. Then when we log out reversed, the folks at the time this video was recorded for so have just released a feature that allows either full or some variation off subscription monitoring, which, if on crack, allows you to know how many force or streams are commonly active. You might want to check that out for base. Also offer a method for fine grained authentication status observation. You can find a link to the documentation in the resources section. 12. Authentication — 9) Role Based pt1: role based authentication and raw, specific capabilities are another very common need for developers and companies. It can take many different forms. Sometimes it's simply blocking access to particular routes. Sometimes it's full blown to the point that it's basically a different application. We're going to cover the spectrum here, starting with separate sign It flows one for standard one for enterprise. We're going to adopt the sign of paint you currently have in creating a new one. Very similar. We name it standards on a page movies position in the tree to inside a standard directory itself inside a standard directory grand enterprise structure and crashing into Roy's son of pages and see a lot. The code is the same as a standard son of page. Except for the form, they might even that creating an entire page to care for only a different form is overkill . But the benefits of separating concerns aside, there are probably many more things that you want to do differently between pages. Different styling, animation and so on notice in our submit method that created is set to a method called timestamp server. This creates something called the fire store, time stamped sentinel which went uploaded to forest door converts to a time stamp. You can create a sentinel for the current moment, which is what we're doing here. You can also pass it a custom date in the future or past. Once again, we never get to the home page and I'll get success. I'm presenting toast. The Hasty Mo has the same structure. Now let's spice of our home page in the T s credit data observable the streams pretty much all the user's data as one flat object in the Hasty mile made the arm content conditional show only if the data observable when subscribed to a mistruth data a sign that data toe available name data noticed it doesn't have a dollar sign suffix, which would instead call the observable. We used our Nick grid rapper as the parent For some Angelus, which logic each are. Niekro will represent a different case for the value of data that I can talk, which will be either enterprise or standard. Then we have a nine a card from styles and then add button for enterprise in the standard page and vice versa. The final change we need to make is in the apple two module because we have to sign up pages week unless them under one path. Nesting on this has benefits other than more readability. So just enabling stripped the control of a route data and super guarding on redirecting, including the garden, the parents or level resulting, both paid. He's being blocked from knocked in users. Now let's try it. Create a new enterprise user thing. Check the database to make sure the account top and everything Galaxies correct. If you've deleted the standard user from earlier, just create another from here. You can skip to part two if you wish. We're going to create some models for data and make a couple of other improvements. I use cases suited to a name space. So you are export. Declare name, Space user. We can our nest. Each account tops data structure in this name space, which will make it very simple to use throughout the app. Know the timestamp value. Here. This type is available on the fire based on forests or instant. I like to export it as something sure in the same place. I import firebase as opposed to multiple firebase imports on door. Many chain statements. Let's use this model first. In the use of service, cast the data observable tone observable of top user, which is our name space. Use the enterprise and use that are standard because the home page is used by both. The data tops could be either and corny. There's no simple way discriminating between the to the emergency. Besides, it's not really that important. If you're using typescript and intelligence is a wheelchair or than helpful assistant, you may want to review your philosopher calling. The to day method on the force of times down will convert it to a job script date, which is easiest to work with in the front end and could even be presented in roll form in most prizes, almost are going to make some improvements to the data structure. Feel free to copy or change into something different. The point here is the logic and modeling, not the formalities. Next create especially enterprise only page for our enterprisers. We could see there in the Uprooting module to protect it from scandalous wrongdoers. We need a guard creative enterprise only guard using either the cli and sleep. It's all writing out manually said provided into roots, and he gently use the service. And Ruta made the character of a method. I think then we check the account, or but mapping to the users. So this document is terrible and divert me to a promise. The first operator is critical here. Because he ends the stream Live seems have caused a guard to hang. If you count his enterprise, we return true, thereby allowing navigation else we read or write the user to the home page, using the rooted up past your arm method. Finally include the guard in the root path, then save on recompose locked in his enterprise. We can act. Is it just fine but locked in this bob a standard user? Our attempts to find the treasure are halted and was sent back to the damn tone page. In the next part, we're going to look at a more fundamental, secure, fine grained method for dynamically served, role dependent features uses quite functions and four based custom claims, and it's the way to go if strict separation of identity, it's a critical concern in your application 13. Authentication — 10) Role Based pt2: If you find this course from the beginning, you should have far based functions already initialized. If not, don't worry from the directory root of your application room for basing it functions and use it for options provided four bases installed on your locked in. You should let me go to follow this demonstration within the Functions Directory in package that Jason changed the note engine to 10 or later. If not already. Don't he saw it sauce? Create two falls. Create user that ts and confidante Yes, when working with cloud functions, I'll just set a conflict for that sets some default options, not the region, speed and memory to use. It also enables you to create clear import statements in other falls like this. Where were important functions and four back at me and using the star syntax. Then we export them a simple variables. Be sure to court initial rise up on the admin instance. I'm also here creating an object of regions with the full set to the one closest to may, namely your west to you can find information on regions and zones in the Google Cloud. Documentation in create user ts, we first create an interface for the day, A pass to our cloud function. Then we have an assert data function. If you're unfamiliar with advanced typescript, this might look like a quantum equation. Just copy what we want here is somewhere to check the incoming data for validity. We can do this without the talks grouped with. Then we won't get the intelligence and debugging cloud functions could be the biggest pain in every Larry page is us. Basically, we check whether the incoming data has a particular value. If it does, we return the value, if not throw functions factually GPS era. Next is our create use a cloud function. This Korbel function is going to replace that create user method in the front end all service which uses angle of fire. Here we're using the firebase admin sdk, which can only operate with insecure closed environments like that in which cloud functions are deployed and run. We set the region in which the wrong dysfunction before calling Haiti TPS that on call which gives us a data and context object data is what will pass from the front end. Context contains basic information about its execution, like the source timestamp on region. Make it a sink. You heard it here, where promises are used. Use, I sink. There are rare exceptions, but it's more likely you're a billionaire than that you're a beginner and have such a problem. Next, we serve the email password and can't talk values of the incoming object. It doesn t assert data function. All the logic here depends on each of these values, which is one era must be thrown if for any reason, they're not present using the human apostle. Require a new user and grab the u. R D using deconstruction. When that succeeds, we set custom claims on the user record. Custom claims are principally an independent addition to the directly immutable firebase use of record. When you create a new user or log in using fire base, the user record is what is returned. It contains basic information, like a user's email on expiry, token, display name and so on. Every user also has a claims record containing further information about the user, on which can be accessed with a separate less known about method. The clans record is manipulable, but only via the firebase happiness decay changes made are remembered by fire base under the hood as custom changes. But it's a good idea to sit down directly on a custom object. Here we set the custom claims to an object containing a single property, namely the account I. Finally, we need a way of getting this information back to the front and client. Then they need to be able to log in using their new credentials. The human and password they used to lugging would indeed work, but we want mistletoe happening. One step. It's not the users responsibility to first create an account and then be asked the log in If we are to do this securely, it means not passing passwords around, which means we need a different way to authenticate the user. To do that, we create a temporary custom toker and end the function but returning it to wherever this function what securely called. We can then use the logging with token method provided buying in a fire. The index ts fall towers clad functions which functions to deploy. If you have only one function you could is right in the index. Yes, far indeed. Currently, when you first unit clad functions, the sample code is a simple hello world function in this file. Personally, I like to give each function it's on file. Then you can simply export. The function locks up before we deploy. We need to enable back in token creation permissions in the Google Cried console. Open the A P R library via the hamburger menu, then find the I am a PR click Enable I am stands for identity and access management. Once he's done back in the menu, find the I Am and have been option that brings up the permissions tap. Find the member with the email address Project i D at AP Spot that G service account dot com and click the Edit are gone under select Role Foreign Service account Token creator and hit Save Now deport the function. In the meantime, in the or service inject, annular fire functions were going to call our cloud function with a method called Create User on server name. So explicit would probably win. It's a Firebase award for extra explicitness here. I'm using deconstruction to make clear the arguments expected by this method, namely an email password on account I. Then we call Angela Far functions Haiti TPS Korbel, passing the name of our function as the only argument this returns are function instead of raw in another line of code, we can upend the function with a cool passing. Our arguments annual far functions return. Observable promises are much easier to work with, so we convert the result to a promise on returning. As stated earlier. The far based planes record is separate from the user record. This claims record is refreshed every time the user is authenticated. So just when they're locked down for security reasons or when the token exporters and they have to look in again, the clans record can also be said by force, refreshing using the get I D token method of the corn use of property and passing. True as the only arguments, this method is an alternative to asking the user to sign in again every time there Kristen claims are updated. For example, if you use a wanted to upgrade from standard to enterprise, let's give the method some intelligence for clarity to log in. Using the past down token, we create a logging with token method and call the pertinent angle Phi method for ongoing access to the claims we create user custom plans. Observable When the i. D. Token resort property of angular fire suite at Atocha, we peruse a token object for a claims that custom property, which, if we don't things properly, will be the custom planes we could figure on the server. Currently, that's only the account type, but on casting the result here because claims are useful for the values. Mark External, a PR credentials. Lovett customer strike by day, get account time Method will grab the claims record and return only the account talk value . We want to know what kind of user is locked in a soon as possible. This, of course, could be doing with separate logging close, but this isn't secure. Norris Fasters query in the claims record as soon as the user authenticates and we need to make some change to the user offset observable with switch map, we say when the user credential is present, meaning when the user is locked in, we map to the claims record and then we turn a merged object of the clans record and use a credential or the wise return and observable of no. Now we must change our initial database query for the users data in the user service. We read the account type passport, the Allstate user observable and change the query path accordingly. You can also make any other custom changes like if you use it is a standard user setting the name property to their first name, and it was an enterprise user. We use the company name next to improve the new create. Use a method in our sign of pages. First, the enterprise page. Within the try block, we use the return token to lock the user and because when I speak into the server instead of the client's side firebase sdk, the user creation will take a little longer. However, cloud functions do perform faster than more. They're used for better. You X will display loading element once the user hit Submit, we create a loading instance using the controller outside the try Block the catch. Blunt doesn't have access to the try block, so if an error occurred, we wouldn't be able to dismiss it. Repeat the steps in the standard sign up page. Finally, let's change the log in page to directly uses a different places, depending on their account type I want to use a log. Seem we call the or service get account talk method. Enterprise users are rooted to the exclusive enterprise. Only page standard users to the home page. Time to test it out. Unless you want an additional puzzle. Delay any previous account via the Poly vice consul. Create an ordinary count. There's are loading element. And then we brought to the home page. If you want, check the database the logo and created enterprise a camp, and when you know it, what brought to the V I. P. Page. So they have it. Two methods for role based capabilities, both of which you can do without the user knowing anything, which, of course, is exactly what you want. Claims are my preferred method. They're more flexible, secure, more lending to bear performance. And frankly, the logic is more interesting. Well, perhaps you have a simpler use case or, for some other reason, prefer the method disgusting part one, in which we rely on a simple data by setting each into their own. I guess. See you next time 14. Guards — 1) AngularFire Guards: There are no two ways you can write guards in angular manually or using angular fire. Both perform exactly the same on both Lynn well, to most customization demands. Of course, if you're not using fire based and angular for guards will not work in this video. We're going to look at angular far guards. So if you're using your own authentication or some of the service, check out the next video on classic guards in the A pretty model. TS for import can activate from an in a fire as well as the redirect on, Authorized to and redirect Loved into pipes. These parts are essentially functions with basic, if else logic, which return instruction for the router. We call each function, passing the redirect assassination path as the only argument in an array. If unauthorised that is not logged in, a user should be directed to the log in page logged in users should be brought to the home page. Now we apply the guard by emerging it to the person and path using the spread syntax and can activate method. With this configuration, everything will work fine. We'll misspelled route and tight Viva will result in the use of being brought to a white page. So we had a wall card room using a double asterisk as the path on the home page as the redirect Angular will now send all on recognize routes to the home page in the out model TS on angular Pharrell's guard to the Providers array. Do you properly test you? So we need a lockout feature in the home page, a basic I'm button in the Hasty Mile. Then in this yes far. We call that I got method of oral service and then never gave to the log in page. We're on except or if you already live, he'd save and recomposed. We're locked in and calling reviewing the home page when we look out and try once again to access the home page will brought back to the log in page. Likewise, when we're locked in, we can't access this on a page, which, of course, is how it should be 15. Guards — 2) Classic Guards: manually composed guards are more preferred method when using fire base with Daniela annually for all. Scots are great, but there is something about the explicitness that I like. Perhaps I'm just the stubble conservative, voluntarily stuck in a time warp, hoping for a return or at least greater appreciation off classic methods. Anyway, classy gods start by creating guards directory here. We nesting under the AC or directory, then create a new fall called Logged in Dark Guard Duct. Yes, if you have angular sleep, it installed topping guard should activate the popular menu. Select can activate, guard and rename the class to locked in God. As usual, the stupids provide more code than necessary. We can believe 50% of this creation of the guard named unauthenticated. Use a guard and make sure both have provided in set the route he saw the decorator. The setting tells angular. The guards are core components, so there will be loaded with the at first loads. In the locked in guard. Inject your service and angular router amid the can activate method a sink. Next we call that is locked in method in the also is to determine where to send the user, if you use it isn't Ogden we returned, true, thereby allowing navigation else. We never get to the home page. The Eastern Deem method is very simple. He grabs a single snapshot of the user offset observable, using the first operator and govern the value to a promise. Finally, we have to apply the guard to the relevant roots in the APP. Truly ma, joyful at a can activate property to the lock in and sort of re objects city to an array containing locked in God Are the guard is identical except for the authentication check. This time we went to allow navigation. If the user is logged in and redirected lucking page, we're not. It's also at a console warning to make sure things are working properly. Before, I didn't guard to the home page roots. Now from the lucking page, if we try to sneak into the home page, were sent back to the lucking page, and there's the warning. Similarly, when Lock Team were refused access to the Larkin page and so on a page each time pulled back to the home page, and then you have it two ways to do angular guards 16. Structure — 1) Core Module: every time we generate a new page in Onek, 2 to 3 modules will be declared in the module. Typically, the angular common model Arctic module on Forms module as a number of pages in and up grows , even if you want. Technically right in the code that generates, it's still your responsibility to not let you work so patently violate the D. R Y principle. But this is especially applicable when features are being shared across multiple pages, components and widgets. Perhaps you require the forms module on route A module everywhere needy so you can use the roots. A Link on Engy model attributes Well, you could import these modules in every much unnecessary, but you can also write something called a core module. Core modules might also be called shared modules, but I prefer the term core because it refers to essentials, whereas shared might only be across several components. Say I quote Core is something that is fundamental to the applications operation. If you up isn't lazy loaded, this isn't as important because the app Lockley isn't very complex. Core pipes, directives, widgets and other features could just be declared in the main at module, though even then, separating things may still offer performance benefits, and it will also make things more modular, flexible and therefore readable. But where lazy loading isn't used, the APP module isn't the place for global features. It won't work. Hence, you have two options repeatedly declaring importing and exporting modules and classes or doing early once in something like a court martial. This core module can be declared in every page. Yes, you still have to declare something in every page. But unquestionably one repeated import is better than two or three or 10 orm. Or if you have several custom pipes, directives, header and footer, critical services and so on. Your project might not be these complex yet, but one day he could bay so here in an AK or directory. We have a core module fall named Cord up Module, Don t s. Then we have an empty module with initialize, the rays for declarations, import exports and providers. Let's first generate a random page called Something Altar Unique, like some page in the module on the standard modules included with every generated page for just er, nick and call modules, it's probably worth creating a core module it would look something like this. We had the modules to the imports and then, importantly to the exports. If not, Alito exports, anything imported will only be available to pages or components declared by this very much anyway. Back in some page, we cannot replace the Arctic module on call module with the core module, and it will work exactly lot before. But why do we only for these two? The Forms module is used widely throughout this application. Again, we do exactly the same thing now the forms mantra features. Most importantly, the energy model attributes is available to this page. The more likely scenario is something like this in this application is a custom header. Multiple types of tool tips are point for formatting strings and many buttons that use the root of module. So very simply, we can make them all available globally. Locks up four components. Widgets, pipes and directives. We add them to declarations instead of imports, just start reward in a single pages module. The second step is to import the core module in every page, where the features a required. I've already done that here and that it now if you bring in a new library or write a universal feature. We need only import and export it here, then it becomes available everywhere in the application. 17. Structure — 2) Global Header: following on from the previous video on the usefulness of a called module, wherein we discussed the Don't repeat yourself principle. We're not going to get rid off the repeated on headers and its many Children in every page it's employed, which is all of them. And then we're going to make the head of module seen in that video. First, we generate ahead a component in the article directory, then create a module called Headed Up Module that ts We should cut our way to a basic engine module with snippets at the Arctic module rename the module, then made this module the host off the head of component by declaring on exporting it. Use of a core module doesn't remove the need to declare Bass module's like our nick on common module in modules or features that are imported and exported by the core module itself. For that, we would need something like a cork or module, but that's another video on probably an unnecessary It's a mistake you'll make a least once if you're new to angular. Mistakes, of course, are not only unavoidable but helpful and necessary. Just remember to not repeat them in the new head a component HTML, we write it on head, are identical to one would find in an ordinary onek page. Use of onyx backbone is not covered here because currently it's still it's not very good. The best place is the documentation, but a simple implementation looks all this. We had the Botton in apparent arm buttons element that he forehead for a fact tribute east set to the root pages path which in this case is the home page. Then we have a non title and another on buttons element this time with this lot of end on containing an iron bottom element for the conditional bat one, we have a Boolean in the T s file which we can make an attribute of this head of component by binding it to the input decorator. At this point, we have a working independent header component ready to be put to use anywhere in the app. There are two paces weaken putting The first is in the app component html, therefore making it all sorts of overlay over everything else. But that would defeat the point of creating ahead of module. It is also functionally problematic and not pleasing to the eye without some hacker style CSS over. We can put the main at menu in the APP component. HTML. Again, this could be an independent module and in fact, should be. If you're dealing with several tops of menus, for instance, you might have two or three different types of users each. You require a different menu. You might also let users create their own menus or something similar marked the juicy be hamburger menu. Anyway, for now, we can write the menu in the up component hatched him out. The menu, born in the new custom header, will still pick it up. Then just look in the core module video. We add the head of module to the imports and exports. The last steps are effortless. We add the head element everywhere we wanted, using the selector set in the components decorator, And then we put a value for the backboard and property. If you want to show or hide the back border and there's a result 18. Data — 1) Firestore Data Manipulation: we can reduce the new users and store data. Next, we need a way to get data from the database and present it in the You are in this video. We're going to make an ultra basic card like this while spacing the techniques used to present data like this will work for 90% of the data you're going to work with on the Web. Let's get to it starboard, generating a new page called Account in the Hasty Mile at the head of elements and a basic on a grid at a heading on the norm button with the settings all calm, you want someone to add some global starting for the hatch. One tag for better presentation. Then we crack down on the road and making conditional on the prisons of data. We unwrap the data using the aging pope and assign it to a variable, appropriately named data. The first year of the column will be the use his name with a heading element. The next will be a form. There are two types of forms in angular, reactive and template. Reactive forms give you fine grained control of the U X. They are better for complex forms on where validation and arm observation is critical for simple forms. Template forms suffice. Here we're going to use a template form. Give the form element a template variable reference with the hashtag prefix. Let's call it profile form. We make it a template formed by setting the variable to N G form. The N G submit method, along with many others, is now available on this form element. He was said Engy submit to a submit method and passed a form data by calling profile form that value. This event fires when the former submitted, The reason we're using a form will become clear. As we constructed, we want to make data editing a breeze. Hence the form will be read only unless the user hits the edit button. My first field is an iron item with conditional line styling. If it is true, we had lines actually want known. Then we have the label and import elements. Cornea count Toby is an immutable property, so we make it read. Only then we interpret the data and use the native angular total case point to capitalize value. Our next field is the user name or handle to start with the silent form. We do so make a little different in order to get the app prefix, but notice the on import elements. It has a name and a conditional read only property on energy model Attributes Setting Engy model to dated a handle will set the value of this import to the handle property of the data object we set read only the truth only when entities faults. Because we have two types of users. Let's create a different card for each krayer conditional span elements that displays only when the account or peas enterprise said the Engine model group attribute to company at a company name. Field just saw the handle field above to present the family date. Something more complicated is required. If you remember our song a form, we dismantle the date and saved only the day, month and year. So when Eddie isn't true, we despite the date in hard coded fashion when it it is true, we display that aren't daytime element, we listen for the on change oven for reasons that will get to in a moment. Finally, we have the contact field for standard users do pretty much the same thing. A conditional spun element with an engine model Group Attributes, which wraps his form data in the object property named Whatever this value is general accords with our user data structure, which has a relevant account data inside of general property. Back to the card we have field first name surname on mobile. Finally, we create a conditional result element. If the user maxim edits, we can confirm or cancel on display success or error message in the TS For inject the user service created data observable fed board the document observable of the Users Service and match the necessary data. Next, Make and edit result and company founded a change property now making interface for the incoming form data because they won't always be there, said the general on company properties to optional now for the submit method, make it a sink and cast the incoming data to the interface. Working directly on function argument variables is frowned upon by some purists. To me, it's only bad when it's confusing. Cloning or referencing when unnecessary, just make things ugly. But here it is necessary crony and commune data, using the spread syntax and set it to a constant called changes. You saw the try block. We checked. Whether the company founded date is true, which, if you remember, we set with the island change event. If true, we do the same thing as in the sonnet form extract the day, months and year. Finally, the database Roy on the Y is updated. Errors will be locked to the console on a custom air I displayed to the user. Now for the CSS, we have stars for the handle labels, and Sainz won. Next. Let's create a dynamic menu creating array of menu objects in the APP component. Yes, give a path label on all calm. Then, in the haste tomorrow, we'll probably array past the path to the ruling the Arkan name to a non organ elements and so on. So there's our menu. I can't brings us to the account page. I'm pressing the settings button, and I was editing Troy changes from data on he didn't save. There's the error message, which you want to my bread or bold most on the gallants. You should be more careful than me. You won't see this era. The concert is given a four story invalid data era. Normally This is because you're passing an unaccepted data type on defined map, observable or something counts in our case is because we made a typo on the company founded field. Now, if we reload, draw again, we say all things working nicely. The data was saved and on the home page shows the new data. And of course, this will be reflected in the firebase console if you check it. 19. Data — 2) Local Storage for Better UX: the practice of storing data on the local device has for a long time being standard in with development because native applications are installed on the device. More and more, this is becoming less the case, with new methodologies like service side rendering, progressive Web applications, stateless APS and so on. The benefits of local storage are increasing, becoming less about performance and more about personalization. You're probably familiar with websites that still somehow know who you are, even when you're locked out. Amazon was amongst the first to do this. Now most companies do it. Facebook display even your notification camp performance, personalization or security. There are still many benefits to taken advantage of local storage. Where possible. Achieving these with angular rock is very easy. There's a few libraries on offer. The best one is local forage. Our next local storage module is essentially a wrapper around this library because it's not always needed. Arctic storage must be installed as an additional package on NPM install at Arctic storage on added to the at Montreuil by including in the import with a four recall. Local storage is used the same way. The Arctic controller, on the root out all custom services used here. We're injecting every the constructor of the user service. Then, in the primary logic of the service where the user's data is pulled from fire store on initial application load, we set some local data by calling the set method. The first argument is a key under which the data will be stored. Then we passed the data. For now, let's pass the account or name and handle. It's good practice when creating new common data structures to create that correspond the interface, which you do here in the user models file. The most obvious place to use local data is the log in page. Inject local storage in the constructor at a local property, data cast to the interface and make the NGO on innit method. I sink. Be careful when injecting onyx storage, using AutoCAD play and intelligence. Often the wrong storage module is imported. Make sure it's the one from ironic in N. Jeon in it called local source that gets passing the key used in user service and said the result to the local data property. We also want to make sure the user can clearly state or if they wish created the lead local data method. We can clear the entire local store reduce while this application or just the data onto the my outlook. Okay, then set the local data property to no. Finally, let's use this data in the U I in the hasty mile crack active, conditional on the existence of a truth the local data property. Then create a custom message for the user along with the delete method. Here we're displaying different messages for ages, the type, the handle. And then I was uninspired not you bottom at some stars to the message handled in butter and compile the app. Now, if we log in, then log out refresh. We get our elements and custom message. Of course I'm not Jack Black, so let's do either and hey, presto, I'm once again anonymous. When you do this with absolute Twitter and Facebook, they will most likely still know who you are. Actually, in revolves underwear store on your device to factory settings and clearing your cache phones and preferably using a VPN or accessing very different I p address. There is no longer such thing as true anonymity on the Web 20. Data — 3) Profile Picture: to display images in our application or rather, profile pictures we're going to use for a base cloud storage. If you followed the getting started section of this course, you already have far based storage initialized, if not from far based in its storage, create clouds Story service again. You can use angina snippets or manually talk it out. No, we're also nesting Gate under the Services Directory, which is simply for our unclarity. This will be a core service, so we press provided en route to the decorator Tobler than Eddie Falls before setting them . We're going to use the NGX in which Cropper Library by marry 137 There's a few libraries that serve this purpose. One, even with same name I've tried most of them on non are is easy or reliable as this one. There's a lot of flexibility available using the many properties or just aspect ratio, apple type resource dimensions and the like. Your story with NPM install injects Image Cropper, once it's installed, include the image Proper module in the module. We want to use it now me the home page mantra, creating your own column and add the image proper element the first attributes, we're going to bind his image cropped event to his namesake property, all the properties listed on documentation. We looked at what added his attributes here next to said the image quality to 100. We also want to maintain the aspect ratio and listen to the image cropped event Mark the properties. There are several events available on these elements. Next, we had a save button that displays only when the Cropper is loaded to enable or close. We need the classic haste him our import element. But it's D forties on and limited customize ability is excuse younger French shite. So we're going to do something a little different. Give the import a temporary reference of import, said the talk to foil, except to P and G and J Pic Falls installed to display non and listen to the change of them . Calling a yet created image or bloated method, the entire input element is now not displayed in yuan. Importantly, though it still exists. This will not work with something like NGF, which removes elements all together now We needed I'm Button, which, when clicked, follows the upload mechanism of the native input file We could do this by grabbing the import with its temporary variable and calling the quick method thistle far of the classic false. Like the window of the device, we need a place to the spire uploaded on editing image credit. Deal with an image contain a class. The first child is an image element conditional on the nonexistence of a cropped image on the existence of an already set profile picture in observable form, which you unwrap with the casing pipe and set to a variable named pick. Set the source to this variable using interpolation. You could also try conditional binding here, but for some reason that doesn't perform so well in my experience. Then we add another conditional image element, this time appearing only when the cropped imaged up base 64 property is truth. The question might use. Here is Angeles Elvis operator. It's essentially compression syntax that tells angle it. The first check that the property cropped image exists. Checking for the property of a non existent property will throw an era. Next. Let's add some CSS. We have styling for the image container Dave to make it centered on the nice eyes, then on the image. We cut the corners with the board radius almost Adam vertical margin to the road. Now we get this pretty wise and brains in the home page. Yes, at a profile pic observable to the data object said the corresponding inject the source controller and create image. Following that is an asynchronous image of loaded event. The first thing we check is whether the images over five megabytes, of course, you can not do the circle changing toe wherever you want. If it's too large, we present air a toast with instructions, as we said, the image cropped event to the past Event object, which is passed through the change event of the native import element. In addition to over sauce, followers also need to handle the errors with data connection device Cebu corrupted Fars or otherwise. For that we Macon a sing load image fouled method and present toast when it fires next, reading the method for when the images cropped. This is called by the image crop, the element itself, and it passes the cropped image in addition to some of the data. If you set the output, talk to both, it will contain the image in two forms by a 64 string on the block. Far the output type is set to both by default, which is probably what you want when working with fire Base, for which uploading blood falls is much easier than base 64 images. But we still need the block falls to present it to the user in the U. R. Hence we want both output types. We can assign the image crop property to the past argument. Finally, we need to submit method to set the image, make it a sink and start with the try catch statement in the troll black. We await the update profile pic method on the user's service. Then on success, said the image cropped event to know which will remove the image cropped element from the dump you catch simply log errors to the console for now in the cloud storage service credit . Earlier Injecting unit for storage. The code required here is very simple. Create an open method that takes a path on blood foil, then return the result of Korean upload on Angela for storage. We also need the ability to pull images from the storage database, create an image method passing the given path and then get download. You are out mark with firestorm storage returns observable, so we should fix him with the name with the dollar, sign the clarity almost there in the user service, inject the cloud storage service and create a profile pic property. This will be an observable of the image contend U R L to be uses the image elements source value. If you weren't sure about this Alex dress code, check out the core section on our X chairs and data streaming specifically the video demonstrating the map operator. We're getting this intelligence warning because the property doesn't yet exist on the interface. So let's change that before finally adding the update profile pic method. Again, it's asynchronous, and he takes the image far as a blob. First, we'll build a path to the location in the class of data race in which we want our fault to be uploaded, are highly recommend, use the same path structure as you do with Firestorm. It makes things much simpler, reduces the chance of stupid errors and just make sense. We want the or PLO method of the class every service before dating that uses far so data record with the path to the image. Now far up the app Margene and go to the home page he took blowed. I found the most beautiful picture you can. As you can see, we have this crop mechanism here, which could also be changed to a circle, say the image and head over to the far vice consul here. We could see the parking uses data on his storage. The image fall itself. The next step is optional, but I can't just leave the you are like this. The functionality is good, but we can make the presentation better. It's time, but making things more horizontal in the host Umar at the Allianz Self Center attribute to the first column of the road contain the in which proper? By the way, if you using the latest version of our like you want instead have to add these attributes as an arm along self centered class or simply set the storm annually in the S E SS file. Next, said the Saudis MD attribute to six. This will reduce the column to sort six on medium screens upwards, not the first image element in an NGO container conditional on the crop damage property being full. C. Then we upend the NGF expression of the image element with semi colon Ellis Place order. Now, if the conditions to display the image our own met an N G template with