Angular 7 Firebase5 CRUD Operations with Reactive FormsDigamber Singh
Learn to create a student record management system app using Angular 7, Firebase5 Database, Reactive Forms, Form Validation, NGX-Pagination and NGX-Toastr.
Understanding router state in angular 7 passing data through angular router s...Katy Slemon
Understanding Router State in Angular 7: Check out this tutorial to explore the new Angular feature for passing data through Angular RouterState with a demo app
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
Integrating consumers IoT devices into Business WorkflowYakov Fain
From the software development perspective IoT is about programming "things", connecting them with each other and integrating them with existing applications. This presentation will demonstrate how IoT-enabled devices from multiple manufacturers can be integrated into a workflow of a business application. You'll see a live demo of using commercial consumer devices as a part of an application that utilizes such technologies such as REST API, OAuth, Websockets, and Java. This presentation will give you an idea of how to go about integration of new devices as they become available on the market.
Angular 7 Firebase5 CRUD Operations with Reactive FormsDigamber Singh
Learn to create a student record management system app using Angular 7, Firebase5 Database, Reactive Forms, Form Validation, NGX-Pagination and NGX-Toastr.
Understanding router state in angular 7 passing data through angular router s...Katy Slemon
Understanding Router State in Angular 7: Check out this tutorial to explore the new Angular feature for passing data through Angular RouterState with a demo app
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
Integrating consumers IoT devices into Business WorkflowYakov Fain
From the software development perspective IoT is about programming "things", connecting them with each other and integrating them with existing applications. This presentation will demonstrate how IoT-enabled devices from multiple manufacturers can be integrated into a workflow of a business application. You'll see a live demo of using commercial consumer devices as a part of an application that utilizes such technologies such as REST API, OAuth, Websockets, and Java. This presentation will give you an idea of how to go about integration of new devices as they become available on the market.
Microsoft identity platform and device authorization flow to use azure servic...Sunil kumar Mohanty
Microsoft Identity platform allows users to sign in to input-constrained devices. It leverages MASL for Java (MSAL4J) from an app that does not have the capability of providing interactive authentication experience. The user visits a web page in their browser to login in. Once login success, the device will able to get access token and able to perform actions on the authorized Azure resources. In this article the access token will be used to publish message to azure service bus.
How to build a chat application with react js, nodejs, and socket.ioKaty Slemon
In the tutorial, we will learn about how to build a chat app using ReactJs, NodeJS, and Socket.IO. Clone the Github repository and play around with the code.
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017Matt Raible
Learn how to set your environment up from scratch, develop a simple app, test it, integrating CSS frameworks (Angular Material or Bootstrap), secure it with OpenID Connect, and deploy it to the cloud.
Source code: https://github.com/mraible/ng-demo
Get rid of controllers in angular 1.5.x start using component directivesMarios Fakiolas
We can now build an AngularJS 1.5.x application by replacing controllers with components. That way we can prepare even better our old applications for their upgrade to Angular 2 and its components ways.
Setting Up Development Environment For Google App Engine & Python | TalenticaTalentica Software
Google App Engine is a PAAS offering from Google Cloud Platform, which enables you to build complex web solutions with significant ease without worrying too much about the scalability or infrastructure management.
Glimpse through our presentation as we explain how to build GAE apps using pycharm with debugging enabled. To know more click here https://www.talentica.com/blogs/setting-up-development-environment-for-google-app-engine-and-python/
Know About Talentica -
Talentica Software is an innovative outsourced product development company that helps startups build their own products. We help technology companies transform their ideas into successful products by partnering in their roadmap from pre-funded startups to a profitable acquisition.
We have successfully built core intellectual property for more than 100 customers so far. We have the deep technological expertise, proven track record, and unique methodology to build products successfully. Our customers include some of the most innovative product companies in the USA, Europe, and India.
To know more about how Talentica have helped startups grow click here https://www.talentica.com/work.html
To know more about Talentica click here https://www.talentica.com/
To get in touch with us click here https://www.talentica.com/contact.htm
This document is about how to Write a CRUD App with Spring Boot Jpa or jdbc. a related example for this document is on github with the following address :
https://github.com/ghorbanihamid/SpringBoot_AOP_JPA_Example
Angular is a complete framework that combines declarative templates, dependency injection, end to end tooling, and integrated best practices in order to solve development challenges. Angular was completely rewritten from its predecessor AngularJS and allows developers to build their applications on web or mobile.
Matthew Gardner explains how to setup a simple Angular app, diving into some of the concepts behind the framework and describe some of the key differences between Angular and AngularJS. Additionally, Matthew will showcase an Angular app which uses the Spotify API.
Learn Angular 4 using your basic knowledge of HTML & JavaScript. Master Angular 4 course & build an advance application using firebase integration. This Angular 4 tutorial covers basic topics that allows users to develop an advance application using firebase integration
A simple tutorial for understanding the basics of angular JS. Very useful for the beginners. Also useful for the quick revision. Very attractive design for the tutorial of angular js.
Easy Step-by-Step Guide to Develop REST APIs with Django REST FrameworkInexture Solutions
Thanks to its advantages, many are starting out with the Django framework. But how do you create REST APIs with it? Well, here’s your quick guide with simple steps and examples.
Microsoft identity platform and device authorization flow to use azure servic...Sunil kumar Mohanty
Microsoft Identity platform allows users to sign in to input-constrained devices. It leverages MASL for Java (MSAL4J) from an app that does not have the capability of providing interactive authentication experience. The user visits a web page in their browser to login in. Once login success, the device will able to get access token and able to perform actions on the authorized Azure resources. In this article the access token will be used to publish message to azure service bus.
How to build a chat application with react js, nodejs, and socket.ioKaty Slemon
In the tutorial, we will learn about how to build a chat app using ReactJs, NodeJS, and Socket.IO. Clone the Github repository and play around with the code.
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017Matt Raible
Learn how to set your environment up from scratch, develop a simple app, test it, integrating CSS frameworks (Angular Material or Bootstrap), secure it with OpenID Connect, and deploy it to the cloud.
Source code: https://github.com/mraible/ng-demo
Get rid of controllers in angular 1.5.x start using component directivesMarios Fakiolas
We can now build an AngularJS 1.5.x application by replacing controllers with components. That way we can prepare even better our old applications for their upgrade to Angular 2 and its components ways.
Setting Up Development Environment For Google App Engine & Python | TalenticaTalentica Software
Google App Engine is a PAAS offering from Google Cloud Platform, which enables you to build complex web solutions with significant ease without worrying too much about the scalability or infrastructure management.
Glimpse through our presentation as we explain how to build GAE apps using pycharm with debugging enabled. To know more click here https://www.talentica.com/blogs/setting-up-development-environment-for-google-app-engine-and-python/
Know About Talentica -
Talentica Software is an innovative outsourced product development company that helps startups build their own products. We help technology companies transform their ideas into successful products by partnering in their roadmap from pre-funded startups to a profitable acquisition.
We have successfully built core intellectual property for more than 100 customers so far. We have the deep technological expertise, proven track record, and unique methodology to build products successfully. Our customers include some of the most innovative product companies in the USA, Europe, and India.
To know more about how Talentica have helped startups grow click here https://www.talentica.com/work.html
To know more about Talentica click here https://www.talentica.com/
To get in touch with us click here https://www.talentica.com/contact.htm
This document is about how to Write a CRUD App with Spring Boot Jpa or jdbc. a related example for this document is on github with the following address :
https://github.com/ghorbanihamid/SpringBoot_AOP_JPA_Example
Angular is a complete framework that combines declarative templates, dependency injection, end to end tooling, and integrated best practices in order to solve development challenges. Angular was completely rewritten from its predecessor AngularJS and allows developers to build their applications on web or mobile.
Matthew Gardner explains how to setup a simple Angular app, diving into some of the concepts behind the framework and describe some of the key differences between Angular and AngularJS. Additionally, Matthew will showcase an Angular app which uses the Spotify API.
Learn Angular 4 using your basic knowledge of HTML & JavaScript. Master Angular 4 course & build an advance application using firebase integration. This Angular 4 tutorial covers basic topics that allows users to develop an advance application using firebase integration
A simple tutorial for understanding the basics of angular JS. Very useful for the beginners. Also useful for the quick revision. Very attractive design for the tutorial of angular js.
Easy Step-by-Step Guide to Develop REST APIs with Django REST FrameworkInexture Solutions
Thanks to its advantages, many are starting out with the Django framework. But how do you create REST APIs with it? Well, here’s your quick guide with simple steps and examples.
Validating user input for accuracy and completeness helps in improving overall data quality. Angular and its form package turns up with a Validators class that has some beneficial validators like minLength, maxLength, required and pattern. However, occasionally if we wish to validate different fields under more complex/custom rules we can make optimum use of custom validator.
Defining custom validators while using Reactive Forms in Angular comes very easy as they are more of regular functions. One can conveniently generate function for custom validators within the component file in case the validator is not supposed to be used elsewhere.
Serverless Angular, Material, Firebase and Google Cloud applicationsLoiane Groner
Presented at DevFest Florida 2019 - January 19, Orlando, FL.
In this talk we'll learn how to use all the power of Google stack technologies (Angular, Material, Firebase and Google Cloud) to develop a full stack application. We'll learn how we can empower a serverless Angular + Material application with Firebase and reactive programming by using realtime database, Firestore, authentication (with different providers) and Firebase hosting. And we if need any other functionality, we can use Cloud Functions or a NodeJS app. This talk will demonstrate the overview of a real world application (40k users), along with CI configuration and some details of the code (the good parts!).
Angular is an open source JavaScript framework that is used to build single page based web applications.A detailed overview of Angular 4, Its features, development environment and components.
Developing a Demo Application with Angular 4 - J2INader Debbabi
Introduction to Angular Material, Angular Router and Angular Http with RxJS library.
Fake REST API set up using json-server.
Demo app source code available at: https://github.com/jeuneingenieurisamm/LangInstitute
Integrating TypeScript with popular frameworks like React or Angular.pdfMobMaxime
Do you also want to catch coding errors while in compilation early in the development process? Follow the guide below to integrate TypeScript into React or Angular.
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
A progressive web app (PWA) delivers an app-like experience through your mobile phone’s browser but has the same flexibility and gestures as a native application. Because they are powered by mobile browsers, they are not particular to any one device, meaning developers no longer need to write separate code for Android and Apple devices.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Full Angular 7 Firebase Authentication System
1. Full Angular 7 Firebase Authentication
System
Hello folks! in this tutorial, I am going to share with you How to create a full step
by step Angular 7 Firebase Authentication System from scratch using Firebase
API?
In this article, you’ll be able to create Firebase authentication system using social
auth provider
For the demo purpose, I’m going to create a basic app in which a user can
perform the following tasks.
Angular 7 Firebase Authentication System’s
Functionalities:
● Sign in with Google
● Sign in with username/password
● Sign up with username/password
● Recover forget password
● Send email verification to a newly created user
2. ● Protect app’s inner pages URL using route guard’s canActivate method
● Prevent user to access sign in and sign up URL when a user is already
logged in
● Maintain logged in state of Firebase user in localStorage
Step by step Explanation
1. Technologies used
2. GitHub project files + project demo link
3. Prerequisite
4. Firebase account set up and AngularFire2 library integration
5. Generate required Angular components
6. Setup router service for navigating between components
7. Create firebase authentication service using Firebase API
8. Create Sign in authentication service using AuthService API
○ Create sign in with Username/Password
○ Create sign in with Google
○ Create sign in with Facebook
9. Create Firebase sign up service using Firebase API in Angular 7
10.Create Firebase forgot password service using Firebase API in Angular 7
11.How to send email Verification using Firebase API in Angular 7?
12.How to use CanActivate method to prevent Access of URLs in Angular 7 app
using route guards?
13.How to maintain logged in state of Firebase user in localStorage with Angular 7?
1. Technologies used
● Node 8.11.1
● Angular CLI 7.0.7
● Angular 7.0.7
● Firebase 5.7.0
● RxJS 6.3.3
● Typescript 3.1.6
2. GitHub Project Files + Project Demo Link
3. GitHub ResourcesProject Demo
3. Prerequisite
– Setup Node JS development environment
Before we move ahead I’m assuming you already have Node JS development
environment set up in your system.
Please follow this link How to Set up Node JS Development Environment?
– Install Angular CLI
Install Angular CLI, Ignore if Angular CLI is already installed.
npm install -g @angular/cli
– Angular 7 Project Set up
Use the given below cmd to setup the Angular project.
ng new angularfiebase-authentication
Once the project is downloaded, get into the project directory.
cd angularfirebase-authentication
Congrats! You are in your project directory.
For the demo purpose, we’ll be using Bootstrap4, use the given below command
to install Bootstrap4 in your project.
npm install bootstrap
Go to angular.json file and replace the given below code with “styles”: [ ] array.
4. "styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Run the following command to start your project.
ng serve --open
How to Setup Angular 7 Project using Bootstrap 4, SASS, Font Awesome, and
Ng Bootstrap?
4. Firebase Account Set up and AngularFire2 Library
Integration
I assume you have already created a basic project in Firebase account, if not then
follow this tutorial How to setup a basic Firebase account and set up a Firebase
Project?
How to include Firebase AngularFire2 library in your Angular app?
Include AngularFire2 library in your Angular 7 app from Node Package
Manager(NPM).
Run the given below command using Angular CLI.
npm install firebase @angular/fire --save
Once the AngularFire2 library included in the app then go to
src/app/app.module.ts file and add the given below code.
// Firebase services + enviorment module
import { AngularFireModule } from "@angular/fire";
5. import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFirestoreModule,
]
})
5. Generate Required Angular Components
In order to create a complete Angular 7 Firebase Authentication system, we are
required to generate components, services, route guards, routing services etc.
Generate Components for Angular 7 Firebase Authentication System App
ng g c components/dashboard
ng g c components/sign-in
ng g c components/sign-up
ng g c components/forgot-password
6. ng g c components/verify-email
6. Setup Router Service for Navigating between
Components
Create Angular router service for navigating between components in Auth app.
When we initially create a new project using Angular CLI. Angular CLI asks to
create routing service where you have to simply choose yes and hit enter.
Digambers-MacBook-Pro:Desktop digambersingh$ ng new
angularfirebase-authentication
? Would you like to add Angular routing? (y/N)
This will create src/app-routing.module.ts file. In our project, we have kept this
file in the src/shared/routing/app-routing.module.ts folder for the better
manageability purpose.
Go to src/shared/routing/app-routing.module.ts file, paste the given below code
for creating navigation service in your Angular 7 Firebase authentication system
app.
import { NgModule } from '@angular/core';
// Required services for navigation
import { Routes, RouterModule } from '@angular/router';
// Import all the components for which navigation service has to be activated
import { SignInComponent } from '../../components/sign-in/sign-in.component';
import { SignUpComponent } from '../../components/sign-up/sign-up.component';
import { DashboardComponent } from
7. '../../components/dashboard/dashboard.component';
import { ForgotPasswordComponent } from
'../../components/forgot-password/forgot-password.component';
import { AuthGuard } from "../../shared/guard/auth.guard";
import { VerifyEmailComponent } from
'../../components/verify-email/verify-email.component';
const routes: Routes = [
{ path: '', redirectTo: '/sign-in', pathMatch: 'full' },
{ path: 'sign-in', component: SignInComponent },
{ path: 'register-user', component: SignUpComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'forgot-password', component: ForgotPasswordComponent },
{ path: 'verify-email-address', component: VerifyEmailComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Go to app.module.ts file and include app routing service and also include in
imports array like given below.
// App routing modules
import { AppRoutingModule } from './shared/routing/app-routing.module';
8.
@NgModule({
declarations: [...],
imports: [
AppRoutingModule
],
providers: [...],
bootstrap: [...]
})
7. Create Firebase Authentication Service using
Firebase API
Generate auth service and user interface files to create a Firebase authentication
system with Angular 7.
– Create user.ts file
ng generate interface shared/services/user
Go to shared/services/user.ts
This user interface class will hold the data types of the User class.
export interface User {
uid: string;
email: string;
displayName: string;
photoURL: string;
9. emailVerified: boolean;
}
– Create auth.service.ts file
This file holds the core logic of our authentication system. I’ll be covering up
social login using Firebase’s Google auth provider. You can also create the login
with Facebook, Twitter, and GitHub later on by following the same method.
I am also going to cover up the sign in and sign up using username/password,
reset forgot password, email verification, route protection using canActivate auth
guard method.
import { Injectable, NgZone } from '@angular/core';
import { User } from "../services/user";
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore, AngularFirestoreDocument } from
'@angular/fire/firestore';
import { Router } from "@angular/router";
@Injectable({
providedIn: 'root'
})
export class AuthService {
userData: any; // Save logged in user data
constructor(
public afs: AngularFirestore, // Inject Firestore service
public afAuth: AngularFireAuth, // Inject Firebase auth service
10. public router: Router,
public ngZone: NgZone // NgZone service to remove outside scope warning
) {
/* Saving user data in localstorage when
logged in and setting up null when logged out */
this.afAuth.authState.subscribe(user => {
if (user) {
this.userData = user;
localStorage.setItem('user', JSON.stringify(this.userData));
JSON.parse(localStorage.getItem('user'));
} else {
localStorage.setItem('user', null);
JSON.parse(localStorage.getItem('user'));
}
})
}
// Sign in with email/password
SignIn(email, password) {
return this.afAuth.auth.signInWithEmailAndPassword(email, password)
.then((result) => {
this.ngZone.run(() => {
this.router.navigate(['dashboard']);
});
this.SetUserData(result.user);
}).catch((error) => {
window.alert(error.message)
11. })
}
// Sign up with email/password
SignUp(email, password) {
return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then((result) => {
/* Call the SendVerificaitonMail() function when new user sign
up and returns promise */
this.SendVerificationMail();
this.SetUserData(result.user);
}).catch((error) => {
window.alert(error.message)
})
}
// Send email verfificaiton when new user sign up
SendVerificationMail() {
return this.afAuth.auth.currentUser.sendEmailVerification()
.then(() => {
this.router.navigate(['verify-email-address']);
})
}
// Reset Forggot password
ForgotPassword(passwordResetEmail) {
return this.afAuth.auth.sendPasswordResetEmail(passwordResetEmail)
12. .then(() => {
window.alert('Password reset email sent, check your inbox.');
}).catch((error) => {
window.alert(error)
})
}
// Returns true when user is looged in and email is verified
get isLoggedIn(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
return (user !== null && user.emailVerified !== false) ? true : false;
}
// Sign in with Google
GoogleAuth() {
return this.AuthLogin(new auth.GoogleAuthProvider());
}
// Auth logic to run auth providers
AuthLogin(provider) {
return this.afAuth.auth.signInWithPopup(provider)
.then((result) => {
this.ngZone.run(() => {
this.router.navigate(['dashboard']);
})
this.SetUserData(result.user);
}).catch((error) => {
13. window.alert(error)
})
}
/* Setting up user data when sign in with username/password,
sign up with username/password and sign in with social auth
provider in Firestore database using AngularFirestore +
AngularFirestoreDocument service */
SetUserData(user) {
const userRef: AngularFirestoreDocument<any> =
this.afs.doc(`users/${user.uid}`);
const userData: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
emailVerified: user.emailVerified
}
return userRef.set(userData, {
merge: true
})
}
// Sign out
SignOut() {
return this.afAuth.auth.signOut().then(() => {
localStorage.removeItem('user');
14. this.router.navigate(['sign-in']);
})
}
}
After that, go to src/app.module.ts file and import authentication service and
pass the AuthService class into providers: [AuthService] array. By doing this our
authentication service will be available throughout the application.
// Auth service
import { AuthService } from "./shared/services/auth.service";
@NgModule({
declarations: [...],
imports: [...],
providers: [AuthService],
bootstrap: [...]
})
8. Create Sign in Authentication Service using
AuthService API
It’s time to consume custom AuthService API, we’ll be consuming following
services using AuthService API.
● Create Sign in with Username and Password
● Create Sign in with Google
● Create Sign in with Facebook
15. In order to consume custom API from AuthService class we need to import
AuthService class into src/app/components/sign-in/sign-in.component.ts file and
then inject AuthService class into the constructor so that these services will be
available throughout the same template.
Go to src/app/components/sign-in/sign-in.component.ts file and paste the
following code.
import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../shared/services/auth.service";
@Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {
constructor(
public authService: AuthService
) { }
ngOnInit() { }
}
We’ve already generated our components, go to
src/app/components/sign-in/sign-in.component.html file and paste the following
code.
17. <button type="button" class="btn googleBtn"
(click)="authService.GoogleAuth()">
<i class="fab fa-google-plus-g"></i>
Log in with Google
</button>
</div>
<div class="forgotPassword">
<span routerLink="/forgot-password">Forgot Password?</span>
</div>
</div>
<div class="redirectToLogin">
<span>Don't have an account?<span class="redirect"
routerLink="/register-user"> Sign Up</span></span>
</div>
</div>
</div>
9. How to Create Firebase Sign up Service using
Firebase API in Angular 7?
In this section, I am going to share with you, how to create Firebase sign up
service using Firebase API in Angular 7?
Go to src/app/components/sign-up/sign-up.component.ts file and add the
following code.
20. </div>
<!-- Continue with Facebook -->
<div class="formGroup">
<button type="button" class="btn facebookBtn"
(click)="authService.FacebookAuth()">
<i class="fab fa-facebook"></i>
Continue with Facebook
</button>
</div>
</div>
<div class="redirectToLogin">
<span>Already have an account? <span class="redirect"
routerLink="/sign-in">Log In</span></span>
</div>
</div>
</div>
10. How to Create Firebase Forgot Password Service
using Firebase API in Angular 7?
We are going to create Firebase forgot password service using Firebase API in
Angular 7using our custom made AuthService API.
Go to src/app/components/forgot-password/forgot-password.component.ts add
the following code.
22.
<p class="text-center">Please enter your email address to request a
password reset.</p>
<div class="formGroup">
<input type="email" class="formControl" placeholder="Email Address"
#passwordResetEmail required>
</div>
<!-- Calling ForgotPassword from AuthService Api -->
<div class="formGroup">
<input type="submit" class="btn btnPrimary" value="Reset Password"
(click)="authService.ForgotPassword(passwordResetEmail.value)">
</div>
</div>
<div class="redirectToLogin">
<span>Go back to ? <span class="redirect" routerLink="/sign-in">Log
In</span></span>
</div>
</div>
</div>
11. How to Send Email Verification using Firebase
API in Angular 7?
23. Firebase allows us to send email verification smoothly. I am going to show you
how you can achieve this functionality easily using Firebase API.
Go to src/app/components/verify-email/verify-email.component.ts file and add
the given below code.
import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../shared/services/auth.service";
@Component({
selector: 'app-verify-email',
templateUrl: './verify-email.component.html',
styleUrls: ['./verify-email.component.css']
})
export class VerifyEmailComponent implements OnInit {
constructor(
public authService: AuthService
) { }
ngOnInit() {
}
}
Go to src/app/components/verify-email/verify-email.component.html file and add
the given below code.
<div class="displayTable">
<div class="displayTableCell">
24.
<div class="authBlock">
<h3>Thank You for Registering</h3>
<div class="formGroup" *ngIf="authService.userData as user">
<p class="text-center">We have sent a confirmation email to
<strong>{{user.email}}</strong>.</p>
<p class="text-center">Please check your email and click on the link to
verfiy your email address.</p>
</div>
<!-- Calling SendVerificationMail() method using authService Api -->
<div class="formGroup">
<button type="button" class="btn btnPrimary"
(click)="authService.SendVerificationMail()">
<i class="fas fa-redo-alt"></i>
Resend Verification Email
</button>
</div>
</div>
<div class="redirectToLogin">
<span>Go back to?<span class="redirect" routerLink="/sign-in"> Sign
in</span></span>
</div>
25. </div>
</div>
12. How to Use CanActivate method to Prevent
Access of URL in Angular 7 App using Route
Guards?
In this section, I will be showing you how you can secure your app’s routes from
unauthorized access using canActivate() route guard method. This method is
pretty helpful when we need to secure our app’s URL.
First, go to src/app/shared/services/auth.service.ts file and look for the
isLoggedIn() method. This function returns the boolean result to true when the
user is logged in && user’s email is verified. If either condition doesn’t match it
will return false and doesn’t allow users to access the desired pages.
import { AngularFireAuth } from "@angular/fire/auth";
export class AuthService {
userData: any; // Save logged in user data
constructor(
public afAuth: AngularFireAuth, // Inject Firebase auth service
) {
/* Saving user data in localstorage when
logged in and setting up null when logged out */
this.afAuth.authState.subscribe(user => {
if (user) {
this.userData = user;
localStorage.setItem('user', JSON.stringify(this.userData));
26. JSON.parse(localStorage.getItem('user'));
} else {
localStorage.setItem('user', null);
JSON.parse(localStorage.getItem('user'));
}
})
}
// Returns true when user is looged in and email is verified
get isLoggedIn(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
return (user !== null && user.emailVerified !== false) ? true : false;
}
}
We have to secure all the inner pages in the app which are only accessible to
logged in users.
To get this functionality, we have to generate route guard files. Run the below
command to create route guards.
ng generate guard shared/guard/auth
Go to src/app/shared/guard/auth.guard.ts file and include the following code.
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router }
from '@angular/router';
import { AuthService } from "../../shared/services/auth.service";
27. import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(
public authService: AuthService,
public router: Router
){ }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> |
boolean {
if(this.authService.isLoggedIn !== true) {
this.router.navigate(['sign-in'])
}
return true;
}
}
We have successfully secured our app’s inner pages now if no user will be able
to access our app’s inner pages unless they are logged in. If anybody puts the
28. inner page’s URL in the browser directly then they will be redirected to the
sign-in page.
Let’s create another guard which will prevent access for sign in, sign up,
password recovery and email verification pages when the user is already logged
in.
Run the below command to generate route guard.
ng generate guard shared/guard/secure-inner-pages.guard.ts
Go to src/app/shared/guard/secure-inner-pages.guard.ts file and include the
following code.
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router }
from '@angular/router';
import { AuthService } from "../../shared/services/auth.service";
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SecureInnerPagesGuard implements CanActivate {
constructor(
public authService: AuthService,
public router: Router
) { }
canActivate(
29. next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> |
boolean {
if(this.authService.isLoggedIn) {
window.alert("You are not allowed to access this URL!");
this.router.navigate(['dashboard'])
}
return true;
}
}
We’ve successfully created canActivated guards now we have to include these
guards in routes services.
Go to src/app/shared/routing/app-routing.module.ts file.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// Required components for which route services to be activated
import { SignInComponent } from '../../components/sign-in/sign-in.component';
import { SignUpComponent } from '../../components/sign-up/sign-up.component';
import { DashboardComponent } from
'../../components/dashboard/dashboard.component';
import { ForgotPasswordComponent } from
'../../components/forgot-password/forgot-password.component';
import { VerifyEmailComponent } from
'../../components/verify-email/verify-email.component';
31.
export class AppRoutingModule { }
13. How to Maintain Logged in State of Firebase
User in localStorage with Angular 7?
I will be discussing with you how you can maintain the logged in user data in
Local Storage with Angular 7.
Our logic is pretty straightforward when the user is logged in we will save the
user data in Local Storage, user details will be available even if we refresh the
page. We will remove the user data from local storage if we log out from the
app.
Without wasting time let’s write our logic.
Go to src/app/services/auth.service.ts file and add the given below code.
import { Injectable, NgZone } from '@angular/core';
import { User } from "../services/user";
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore, AngularFirestoreDocument } from
'@angular/fire/firestore';
import { Router } from "@angular/router";
@Injectable({
providedIn: 'root'
})
export class AuthService {
userData: any; // Save logged in user data
32. constructor(
public afs: AngularFirestore, // Inject Firestore service
public afAuth: AngularFireAuth, // Inject Firebase auth service
public router: Router,
public ngZone: NgZone // NgZone service to remove outside scope warning
) {
/* Saving user data in localstorage when
logged in and setting up null when logged out */
this.afAuth.authState.subscribe(user => {
if (user) {
this.userData = user;
localStorage.setItem('user', JSON.stringify(this.userData));
JSON.parse(localStorage.getItem('user'));
} else {
localStorage.setItem('user', null);
JSON.parse(localStorage.getItem('user'));
}
})
}
// Sign in with email/password
SignIn(email, password) {
return this.afAuth.auth.signInWithEmailAndPassword(email, password)
.then((result) => {
this.ngZone.run(() => {
this.router.navigate(['dashboard']);
});
33. this.SetUserData(result.user);
}).catch((error) => {
window.alert(error.message)
})
}
// Sign up with email/password
SignUp(email, password) {
return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then((result) => {
/* Call the SendVerificaitonMail() function when new user sign
up and returns promise */
this.SendVerificationMail();
this.SetUserData(result.user);
}).catch((error) => {
window.alert(error.message)
})
}
// Sign in with Google
GoogleAuth() {
return this.AuthLogin(new auth.GoogleAuthProvider());
}
// Auth logic to run auth providers
AuthLogin(provider) {
return this.afAuth.auth.signInWithPopup(provider)
34. .then((result) => {
this.ngZone.run(() => {
this.router.navigate(['dashboard']);
})
this.SetUserData(result.user);
}).catch((error) => {
window.alert(error)
})
}
/* Setting up user data when sign in with username/password,
sign up with username/password and sign in with social auth
provider in Firestore database using AngularFirestore +
AngularFirestoreDocument service */
SetUserData(user) {
const userRef: AngularFirestoreDocument<any> =
this.afs.doc(`users/${user.uid}`);
const userData: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
emailVerified: user.emailVerified
}
return userRef.set(userData, {
merge: true
})
35. }
// Sign out
SignOut() {
return this.afAuth.auth.signOut().then(() => {
localStorage.removeItem('user');
this.router.navigate(['sign-in']);
})
}
}
Consume AuthService API just go to
src/app/components/dashboard/dashboard.component.html file and add the
following code.
<!-- Top navigation -->
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0
shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0"
routerLink="/register-student">
<img class="brand-logo" src="assets/logo-positronx-white.svg"
alt="positronX.io Logo">
<span class="dasboard-text">Dashboard</span>
</a>
</nav>
<!-- Sidebar navigation -->
37. </div>
<!-- Show user data when logged in -->
<div class="row" *ngIf="authService.userData as user">
<div class="col-md-12">
<div class="media">
<img class="align-self-start mr-5 img-thumbnail rounded-circle"
src="{{(user.photoURL) ? user.photoURL : '/assets/dummy-user.png'}}"
alt="{{user.displayName}}">
<div class="media-body">
<h1>Hello: <strong>{{(user.displayName) ? user.displayName :
'User'}}</strong></h1>
<p>User ID: <strong>{{user.uid}}</strong></p>
<p>Email: <strong>{{user.email}}</strong></p>
<p>Email Verified: <strong>{{user.emailVerified}}</strong></p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
It will look like this.
38.
You can check out the project file on my GitHub repo here and check out the
demo on this link.
Thank a lot for taking the time to read this article, I believe this tutorial has been
helpful to you. If you think this has helped you can put a star on my GitHub repo
here.
Thanks! Kindly share, this tutorial with others. You can also follow me on Twitter
@ImDigamberSingh