firebase auth

src/app/app.config.ts

@@ -3,11 +3,11 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app-routing.module';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { AngularFireModule } from '@angular/fire/compat';
 import { getAuth, provideAuth } from '@angular/fire/auth';
 import { getFirestore, provideFirestore } from '@angular/fire/firestore';
 import { getStorage, provideStorage } from '@angular/fire/storage';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideAnimationsAsync(), importProvidersFrom(provideFirebaseApp(() => initializeApp({ "projectId": "quack-1", "appId": "1:697758733170:web:433bd10dcb3566c06683eb", "storageBucket": "quack-1.appspot.com", "apiKey": "AIzaSyA4GSbuT6SNs_SPXvwVxyRyLcU_tlV9qo0", "authDomain": "quack-1.firebaseapp.com", "messagingSenderId": "697758733170" }))), importProvidersFrom(provideAuth(() => getAuth())), importProvidersFrom(provideFirestore(() => getFirestore())), importProvidersFrom(provideStorage(() => getStorage()))]
+  providers: [provideRouter(routes), provideAnimationsAsync(), importProvidersFrom(AngularFireModule.initializeApp({ "projectId": "quack-1", "appId": "1:697758733170:web:433bd10dcb3566c06683eb", "storageBucket": "quack-1.appspot.com", "apiKey": "AIzaSyA4GSbuT6SNs_SPXvwVxyRyLcU_tlV9qo0", "authDomain": "quack-1.firebaseapp.com", "messagingSenderId": "697758733170" })), importProvidersFrom(provideAuth(() => getAuth())), importProvidersFrom(provideFirestore(() => getFirestore())), importProvidersFrom(provideStorage(() => getStorage()))]
 };

src/app/app.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 
 import { AppRoutingModule } from './app-routing.module';
 
-
 @NgModule({
   declarations: [],
   imports: [

src/app/auth/login/login.component.html

@@ -3,10 +3,10 @@
         <table>
             <tr>
                 <td>
-                    <label for="username">Username:</label>
+                    <label for="username">Email:</label>
                 </td>
                 <td>
-                    <input type="text" formControlName="username">
+                    <input type="text" formControlName="email">
                 </td>
             </tr>
             <tr>

src/app/auth/login/login.component.ts

@@ -10,7 +10,7 @@ import { AuthService } from '../../services/auth/auth.service';
 })
 export class LoginComponent implements OnInit {
   loginForm = new FormGroup({
-    username: new FormControl(''),
+    email: new FormControl('', [Validators.email]),
     password: new FormControl('')
   });
 
@@ -19,17 +19,18 @@ export class LoginComponent implements OnInit {
   }
 
   ngOnInit(): void {
-      this.auth.getToken().then(()=> { this.router.navigateByUrl("/feed") })
+    if (!this.auth.checkAllowed())
+      this.router.navigateByUrl("/feed");
   }
 
   login() {
     if (this.loginForm.valid)
       this.auth.login(
-        this.loginForm.get('username')?.value as String,
+        this.loginForm.get('email')?.value as String,
         this.loginForm.get('password')?.value as String
       )
-        .then(()=>{ this.router.navigateByUrl("/feed") })
-        .catch(()=>{ alert("wrong username or password") });
+        .then(() => { this.router.navigateByUrl("/feed") })
+        .catch(() => { alert("wrong username or password") });
     else
       alert("missing username or password");
   }

src/app/auth/register/register.component.html

@@ -3,10 +3,10 @@
         <table>
             <tr>
                 <td>
-                    <label for="username">Username:</label>
+                    <label for="username">Email:</label>
                 </td>
                 <td>
-                    <input type="text" formControlName="username">
+                    <input type="text" formControlName="email">
                 </td>
             </tr>
             <tr>

src/app/auth/register/register.component.ts

@@ -10,7 +10,7 @@ import { Router } from '@angular/router';
 })
 export class RegisterComponent {
   registerForm = new FormGroup({
-    username: new FormControl(''),
+    email: new FormControl('', [Validators.email]),
     password: new FormControl(''),
     rePassword: new FormControl('')
   });
@@ -22,7 +22,7 @@ export class RegisterComponent {
   register() {
     if (this.registerForm.valid)
       this.auth.register(
-        this.registerForm.get('username')?.value as String,
+        this.registerForm.get('email')?.value as String,
         this.registerForm.get('password')?.value as String,
         this.registerForm.get('rePassword')?.value as String,
       )

src/app/services/auth/auth.service.ts

@@ -1,17 +1,16 @@
 import { Injectable, inject } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivateFn, GuardResult, MaybeAsync, Router, RouterStateSnapshot } from '@angular/router';
+import { AngularFireAuth } from '@angular/fire/compat/auth';
+import { ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot } from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
   token?: String;
-
-  constructor(private router: Router) { }
+  constructor(private router: Router, private auth: AngularFireAuth) { }
 
   checkAllowed() {
-    // TODO: check if the token is still valid
-    if (this.token)
+    if (this.auth.user)
       return true;
     else {
       this.router.navigateByUrl('/auth/login');
@@ -19,46 +18,20 @@ export class AuthService {
     }
   }
 
-  getToken(): Promise<String> {
-    // TODO: check if the token is still valid
-    return new Promise<String>((resolve, reject) => {
-      if (this.token)
-        resolve(this.token);
-      else
-        reject();
-    });
+  getToken() {
+    return this.auth.user;
   }
 
-  login(username: String, password: String): Promise<Boolean> {
-    return new Promise<Boolean>((resolve, reject) => {
-      // TODO: authenticate
-      if (username === "test" && password === "test") {
-        this.token = "valid_token";
-        resolve(true);
-      }
-      else {
-        this.token = undefined;
-        reject();
-      }
-    });
+  login(username: String, password: String) {
+    return this.auth.signInWithEmailAndPassword(username as string, password as string);
   }
 
-  logout(): Promise<Boolean> {
-    return new Promise<Boolean>((resolve, reject) => {
-      // TODO: logout
-      this.token = undefined;
-      resolve(true);
-    });
+  logout() {
+    return this.auth.signOut();
   }
 
-  register(username: String, password: String, rePassword: String): Promise<Boolean> {
-    return new Promise<Boolean>((resolve, reject) => {
-      // TODO: register
-      if (username !== "test" && password === rePassword)
-        resolve(true);
-      else
-        reject();
-    });
+  register(username: String, password: String, rePassword: String) {
+    return this.auth.createUserWithEmailAndPassword(username as string, password as string);
   }
 }
 

src/app/services/data/post.service.ts

@@ -59,44 +59,44 @@ export class PostService {
   getFeed(length: Number, start: Number): Promise<Array<Post>> {
     return new Promise<Array<Post>>((resolve, reject) => {
       // TODO: fetch feed
-      this.auth.getToken()
-        .then((token) => {
-          resolve(this.examplePosts);
-        })
-        .catch(() => { reject() });
+      if (this.auth.checkAllowed()) {
+        resolve(this.examplePosts)
+      } else {
+        reject()
+      }
     });
   }
 
   getPosts(username: String, lenght: Number, start: Number) {
     return new Promise<Array<Post>>((resolve, reject) => {
       // TODO: fetch feed
-      this.auth.getToken()
-        .then((token) => {
-          resolve(this.examplePosts);
-        })
-        .catch(() => { reject() });
+      if (this.auth.checkAllowed()) {
+        resolve(this.examplePosts)
+      } else {
+        reject()
+      }
     });
   }
 
   newPost(content: String, image: String) {
     return new Promise<Boolean>((resolve, reject) => {
       // TODO: make post
-      this.auth.getToken()
-        .then((token) => {
-          this.examplePosts.push({
-            user: {
-              username: "Zámbó Jimmy",
-              picture: "assets/placeholder-profile-picture.png",
-              followed: true
-            },
-            content: content,
-            image: image,
-            likes: 0,
-            liked: false
-          })
-          resolve(true);
-        })
-        .catch(() => { reject() })
+      if (this.auth.checkAllowed()) {
+        this.examplePosts.push({
+          user: {
+            username: "Zámbó Jimmy",
+            picture: "assets/placeholder-profile-picture.png",
+            followed: true
+          },
+          content: content,
+          image: image,
+          likes: 0,
+          liked: false
+        });
+        resolve(true);
+      } else {
+        reject();
+      }
     });
   }
 }

src/app/services/data/user.service.ts

@@ -18,11 +18,11 @@ export class UserService {
   getUser(username: String): Promise<User> {
     return new Promise<User>((resolve, reject) => {
       // TODO: get user
-      this.auth.getToken()
-        .then((token) => {
-          resolve(this.exampleUser);
-        })
-        .catch(() => { reject() });
+      if (this.auth.checkAllowed()) {
+        resolve(this.exampleUser);
+      } else {
+        reject();
+      }
     });
   }
 }