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") })
+        .then(() => { this.router.navigateByUrl("/feed") })
-        .catch(()=>{ alert("wrong username or password") });
+        .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, private auth: AngularFireAuth) { }
-  constructor(private router: Router) { }
 
   checkAllowed() {
-    // TODO: check if the token is still valid
+    if (this.auth.user)
-    if (this.token)
       return true;
     else {
       this.router.navigateByUrl('/auth/login');
@@ -19,46 +18,20 @@ export class AuthService {
     }
   }
 
-  getToken(): Promise<String> {
+  getToken() {
-    // TODO: check if the token is still valid
+    return this.auth.user;
-    return new Promise<String>((resolve, reject) => {
-      if (this.token)
-        resolve(this.token);
-      else
-        reject();
-    });
   }
 
-  login(username: String, password: String): Promise<Boolean> {
+  login(username: String, password: String) {
-    return new Promise<Boolean>((resolve, reject) => {
+    return this.auth.signInWithEmailAndPassword(username as string, password as string);
-      // TODO: authenticate
-      if (username === "test" && password === "test") {
-        this.token = "valid_token";
-        resolve(true);
-      }
-      else {
-        this.token = undefined;
-        reject();
-      }
-    });
   }
 
-  logout(): Promise<Boolean> {
+  logout() {
-    return new Promise<Boolean>((resolve, reject) => {
+    return this.auth.signOut();
-      // TODO: logout
-      this.token = undefined;
-      resolve(true);
-    });
   }
 
-  register(username: String, password: String, rePassword: String): Promise<Boolean> {
+  register(username: String, password: String, rePassword: String) {
-    return new Promise<Boolean>((resolve, reject) => {
+    return this.auth.createUserWithEmailAndPassword(username as string, password as string);
-      // TODO: register
-      if (username !== "test" && password === rePassword)
-        resolve(true);
-      else
-        reject();
-    });
   }
 }
 

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

@@ -59,30 +59,29 @@ export class PostService {
   getFeed(length: Number, start: Number): Promise<Array<Post>> {
     return new Promise<Array<Post>>((resolve, reject) => {
       // TODO: fetch feed
-      this.auth.getToken()
+      if (this.auth.checkAllowed()) {
-        .then((token) => {
+        resolve(this.examplePosts)
-          resolve(this.examplePosts);
+      } else {
-        })
+        reject()
-        .catch(() => { reject() });
+      }
     });
   }
 
   getPosts(username: String, lenght: Number, start: Number) {
     return new Promise<Array<Post>>((resolve, reject) => {
       // TODO: fetch feed
-      this.auth.getToken()
+      if (this.auth.checkAllowed()) {
-        .then((token) => {
+        resolve(this.examplePosts)
-          resolve(this.examplePosts);
+      } else {
-        })
+        reject()
-        .catch(() => { reject() });
+      }
     });
   }
 
   newPost(content: String, image: String) {
     return new Promise<Boolean>((resolve, reject) => {
       // TODO: make post
-      this.auth.getToken()
+      if (this.auth.checkAllowed()) {
-        .then((token) => {
         this.examplePosts.push({
           user: {
             username: "Zámbó Jimmy",
@@ -93,10 +92,11 @@ export class PostService {
           image: image,
           likes: 0,
           liked: false
-          })
+        });
         resolve(true);
-        })
+      } else {
-        .catch(() => { reject() })
+        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()
+      if (this.auth.checkAllowed()) {
-        .then((token) => {
         resolve(this.exampleUser);
-        })
+      } else {
-        .catch(() => { reject() });
+        reject();
+      }
     });
   }
 }