Phonenumber authentication almost finished

Author: jeroenouw

README.md

@@ -47,7 +47,7 @@ Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app
 * Misc page
 * 404 page
 * Save email (keep in touch)
-* Authentication (Email, Google, Twitter, Facebook, Github and Anonymous)
+* Authentication (Email, Google, Twitter, Facebook, Github, Phonenumber and Anonymous)
 * Verification email after signup
 * Auth Guard
 * Profile
@@ -93,7 +93,7 @@ Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app
 
 ## To Finish List (known issues)
 ### Auth
-* Cellphone authentication
+* Cellphone authentication (optimizing)
 * Optimizing alerts
 * Google, Facebook, Twitter & Github signin/signup
 * Error messages: Email already exists, login failed, registration failed

src/app/app.module.ts

@@ -26,7 +26,8 @@ import {
   DataStorageService,
   AlertService,
   AuthGuardService,
-  AuthService
+  AuthService,
+  WindowService
 } from './components/shared';
 
 // Main
@@ -77,7 +78,8 @@ import { EmailMeComponent } from './components/email-me/email-me.component';
     DataStorageService,
     AlertService,
     AuthGuardService,
-    AuthService
+    AuthService,
+    WindowService
   ],
   bootstrap: [AppComponent]
 })

src/app/components/auth/auth.module.ts

@@ -11,11 +11,13 @@ import { UsersRouting } from './users.routing'
 // Components
 import { SignupComponent } from './signup.component';
 import { SigninComponent } from './signin.component';
+import { PhoneSigninComponent } from './phone-signin/phone-signin.component';
 
 @NgModule({
   declarations: [
     SignupComponent,
     SigninComponent,
+    PhoneSigninComponent
   ],
   imports: [
     CommonModule,
@@ -31,7 +33,8 @@ import { SigninComponent } from './signin.component';
   ],
   exports: [
     SignupComponent,
-    SigninComponent
+    SigninComponent,
+    PhoneSigninComponent
   ]
 })
 export class AuthModule {

src/app/components/auth/phone-signin/phone-signin.component.html

@@ -0,0 +1,39 @@
+<md-card>
+  <div [hidden]="currentUser">
+    <h3>Phone Number login</h3>
+
+    <br/>+
+    <md-input-container>
+      <input mdInput type="text" [(ngModel)]="phoneNumber.country" class="input" placeholder="31" maxlength="2">
+    </md-input-container>
+    <md-input-container>
+      <input mdInput type="text" [(ngModel)]="phoneNumber.area" class="input" placeholder="612" maxlength="3">
+    </md-input-container>
+    <md-input-container>
+      <input mdInput type="text" [(ngModel)]="phoneNumber.prefix" class="input" placeholder="345" maxlength="3">
+    </md-input-container>
+    <md-input-container>
+      <input mdInput type="text" [(ngModel)]="phoneNumber.line" class="input" placeholder="678" maxlength="4">
+    </md-input-container>
+
+    <div id="recaptcha-container"></div><br/>
+
+    <button md-raised-button (click)="sendLoginCode()">SMS Text Login Code</button>
+
+    <div *ngIf="windowRef.confirmationResult">
+      <hr>
+      <label for="code">Enter your Verification Code Here</label><br>
+      <input type="text" name="code" [(ngModel)]="verificationCode">
+
+      <button md-raised-button (click)="verifyLoginCode()">Verify</button>
+    </div>
+
+  </div>
+</md-card>
+
+<div *ngIf="currentUser">
+  You have successfully logged in with your phone number!
+
+  UserId: {{ currentUser?.uid }}
+
+</div>

src/app/components/auth/phone-signin/phone-signin.component.scss

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PhoneSigninComponent } from './phone-signin.component';
+
+describe('PhoneSigninComponent', () => {
+  let component: PhoneSigninComponent;
+  let fixture: ComponentFixture<PhoneSigninComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PhoneSigninComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PhoneSigninComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/auth/phone-signin/phone-signin.component.spec.ts

@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import * as firebase from 'firebase';
+
+import { WindowService, PhoneNumber } from '../../shared';
+
+@Component({
+  selector: 'app-phone-signin',
+  templateUrl: './phone-signin.component.html',
+  styleUrls: ['./phone-signin.component.scss']
+})
+export class PhoneSigninComponent implements OnInit {
+
+  phoneNumber = new PhoneNumber()
+
+  token: string;
+  windowRef: any;
+  verificationCode: string;
+  currentUser: any;
+
+  constructor(private win: WindowService,
+  private router: Router) { }
+
+  ngOnInit() {
+    this.windowRef = this.win.windowRef
+    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')
+
+    this.windowRef.recaptchaVerifier.render()
+  }
+
+  sendLoginCode() {
+    const appVerifier = this.windowRef.recaptchaVerifier;
+    const num = this.phoneNumber.e164;
+    firebase.auth().signInWithPhoneNumber(num, appVerifier)
+      .then(result => {
+          this.windowRef.confirmationResult = result;
+      })
+      .catch( error => console.log(error) );
+  }
+
+  verifyLoginCode() {
+    this.windowRef.confirmationResult
+      .confirm(this.verificationCode)
+      .then( result => {
+        this.currentUser = result.user;
+      }) 
+      .then(response => {
+        this.router.navigate(['/']);
+        firebase.auth().currentUser.getIdToken()
+        .then(
+            (token: string) => this.token = token
+        );
+      }) 
+    .catch( error => console.log(error, "Incorrect code entered?"));
+  }
+}

src/app/components/auth/phone-signin/phone-signin.component.ts

@@ -3,6 +3,9 @@
 <!-- Progress bar -->
 <md-progress-bar *ngIf="loading" mode="indeterminate"></md-progress-bar>
 
+<!-- TEMPORARY -->
+<app-phone-signin></app-phone-signin>
+
 <md-card>  
   <h3>Social login</h3>
   <form (ngSubmit)="onSignInGoogle(g)" #g="ngForm">

src/app/components/auth/signin.component.html

@@ -1,3 +1,4 @@
 export * from './profile.model';
 export * from './user.model';
 export * from './contact.model';
+export * from './phone-number.model';

src/app/components/shared/models/index.ts

@@ -0,0 +1,11 @@
+export class PhoneNumber {
+  country: string;
+  area: string;
+  prefix: string;
+  line: string;
+
+  get e164() {
+    const num = this.country + this.area + this.prefix + this.line
+    return `+${num}`
+  }
+}