Skip to content

Instantly share code, notes, and snippets.

@codediodeio
Last active July 12, 2021 20:09
Show Gist options
  • Save codediodeio/c4e858a4250f86a16bcce0ccb7e010ac to your computer and use it in GitHub Desktop.
Save codediodeio/c4e858a4250f86a16bcce0ccb7e010ac to your computer and use it in GitHub Desktop.
Firebase Phone Login Angular 4
<div [hidden]="user">
<h1>Sign In with Your Phone Number</h1>
<label for="phone">Phone Number</label><br>
<input type="text" [(ngModel)]="phoneNumber.country" class="input" placeholder="1" maxlength="2">
<input type="text" [(ngModel)]="phoneNumber.area" class="input" placeholder="949" maxlength="3">
<input type="text" [(ngModel)]="phoneNumber.prefix" class="input" placeholder="555" maxlength="3">
<input type="text" [(ngModel)]="phoneNumber.line" class="input" placeholder="5555" maxlength="4">
<hr>
<div id="recaptcha-container"></div>
<hr>
<button class="button is-info" (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" class="input">
<button class="button is-success" (click)="verifyLoginCode()">Verify</button>
</div>
</div>
<div *ngIf="user">
<div class="notification is-success">You have successfully logged in with your phone number!</div>
UserId: {{ user?.uid }}
</div>
import { Component, OnInit } from '@angular/core';
import { WindowService } from '../window.service';
import * as firebase from 'firebase';
export class PhoneNumber {
country: string;
area: string;
prefix: string;
line: string;
// format phone numbers as E.164
get e164() {
const num = this.country + this.area + this.prefix + this.line
return `+${num}`
}
}
@Component({
selector: 'phone-login',
templateUrl: './phone-login.component.html',
styleUrls: ['./phone-login.component.scss']
})
export class PhoneLoginComponent implements OnInit {
windowRef: any;
phoneNumber = new PhoneNumber()
verificationCode: string;
user: any;
constructor(private win: WindowService) { }
ngOnInit() {
this.windowRef = this.win.windowRef
this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container')
this.windowRef.recaptchaVerifier
.render()
.then( widgetId => {
this.windowRef.recaptchaWidgetId = widgetId
});
}
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.user = result.user;
})
.catch( error => console.log(error, "Incorrect code entered?"));
}
}
import { Injectable } from '@angular/core';
@Injectable()
export class WindowService {
get windowRef() {
return window
}
}
@LeDucse98
Copy link

You can show NgModule ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment