From the course: Angular: Cloud-Powered Apps with Firebase

Firebase Authentication setup

From the course: Angular: Cloud-Powered Apps with Firebase

Start my 1-month free trial

Firebase Authentication setup

“

- [Instructor] Now that we have set up our web application with Firebase by adding configuration values, we first need to add authentication through the Firebase console. Click on Authentication, then Set up Sign-in Method. We will enable email and password authentication. Let's head to our application now. In the application module, first import the AngularFireAuth module. Import Angular Fire Auth module and this will be from angular/fire/auth and we will go ahead and add that also here to the imports. Let's generate a login component that will provide a form for the user to sign up and log in. Open up your terminal, ng generate component, and we will call this component, login. Once it is created, we see that a Login folder has been created for you here and the login component has been added automatically to our application module. I have provided a starting point for the form and some simple CSS. In the Exercise Files, look under Resources, 02-01, and go ahead and drag the login component template file to the sidebar. Go ahead and replace that and also some CSS here. The classes used for the HTML elements are from the Symantec UI framework. You can visit the Symantec UI documentation site if you wish to have a different look. Next, we want to display this form at the root route of our application. Head over to the application routing module and add this component at the root route. We will add an object here, the path is going to the be the root and the component will be the login component. Also, when working with forms in Angular, be sure to import the forms module form Angular Forms. Import forms module from angular/forms. Let's go ahead and run the application using npm start. Once that is done compiling, you can head to your browser, to localhost port 4200 and verify that the sign-up form displays.

Contents