In Part 1 of this series, I installed Bootstrap and Firebase into the tic-tac-toe app. Adding basic authentication with Firebase is straight forward. To add the login feature we will generate a new login component and a new authentication service. For additional reading, here is the Firebase documentation on the authentication service.
Using the Angular CLI, we can generate a new service.
> ng generate service auth
This will generate two files,
Inside AuthService I am using an
Observable to keep track of whether a user is authenticated. The service uses the Firebase
onAuthStateChanged to update the authenticated Observable with the next value. Later we will see how the
isAuthenticated method in AuthService is used to create a route-guard for allowing or denying access to certain routes. Additionally, I added a method to AuthService which takes an e-mail address and password as strings. This is a straight pass through to the Firebase
signInWithEmailAndPassword method. You can find the full source code for AuthService up to this point on GitHub.
Again, using the Angular CLI, we can quickly generate the new Login component.
> ng generate component login
I grabbed the example login form for Bootstrap, and bound the e-mail and password forms to members in the login component class. For the data binding to work I had to add the FormsModule from @angular/forms to the imports of my main AppModule. The LoginComponent consumes our previously created AuthService as a dependency in the constructor. I added a single method,
signInWithEmail which will in turn use the AuthService. This will be called when the user selects the “Submit” button on the form, using the
(click)="signInWithEmail()" construct in the template (*.html) file. For now I am simply printing to the the console when a user is successfully authenticated (i.e. “<user-id> is authenticated!”).
Trying out the login form with a test user I created in Firebase printed
5uv8QjYfDENrKDRtIcJQMI8ErFr2 is authenticated!