init

Author: jamesonsaunders

package-lock.json

@@ -15,12 +15,16 @@
     "@angular/common": "~7.0.0",
     "@angular/compiler": "~7.0.0",
     "@angular/core": "~7.0.0",
+    "@angular/fire": "^5.1.0",
     "@angular/forms": "~7.0.0",
     "@angular/http": "~7.0.0",
     "@angular/platform-browser": "~7.0.0",
     "@angular/platform-browser-dynamic": "~7.0.0",
     "@angular/router": "~7.0.0",
     "core-js": "^2.5.4",
+    "firebase": "^5.5.8",
+    "firebaseui": "^3.4.1",
+    "firebaseui-angular": "^3.3.2",
     "rxjs": "~6.3.3",
     "zone.js": "~0.8.26"
   },

package.json

@@ -1,20 +1,7 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+<div *ngIf="afAuth.auth.currentUser">
+  <h1>Logged In</h1>
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<div *ngIf="!afAuth.auth.currentUser">
+  <h1>Logged Out</h1>
+  <firebase-ui></firebase-ui>
+</div>

src/app/app.component.html

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AngularFireAuth } from '@angular/fire/auth';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,8 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'auth';
+
+  constructor(public afAuth: AngularFireAuth) {
+
+  }
 }

src/app/app.component.ts

@@ -3,12 +3,34 @@ import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 
+import {FirebaseUIModule, firebase, firebaseui} from 'firebaseui-angular';
+
+import {AngularFireModule} from '@angular/fire';
+import {AngularFireAuthModule} from '@angular/fire/auth';
+import { environment } from 'src/environments/environment.prod';
+
+const firebaseUiAuthConfig: firebaseui.auth.Config = {
+  signInFlow: 'popup',
+  signInOptions: [
+    {
+      requireDisplayName: false,
+      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
+    },
+  ],
+  // tosUrl: '<your-tos-link>',
+  // privacyPolicyUrl: '<your-privacyPolicyUrl-link>',
+  credentialHelper: firebaseui.auth.CredentialHelper.NONE
+};
+
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    AngularFireModule.initializeApp(environment.firebaseConfig),
+    AngularFireAuthModule,
+    FirebaseUIModule.forRoot(firebaseUiAuthConfig)
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -1,3 +1,11 @@
 export const environment = {
-  production: true
+  production: true,
+  firebaseConfig: {
+    apiKey: "AIzaSyAPLBlBVpF7wzLJXlXWOTpXNOJ-ZlEcAWE",
+    authDomain: "auth-f770a.firebaseapp.com",
+    databaseURL: "https://auth-f770a.firebaseio.com",
+    projectId: "auth-f770a",
+    storageBucket: "",
+    messagingSenderId: "210018507265"
+  }
 };

src/environments/environment.prod.ts

@@ -3,7 +3,15 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  firebaseConfig: {
+    apiKey: "AIzaSyAPLBlBVpF7wzLJXlXWOTpXNOJ-ZlEcAWE",
+    authDomain: "auth-f770a.firebaseapp.com",
+    databaseURL: "https://auth-f770a.firebaseio.com",
+    projectId: "auth-f770a",
+    storageBucket: "",
+    messagingSenderId: "210018507265"
+  }
 };
 
 /*

src/environments/environment.ts

@@ -1 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import '~firebaseui/dist/firebaseui.css';