{"id":101827,"date":"2020-02-05T15:00:29","date_gmt":"2020-02-05T13:00:29","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=101827"},"modified":"2020-02-04T13:48:24","modified_gmt":"2020-02-04T11:48:24","slug":"firebase-authentication-with-angular","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html","title":{"rendered":"Firebase Authentication with Angular"},"content":{"rendered":"<p>Welcome readers, in this tutorial, we will implement <span style=\"text-decoration: underline;\">Email\/Password Authentication via Firebase in an angular application<\/span>.<\/p>\n<h2 class=\"wp-block-heading\">1. Introduction<\/h2>\n<ul class=\"wp-block-list\">\n<li><strong>Angular<\/strong> is a Typescript-based open-source framework that helps developers build single-page applications<\/li>\n<li>Offers Object-oriented features and supports the dynamic loading of the pages<\/li>\n<li>Supports Two-way data binding, Property (<code>[]<\/code>), and Event (<code>()<\/code>) binding techniques<\/li>\n<li>Supports command-line-interface to easily initiate and manage the angular projects from the command line<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\">1.1 What is Firebase?<\/h3>\n<ul class=\"wp-block-list\">\n<li>It is a Backend-As-A-Service that helps developers to write a high-quality applications<\/li>\n<li>If offers: Authentication, Database, Hosting, Real-time data synchronization and automatic update notifications<\/li>\n<li>And many more. . . . .<\/li>\n<\/ul>\n<p>Now open the visual studio code and let us see how to implement this tutorial in the angular framework.<\/p>\n<h2 class=\"wp-block-heading\">2. Firebase Authentication with Angular<\/h2>\n<p>Here is a systematic guide for implementing this tutorial.<\/p>\n<h3 class=\"wp-block-heading\">2.1 Tools Used<\/h3>\n<p>We are using Visual Studio Code and Node Terminal to compile and execute the angular code on a browser.<\/p>\n<h3 class=\"wp-block-heading\">2.2 Project Structure<\/h3>\n<p>In case you are confused about where you should create the corresponding files or folder, let us review the project structure of the angular application.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"406\" height=\"746\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-project-structure-img1.jpg\" alt=\"Firebase Authentication - Application Structure\" class=\"wp-image-101828\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-project-structure-img1.jpg 406w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-project-structure-img1-163x300.jpg 163w\" sizes=\"(max-width: 406px) 100vw, 406px\" \/><figcaption>Fig. 1: Application Structure<\/figcaption><\/figure>\n<\/div>\n<h2>3. Creating a Firebase Project<\/h2>\n<p>If developers already know how to set up a project in firebase, they can <em>skip<\/em> reading this section. If not, they simply need to login to <a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Firebase console<\/a> and click on <strong>Create a Project<\/strong> button.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"701\" height=\"402\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img1.jpg\" alt=\"Firebase Authentication - Creating a project\" class=\"wp-image-101829\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img1.jpg 701w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img1-300x172.jpg 300w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><figcaption>Fig. 2: Creating a project<\/figcaption><\/figure>\n<\/div>\n<p>Once the project is created, click on the project\u2019s administrator dashboard. On the dashboard, go to <code>Develop -&gt; Authentication<\/code>, click on <strong>Add Firebase to a web app<\/strong> button.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"758\" height=\"411\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img2.jpg\" alt=\"Firebase Authentication - Add Firebase to a web app\" class=\"wp-image-101830\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img2.jpg 758w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img2-300x163.jpg 300w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><figcaption>Fig. 3: Add Firebase to a web app<\/figcaption><\/figure>\n<\/div>\n<p>A popup will be opened and enter the details. Click on the <strong>Register app<\/strong> button to generate the Firebase SDK information that contains the firebase configuration.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"528\" height=\"327\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img3.jpg\" alt=\"\" class=\"wp-image-101831\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img3.jpg 528w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img3-300x186.jpg 300w\" sizes=\"(max-width: 528px) 100vw, 528px\" \/><figcaption>Fig. 4: Generating Firebase SDK information<\/figcaption><\/figure>\n<\/div>\n<p>Copy this information to the clipboard and we will use this information later while installing the Firebase SDK from npm.<\/p>\n<p><span style=\"text-decoration: underline\"><em>Sample SDK information<\/em><\/span><\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">\/\/ Your web app's Firebase configuration.\nvar firebaseConfig = {\n  apiKey: \"&lt;some_api_key&gt;\",\n  authDomain: \"&lt;some_auth_domain_url&gt;\",\n  databaseURL: \"&lt;some_database_url&gt;\",\n  projectId: \"&lt;some_project_id&gt;\",\n  storageBucket: \"&lt;some_storage_bucket&gt;\",\n  messagingSenderId: \"&lt;some_messaging_sender_id&gt;\",\n  appId: \"&lt;some_application_id&gt;\"\n};\n<\/pre>\n<p>Next, we\u2019ll enable the Email authentication for the project. On the dashboard, go to the <code>Develop -&gt; Authentication<\/code>, click on the <strong>Sign-in method<\/strong> button. Click on &#8220;Email\/Password&#8221; and then on <em>Enable<\/em>.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"818\" height=\"294\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img4.jpg\" alt=\"\" class=\"wp-image-101832\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img4.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img4-300x108.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/firebase-project-creation-img4-768x276.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 5: Enabling Email\/Password for Firebase project <\/figcaption><\/figure>\n<\/div>\n<p>And voila you are done setting up the minimal configuration required to implement this tutorial. Let us move ahead and start creating the angular application for this tutorial.<\/p>\n<h2 class=\"wp-block-heading\">4. Creating Angular application<\/h2>\n<p>Run the <code>ng new angular-authentication-firebase<\/code> command in the npm console to create a new angular project. Once the new project is created, execute the following commands in the npm console to install and save angular-firebase dependency required for this example.<\/p>\n<pre class=\"wp-block-preformatted brush:html; wrap-lines:false;\">npm install firebase angularfire2 --save<\/pre>\n<h3 class=\"wp-block-heading\">4.1 Adding Firebase configuration to Environment file<\/h3>\n<p>Let us add the Firebase configuration information to the application\u2019s <code>src\/environments\/environment.ts<\/code> file. In this file, we\u2019ll specify the Firebase API and project credentials to the environment variable.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>environment.ts<\/em><\/span><\/p>\n<pre class=\"wp-block-preformatted brush:js; wrap-lines:false;\">export const environment = {\n  production: false,\n  firebase: {\n    apiKey: \"\",\n    authDomain: \"\",\n    databaseURL: \"\",\n    projectId: \"\",\n    storageBucket: \"\",\n    messagingSenderId: \"\",\n    appId: \"\"\n  }\n};\n<\/pre>\n<p><em>Note<\/em>: Developers can find these values in the firebase console if developers click on Add Firebase to the web app.<\/p>\n<h3 class=\"wp-block-heading\">4.2 Injecting Angular Firebase module<\/h3>\n<p>Import and inject the Angular Firebase module in the <code>src\/app\/app.module.ts<\/code> file. In this file, we\u2019ll also import the application\u2019s environment file. Add the following code to the file.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>app.module.ts<\/em><\/span><\/p>\n<pre class=\"wp-block-preformatted brush:js; wrap-lines:false;\">import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\nimport { AppComponent } from '.\/app.component';\nimport { FormsModule } from '@angular\/forms';\n\n\/\/ Importing the application\u2019s environment file.\nimport { environment } from '..\/environments\/environment';\n\n\/\/ Angular Firebase module changes.\nimport { AngularFireModule } from 'angularfire2';\nimport { AngularFireAuthModule } from 'angularfire2\/auth';\n\n\/\/ Authentication service.\nimport { AuthService } from '..\/app\/auth.service';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    AngularFireModule.initializeApp(environment.firebase),\n    AngularFireAuthModule\n  ],\n  providers: [AuthService],\n  bootstrap: [AppComponent]\n})\n\nexport class AppModule { }\n<\/pre>\n<h3 class=\"wp-block-heading\">4.3 Creating an Authentication Service<\/h3>\n<p>Authentication service is a central place that maintains the login, logout and sign-up functionality for the users. We can create the authentication service by using the following Angular CLI command i.e. <code>ng generate service auth<\/code>. Add the following code to the file that consumes the <em>AngularFireAuth object to interact with Firebase.<\/em><\/p>\n<p><em>Note<\/em>: Since the <code>AngularFireAuth.auth<\/code> method return promises, so we\u2019ll use then and catch to handle success and error scenario respectively.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>auth.service.ts<\/em><\/span><\/p>\n<pre class=\"wp-block-preformatted brush:js; wrap-lines:false;\">import { Injectable } from '@angular\/core';\n\nimport { AngularFireAuth } from 'angularfire2\/auth';\nimport * as firebase from 'firebase\/app';\n\n\/\/ For try-catch mechanism.\nimport { Observable } from 'rxjs\/internal\/Observable';\n\n@Injectable({\n  providedIn: 'root'\n})\n\nexport class AuthService {\n\n  user: Observable&lt;firebase.User&gt;;\n  err: String;\n  \n  constructor(private firebaseAuth: AngularFireAuth) {\n    this.user = firebaseAuth.authState;\n  }\n\n  \/\/ To sign up a new user.\n  signup(emailAddress: string, password: string) {\n    this.firebaseAuth\n      .auth\n      .createUserWithEmailAndPassword(emailAddress, password)\n      .then(value =&gt; {\n        console.log('Success! User is successfully registered.', value.user.email);\n      })\n      .catch(error =&gt; {\n        this.err = error.message;\n        console.log('Something went wrong:', error);\n      });\n  }\n\n  \/\/ To login a valid user.\n  login(emailAddress: string, password: string) {\n    this.firebaseAuth\n      .auth\n      .signInWithEmailAndPassword(emailAddress, password)\n      .then(value =&gt; {\n        console.log('User successfully logged in!');\n      })\n      .catch(error =&gt; {\n        this.err = error.message;\n        console.log('Something went wrong:', error);\n      });\n  }\n\n  \/\/ To logout an authenticated user.\n  logout() {\n    this.firebaseAuth\n      .auth\n      .signOut();\n  }\n}\n<\/pre>\n<h3 class=\"wp-block-heading\">4.4 Creating Component class<\/h3>\n<p>As the authentication service is in place now, we\u2019ll create the component class that allows for login, log out and sign-up facilities.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>app.component.ts<\/em><\/span><\/p>\n<pre class=\"wp-block-preformatted brush:js; wrap-lines:false;\">import { Component } from '@angular\/core';\nimport { AuthService } from '.\/auth.service';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\n\nexport class AppComponent {\n  title = '\"Angular Authentication via Firebase\"';\n\n  emailAddress: string;\n  password: string;\n\n  constructor(public authService: AuthService) { }\n\n  signup() {\n    this.authService.signup(this.emailAddress, this.password);\n    this.emailAddress = this.password = '';\n  }\n\n  login() {\n    this.authService.login(this.emailAddress, this.password);\n    this.emailAddress = this.password = '';    \n  }\n\n  logout() {\n    console.log('User is successfully logged out.')\n    this.authService.logout();\n  }\n}\n<\/pre>\n<h3 class=\"wp-block-heading\">4.5 Creating a Component template<\/h3>\n<p>The authentication template is an easy pee and uses the <em>async<\/em> pipe on the Auth Service to check if there is a logged-in user or not.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>app.component.html<\/em><\/span><\/p>\n<pre class=\"wp-block-preformatted brush:html; wrap-lines:false;\">&lt;!DOCTYPE&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n  &lt;link href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\" rel=\"stylesheet\" \/&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n  &lt;div class=\"container\"&gt;\n    &lt;div class=\"row\"&gt;\n      &lt;h2 style=\"text-align:center\"&gt;&lt;i&gt;{{ title }}&lt;\/i&gt;&lt;\/h2&gt;\n      &lt;div class=\"col\" *ngIf=\"!(authService.user | async)\"&gt;\n        &lt;input type=\"text\" [(ngModel)]=\"emailAddress\" placeholder=\"Enter email . . . .\" required&gt;\n        &lt;input type=\"password\" [(ngModel)]=\"password\" placeholder=\"Enter password . . . .\" required&gt;\n        &lt;button (click)=\"login()\" [disabled]=\"!emailAddress || !password\" class=\"btn btn-success btn-md\"&gt;\n          Login\n        &lt;\/button&gt;\n        &lt;button (click)=\"signup()\" [disabled]=\"!emailAddress || !password\" class=\"spacing btn btn-primary btn-md\"&gt;\n          Signup\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n\n      &lt;div class=\"success\" *ngIf=\"authService.user | async\"&gt;\n        &lt;h3&gt;Welcome &lt;i&gt;{{ (authService.user | async)?.email }}&lt;\/i&gt;!&lt;\/h3&gt;\n        &lt;button (click)=\"logout()\" class=\"btn btn-success btn-md\"&gt;\n          Logout\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    \n    &lt;div class=\"error\" *ngIf=\"authService.err\"&gt;\n      &lt;h5 class=\"text-danger\"&gt;{{ authService.err }}&lt;\/h5&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;\n<\/pre>\n<p>And done! We have created a simple authentication application that authenticates the users via Firebase.<\/p>\n<h2 class=\"wp-block-heading\">5. Run the Application<\/h2>\n<p>As we are ready with all the changes, let us compile and run the angular application with <code>ng serve<\/code> command. Once the projects are successfully compiled and deployed, open the browser to test it.<\/p>\n<h2 class=\"wp-block-heading\">6. Project Demo<\/h2>\n<p>Open your favorite browser and hit the angular application URL (<code>http:\/\/localhost:4200\/<\/code>) to display the index page of the application.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"818\" height=\"201\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-img1.jpg\" alt=\"\" class=\"wp-image-101833\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-img1.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-img1-300x74.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-img1-768x189.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 6: Index page<\/figcaption><\/figure>\n<\/div>\n<p>Users can enter the new user details or the valid credentials to either sign-up or login to the application. On successful login, the welcome page is displayed.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"818\" height=\"151\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-img3.jpg\" alt=\"\" class=\"wp-image-101834\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-img3.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-img3-300x55.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-img3-768x142.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 7: Welcome page<\/figcaption><\/figure>\n<\/div>\n<p>On invalid user details, the error message is shown to the user.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"769\" height=\"205\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-err-img1.jpg\" alt=\"\" class=\"wp-image-101835\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-err-img1.jpg 769w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-auth-firebase-demo-err-img1-300x80.jpg 300w\" sizes=\"(max-width: 769px) 100vw, 769px\" \/><figcaption>Fig. 8: Invalid login credentials<\/figcaption><\/figure>\n<\/div>\n<p>On sign-out, the user is logged out of the application. That is all for this tutorial and I hope the article served you whatever you were expecting. Happy Learning and do not forget to share!<\/p>\n<h2>7. Conclusion<\/h2>\n<p>In this section, we learned how to authentication an angular application via firebase. Developers can download the sample application as an Eclipse project in the <a href=\"#projectDownload\">Downloads<\/a> section.<\/p>\n<h2><a name=\"projectDownload\"><\/a>8. Download the Eclipse Project<\/h2>\n<p>This was a tutorial of implementing Firebase Authentication with Angular.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here: <a target=\"_blank\" href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-authentication-firebase.zip\" rel=\"noopener noreferrer\"><strong>Firebase Authentication with Angular<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Welcome readers, in this tutorial, we will implement Email\/Password Authentication via Firebase in an angular application. 1. Introduction Angular is a Typescript-based open-source framework that helps developers build single-page applications Offers Object-oriented features and supports the dynamic loading of the pages Supports Two-way data binding, Property ([]), and Event (()) binding techniques Supports command-line-interface to &hellip;<\/p>\n","protected":false},"author":26931,"featured_media":49726,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1880],"tags":[740],"class_list":["post-101827","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Firebase Authentication with Angular - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Welcome readers, in this tutorial, we will implement Email\/Password Authentication via Firebase in an angular application. 1. Introduction Angular is a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Firebase Authentication with Angular - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Welcome readers, in this tutorial, we will implement Email\/Password Authentication via Firebase in an angular application. 1. Introduction Angular is a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-05T13:00:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yatin Batra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yatin Batra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html\"},\"author\":{\"name\":\"Yatin Batra\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\"},\"headline\":\"Firebase Authentication with Angular\",\"datePublished\":\"2020-02-05T13:00:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html\"},\"wordCount\":857,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html\",\"name\":\"Firebase Authentication with Angular - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"datePublished\":\"2020-02-05T13:00:29+00:00\",\"description\":\"Welcome readers, in this tutorial, we will implement Email\\\/Password Authentication via Firebase in an angular application. 1. Introduction Angular is a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/firebase-authentication-with-angular.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Angular\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/angular\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Firebase Authentication with Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\",\"name\":\"Yatin Batra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"caption\":\"Yatin Batra\"},\"description\":\"An experience full-stack engineer well versed with Core Java, Spring\\\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).\",\"sameAs\":[\"https:\\\/\\\/www.javacodegeeks.com\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/yatin-batra\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Firebase Authentication with Angular - Java Code Geeks","description":"Welcome readers, in this tutorial, we will implement Email\/Password Authentication via Firebase in an angular application. 1. Introduction Angular is a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html","og_locale":"en_US","og_type":"article","og_title":"Firebase Authentication with Angular - Java Code Geeks","og_description":"Welcome readers, in this tutorial, we will implement Email\/Password Authentication via Firebase in an angular application. 1. Introduction Angular is a","og_url":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2020-02-05T13:00:29+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Yatin Batra","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Yatin Batra","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html"},"author":{"name":"Yatin Batra","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d"},"headline":"Firebase Authentication with Angular","datePublished":"2020-02-05T13:00:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html"},"wordCount":857,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","keywords":["Angular"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html","url":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html","name":"Firebase Authentication with Angular - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","datePublished":"2020-02-05T13:00:29+00:00","description":"Welcome readers, in this tutorial, we will implement Email\/Password Authentication via Firebase in an angular application. 1. Introduction Angular is a","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"Angular","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/angular"},{"@type":"ListItem","position":5,"name":"Firebase Authentication with Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d","name":"Yatin Batra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","caption":"Yatin Batra"},"description":"An experience full-stack engineer well versed with Core Java, Spring\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).","sameAs":["https:\/\/www.javacodegeeks.com"],"url":"https:\/\/www.javacodegeeks.com\/author\/yatin-batra"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/101827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/26931"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=101827"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/101827\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/49726"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=101827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=101827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=101827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}