Cloud-Powered Apps with Angular & Firebase: Part III

Setup Firebase Authentication | sign out

This what my app demo after completing Part III

Displaying Authenticated User Profile

Most if not all web and mobile applications we use on a daily basis have required authentication and provide sign up options. Then display a series of information related to that specific user (personal information) and other data to which the authenticated user has access too.

So, now that we have implemented user sign up and log in, we need to be able to display the currently authenticated user info on a profile page. Which will also provide a better user experience if the user gets routed to a profile page where they can see their information.

Let’s go to the Profile Component that we generated earlier and make. Looking at the application routing module (app-routing.module.ts):

...
const routes: Routes = [
  ...
{
    path: 'profile/:id',
    component: ProfileComponent,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: onlyAllowSelf}
...

The profile route is “profile/:id”. Where id is the authenticated user-id. Now, once the user successfully signs up and/or logs in, we want to take them to this new ProfileComponent which is the user profile page that displays personal info and other data to which the user has access to.

The AngularFire library allows you to easily grab ahold of the currently authenticated user. This was already done in the login.component.ts, in async onSubmit() function:

...
async onSubmit(form: NgForm) {
  ...
  try {
    if (this.isSignUp) {
      ...
    }else{
      ...
    }
    const uid = resp.user.uid;
    this.router.navigate([`/profile/${uid}`]);
  }catch (error) {
   ...
}
catch (error) {
  ...
}

Profile Component

First thing first, verify that a user is routed to the new profile page after sign up and/or log in.

profile.component.ts

my profile.component.ts

User logout

I implemented some common logic to my user logout action. Meaning when the user clicks “sign out”, this action logs out the user using the firebase service and also redirects the user back to the login page.

So, instead of injecting again the AngularFireAuth service in profile.component.ts, I created my own wrapper authentication service in order to encapsulate the common logic on logout action.

Run the following command to generate a service (I named mine auth in a core folder) as shown below:

ng g s core/auth

I implement a logout() method in auth.service.ts that simply signs out a firebase by calling the signout() method. And then route the user to the route page (which is our login page):

auth.service.ts

I then inject my new AuthService in profile.component.ts and created a logout () method that simply calls the logout() method on my new AuthService.

profile.component.ts

my profile.component.ts

profile.component.html

For the purpose of this demo, I’m displaying the following on the user profile page :

• the user name and a sign out button on the top right corner
• user card info with the user name, email, and id value
• a fake cart shopping data that only authenticated users can view.

...
<div *ngIf="afAuth.user | async as user">
...

We will display the user info and fake cart shopping data only if we have the currently authenticated user. Since that is an observable, we use the async type and then store that as the user variable. Let’s go ahead and grab the Name, user.displayName. We can also grab the email, and lastly, we will grab the user id.

...
<span>{{ user.displayName }}</span>
...
<h5><strong>{{ user.email }}</strong></h5>
<h5><strong>User ID: {{ user.uid }}</strong></h5>
...

To see all the available information, you can refer to the firebase.User documentation

my profile.comonent.html

User logout

On my HTML template, the sign-out button on the top right corner calls the logout() function:

...
<button (click)="logout()">
  Sign out
</button>
...

At this point, we are all done setting up Firebase authentication. We’ll explore Firebase Cloud Storage and serverless function in the next series. if you have issues running your app and would live to review mine. Check my demo full code on my GitHub repo.

Now to set up continuous integrity and continuous delivery on your app project workflow; You might also wanna check out: How to deploy Angular App to Firebase Hosting using GitHub Actions

Cheers!!