Typolino – User Registration

Okay, maybe I should have added that before. But if it should ever be possible to use the tool online we need a possibility to register new users.

I think typolino should support 3 ways:

• email / password
• email link
• anonymous

Enable Anonymous

This needs to be enabled in the Firebase console.

Registration Page

Now there is no way around a registration page. But to start with, we keep it as simple as possible.

ng g component register

…and register the route. I think we can use the same guard configuration as for the login page.

The template should offer three sections.

<h2>Registrieren</h2>
<div>
    <h3>Benutzername und Passwort</h3>
    <input [(ngModel)]="email" type="text">
    <input [(ngModel)]="password" type="password">
    <button (click)="signup()" pButton type="button" label="Anmelden" icon="pi pi-check"></button>

</div>

<div>
    <h3>E-Mail Link</h3>
    <input [(ngModel)]="email" type="text">
    <button (click)="signupEmailLink()" pButton type="button" label="Mit E-Mail Link anmelden"
        icon="pi pi-check"></button>

</div>

<div>
    <h3>Anonymer Zugriff</h3>
    <button (click)="signupAnonymous()" pButton type="button" label="Anonym anmelden" icon="pi pi-check"></button>
</div>

Anonymous login

The anonymous login is super simple to implement.

signupAnonymous() {
    this.fireAuth.signInAnonymously().then(() => {
      this.navigationService.showLessons();
    });
  }

Email / Password

This one is also quite easy. After creating the user you are already part of the Typolino family.

  signup() {
    this.fireAuth
      .createUserWithEmailAndPassword(this.email, this.password)
      .then(() => {
        this.navigationService.showLessons();
      });
  }

Email link

Never used that one before. But it requires some extra steps. First of all sending the link via mail (we will cleanup the localStorage part later):

  signupEmailLink() {
    const actionCodeSettings = {
      url: 'https://typolino.web.app/completeSignup',
      handleCodeInApp: true,
    };
    this.fireAuth
      .sendSignInLinkToEmail(this.email, actionCodeSettings)
      .then(() => {
        window.localStorage.setItem('emailForSignIn', this.email);
      });
  }

The user should get an email to complete the registration. This way he confirms to be the owner of the email address. To complete the registration we need to provide a URL to be invoked. For this we create a new component, provide the route and implement a simple forward operation in case the registration was successful.

ng g component complete-signup

Register the route:

  {
    path: 'completeSignup',
    component: CompleteSignupComponent,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: redirectLoggedInToLessons }
  },

…and the actual signup completion, simple version without proper error handling:

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { NavigationService } from '../navigation.service';

@Component({
  selector: 'app-complete-signup',
  templateUrl: './complete-signup.component.html',
  styleUrls: ['./complete-signup.component.less'],
})
export class CompleteSignupComponent implements OnInit {
  constructor(
    private fireAuth: AngularFireAuth,
    private navigationService: NavigationService
  ) {}

  ngOnInit(): void {
    this.fireAuth
      .isSignInWithEmailLink(window.location.href)
      .then((isSignInWithEmailLink) => {
        if (isSignInWithEmailLink) {
          const email = window.localStorage.getItem('emailForSignIn');
          this.fireAuth
            .signInWithEmailLink(email, window.location.href)
            .then((result) => {
              window.localStorage.removeItem('emailForSignIn');
              this.navigationService.showLessons();
            })
            .catch((error) => {
              console.log(error);
            });
        }
      });
  }
}

Done

We added three different ways to register to Typolino in less than an hour. What I really like most about Firebase is that it never gives me the feeling of just importing magic – I always feel in full control of the application. Next we will add some logic to keep track over the completion / progress of each individual user.