
Master Firebase authentication in an Angular app, covering Google, Facebook, Twitter, and YouTube sign-ins, plus anonymous, phone, and email authentication, with front-end integration and clean code practices.
Discover firebase as a google managed platform for building mobile and web apps, learn firebase authentication, and manage applications and services like cloud firestore, hosting, and functions via the console.
Create a Firebase app on the Firebase console, create a new project, and explore authentication, templates, and user configurations for Angular integration.
Set up a firebase project and integrate it into an angular app by initializing firebase with the provided config, installing angularfire dependencies, and importing authentication modules to enable sign-in options.
Enable sign-in providers in Firebase authentication by configuring provider settings in the Firebase console, including email and password, to let users sign in with different methods.
Learn to enable email and password sign-in in Firebase by navigating to project dashboard, opening authentication, choosing sign-in methods, enabling email and password, saving, and skipping passwordless sign-in for now.
Navigate to the sign-in method and enable the Google sign-in provider using the pre-filled client id and secret. Click to finish enabling Google sign-in; next video covers Facebook sign-in.
Create a Facebook app on the Facebook developer's website, obtain the app id and app secret, and enable the Facebook sign-in method in Firebase Authentication.
Enable the Twitter sign-in provider in Firebase authentication by creating a Twitter app, configuring its callback URL in Firebase, and entering the consumer key and secret.
Enable the GitHub sign-in provider in Firebase authentication by creating an OAuth app, setting the homepage and authorization callback, and pasting the client ID and secret into Firebase.
Learn how to enable the anonymous sign-in provider in Firebase Authentication within an Angular app, by configuring the dashboard and saving settings for seamless user access.
Enable phone sign-in in the firebase console, test with a verification code, and configure web, iOS, and Android with Google's recaptures to prevent abuse.
Implement front-end styling for Angular Firebase authentication app by importing Bootstrap and Font Awesome, creating custom sign-in button styles for Google, Facebook, Twitter, and email, and applying the user interface.
Implement a complete app component template for Firebase authentication in Angular. Arrange a two-column layout with sign in, sign up, social buttons (Google, Facebook, Twitter, GitHub), an email password form.
Learn to implement Google sign-in in an Angular app using AngularFire, with sign-in via popup and redirect, by handling user credentials and observing auth state.
Implement Facebook, Twitter, and GitHub sign-in in an Angular app using popup and redirect methods, mirroring Google sign-in, binding providers to templates, and retrieving user details.
Explore implementing anonymous sign-in with Firebase Authentication in an Angular app, manage the resulting user credential and unique user ID, and display or sign out with user details.
Learn to sign up a user with email and password using Firebase authentication in Angular. Bind email and password inputs in a form and wire the sign up method.
Implement email and password sign-in and sign-up flows in a single component by toggling sign-in and sign-up state, and switching the user interface accordingly.
Implement phone sign-in in Angular using Firebase authentication, including OTP verification, recaptcha handling, and a window service to manage the sign-in flow and UI state.
Learn to refactor the code by separating concerns, moving business logic to a dedicated service injected into components, eliminating repetition, and modularizing the app component.
Refactor the login flow by moving authentication logic into an Angular service, inject AngularFire, and support multiple providers (Google, Facebook, Twitter, GitHub) with popup or redirect sign-in.
round two of the refactoring defers sign-in and sign-up logic to a centralized auth service, extracting email and password handling, removing component-specific code, and preparing for further separation and testing.
Learn to break a large Angular app component into four reusable child components—logon options, sign up, phone sign-in, and user details—and refactor templates and imports for cleaner code.
Break the app component into multiple child components, relocating sign-in anonymously into the sign-in options, and disable the send button in phone sign-in until the capture is solved.
Breaks the app into reusable Angular child components, toggling sign-in options and wiring Firebase authentication via an auth service to support email/password, phone, and Facebook login.
Learn to implement User Authentication using Facebook, Twitter, Google, Github, Email/Password, Phone, and Anonymous strategies using Firebase Authentication.
We'll start with understanding the Firebase Console. We'll then configure and enable several sign-in methods on Firebase Authentication Providers Section. We'll then implement User Authentication in our Angular App. Finally we'll refactor the code.
By the end of this course, you'll be able to implement User Authentication using social identity providers like Facebook, Google, Twitter, and GitHub. You'll also be able to implement User Authentication using Email/Password, Phone and Anonymous strategies.