[A] basic signup, login, logout

package-lock.json

@@ -3279,7 +3279,6 @@
       "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
       "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
       "dev": true,
-      "optional": true,
       "requires": {
         "hoek": "2.x.x"
       }
@@ -3474,8 +3473,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/buffer-more-ints/-/buffer-more-ints-1.0.0.tgz",
       "integrity": "sha512-EMetuGFz5SLsT0QTnXzINh4Ksr+oo4i+UGTXEshiGCQWnsgSs7ZhJ8fzlwQ+OzEMs0MpDAMr1hxnblp5a4vcHg==",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "buffer-xor": {
       "version": "1.0.3",
@@ -6784,8 +6782,7 @@
       "version": "2.16.3",
       "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
       "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "homedir-polyfill": {
       "version": "1.0.3",
@@ -7065,7 +7062,6 @@
       "resolved": "https://registry.npmjs.org/httpntlm/-/httpntlm-1.6.1.tgz",
       "integrity": "sha1-rQFScUOi6Hc8+uapb1hla7UqNLI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "httpreq": ">=0.4.22",
         "underscore": "~1.7.0"
@@ -7075,8 +7071,7 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/httpreq/-/httpreq-0.4.24.tgz",
       "integrity": "sha1-QzX/2CzZaWaKOUZckprGHWOTYn8=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "https-browserify": {
       "version": "1.0.0",
@@ -7616,8 +7611,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
       "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "is-regex": {
       "version": "1.1.1",
@@ -8595,15 +8589,13 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/libbase64/-/libbase64-0.1.0.tgz",
       "integrity": "sha1-YjUag5VjrF/1vSbxL2Dpgwu3UeY=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "libmime": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/libmime/-/libmime-3.0.0.tgz",
       "integrity": "sha1-UaGp50SOy9Ms2lRCFnW7IbwJPaY=",
       "dev": true,
-      "optional": true,
       "requires": {
         "iconv-lite": "0.4.15",
         "libbase64": "0.1.0",
@@ -8614,8 +8606,7 @@
           "version": "0.4.15",
           "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.15.tgz",
           "integrity": "sha1-/iZaIYrGpXz+hUkn6dBMGYJe3es=",
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -8623,8 +8614,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/libqp/-/libqp-1.1.0.tgz",
       "integrity": "sha1-9ebgatdLeU+1tbZpiL9yjvHe2+g=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "license-webpack-plugin": {
       "version": "2.2.0",
@@ -9723,15 +9713,13 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/nodemailer-fetch/-/nodemailer-fetch-1.6.0.tgz",
       "integrity": "sha1-ecSQihwPXzdbc/6IjamCj23JY6Q=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "nodemailer-shared": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/nodemailer-shared/-/nodemailer-shared-1.1.0.tgz",
       "integrity": "sha1-z1mU4v0mjQD1zw+nZ6CBae2wfsA=",
       "dev": true,
-      "optional": true,
       "requires": {
         "nodemailer-fetch": "1.6.0"
       }
@@ -9764,8 +9752,7 @@
       "version": "0.1.10",
       "resolved": "https://registry.npmjs.org/nodemailer-wellknown/-/nodemailer-wellknown-0.1.10.tgz",
       "integrity": "sha1-WG24EB2zDLRDjrVGc3pBqtDPE9U=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "normalize-package-data": {
       "version": "2.5.0",
@@ -11578,8 +11565,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
       "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "prepend-http": {
       "version": "1.0.4",
@@ -13458,7 +13444,6 @@
       "resolved": "https://registry.npmjs.org/smtp-connection/-/smtp-connection-2.12.0.tgz",
       "integrity": "sha1-1275EnyyPCJZ7bHoNJwujV4tdME=",
       "dev": true,
-      "optional": true,
       "requires": {
         "httpntlm": "1.6.1",
         "nodemailer-shared": "1.1.0"
@@ -14866,7 +14851,6 @@
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
       "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
       "dev": true,
-      "optional": true,
       "requires": {
         "prelude-ls": "~1.1.2"
       }
@@ -14944,8 +14928,7 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz",
       "integrity": "sha1-a7rwh3UA02vjTsqlhODbn+8DUgk=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
@@ -15484,15 +15467,13 @@
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
           "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "braces": {
           "version": "2.3.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
           "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
           "dev": true,
-          "optional": true,
           "requires": {
             "arr-flatten": "^1.1.0",
             "array-unique": "^0.3.2",
@@ -15511,7 +15492,6 @@
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -15544,7 +15524,6 @@
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
           "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
           "dev": true,
-          "optional": true,
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -15557,7 +15536,6 @@
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -15592,7 +15570,6 @@
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
           "dev": true,
-          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -15602,7 +15579,6 @@
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
               "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
               "dev": true,
-              "optional": true,
               "requires": {
                 "is-buffer": "^1.1.5"
               }

src/app/api/supabase/supa.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
-import { createClient, SupabaseClient } from '@supabase/supabase-js'
+import { createClient, SupabaseAuthUser, SupabaseClient } from '@supabase/supabase-js'
+import { BehaviorSubject } from 'rxjs';
 import { environment } from '../../../environments/environment'
 
 
@@ -8,10 +9,50 @@ import { environment } from '../../../environments/environment'
 })
 export class SupaService {
   client: SupabaseClient;
+  user: BehaviorSubject<SupabaseAuthUser> = new BehaviorSubject(null);
 
   constructor() {
       // Create a single supabase client for interacting with your database 
       this.client = createClient(environment.supa_url, environment.supa_key);
-      console.log('supa', this.client)
+      this.getUser();
+  }
+
+  async getUser() {
+    const user = await this.client.auth.user();
+    console.log('user', user);
+    this.user.next(user);
+  }
+
+  async login(email: string, password: string): Promise<SupabaseAuthUser> {
+    try {
+      const res = await this.client.auth.login(
+        email,
+        password
+      );
+      this.user.next(res.body.user);
+      return res.body.user;
+    } catch (e) {
+      console.error('Login', e);
     }
   }
+
+  async logout(): Promise<any> {
+    return this.client.auth.logout()
+      .then(() => this.user.next(null))
+      .catch((e) =>console.error('Logout', e));
+  }
+
+  async signup(email: string, password: string): Promise<SupabaseAuthUser> {
+    try {
+      const res = await this.client.auth.signup(
+        email,
+        password
+      );
+      this.user.next(res.body.user);
+      return res.body.user;
+    } catch (e) {
+      console.error('Signup', e);
+    }
+  }
+
+}

src/app/app.component.html

@@ -1,5 +1,6 @@
 <nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#" style="margin: 0 auto;">ASYNC HUDDLE</a>
+  <span *ngIf="supa.user | async" (click)="logout()">Logout</span>
 </nav>
 <div class="container">
   <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,9 +1,37 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { Router } from '@angular/router';
+import { SupabaseAuthUser } from '@supabase/supabase-js';
+import { SupaService } from './api/supabase/supa.service';
 
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.scss"]
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+  user: SupabaseAuthUser;
+
+  constructor(
+    public supa: SupaService,
+    private router: Router,
+  ) { }
+
+  async ngOnInit() {
+    try {
+      this.user = await this.supa.client.auth.user();
+    } catch (e) {
+      console.log(e.msg);
+      this.router.navigate(['/login']);
+    }
+  }
+
+  async logout() {
+    try {
+      await this.supa.logout();
+      this.router.navigate(['/login']);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
 }

src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 
 import { NgbModalModule } from "@ng-bootstrap/ng-bootstrap";
 import { AppRoutingModule } from './app-routing.module';
+import { FormsModule } from '@angular/forms';
 
 import { SupaService } from './api/supabase/supa.service';
 import { AuthGuard } from './authguard.service';
@@ -24,7 +25,9 @@ import { HuddleComponent } from './huddle/huddle.component';
   imports: [
     BrowserModule,
     NgbModalModule,
-    AppRoutingModule],
+    AppRoutingModule,
+    FormsModule,
+  ],
   providers: [
     SupaService,
     AuthGuard,

src/app/login/login.component.html

@@ -1 +1,22 @@
-<p>login works!</p>
+<div class="row mt-3 justify-content-md-center">
+    <div class="form-group col-12 col-sm-4">
+        <label for="email">Email</label>
+        <input #email class="form-control" type="email">
+    </div>
+</div>
+<div class="row  justify-content-md-center">
+    <div class="form-group col-12 col-sm-4">
+        <label for="password">Password</label>
+        <input #password class="form-control" type="password">
+    </div>
+</div>
+<div class="row  justify-content-md-center">
+    <div class="col-12 col-sm-4">
+        <button class="btn btn-primary text-uppercase" type="button" (click)="login(email.value, password.value)">
+            Log in
+        </button> or 
+        <a class="btn btn-secondary text-uppercase" [routerLink]="'/signup'">
+            signup
+        </a>
+    </div>
+</div>

src/app/login/login.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { SupaService } from '../api/supabase/supa.service';
 
 @Component({
   selector: 'app-login',
@@ -7,9 +9,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private router: Router,
+    private supa: SupaService,
+  ) { }
 
   ngOnInit(): void {
   }
 
+  async login(email: string, password: string) {
+    try {
+      await this.supa.login(email, password);
+      this.router.navigateByUrl('/');
+    } catch (e) {
+      console.error('login component', e);
+    }
+  }
+
 }

src/app/signup/signup.component.html

@@ -1 +1,25 @@
-<p>signup works!</p>
+<div class="row mt-3 justify-content-md-center">
+    <div class="form-group col-12 col-sm-4">
+        <label for="email">Email</label>
+        <input [(ngModel)]="email" class="form-control" type="email">
+    </div>
+</div>
+<div class="row  justify-content-md-center">
+    <div class="form-group col-12 col-sm-4">
+        <label for="password">Password</label>
+        <input [(ngModel)]="password" class="form-control" type="password">
+    </div>
+</div>
+<div class="row  justify-content-md-center">
+    <div class="form-group col-12 col-sm-4">
+        <label for="password">Repeat password</label>
+        <input [(ngModel)]="repeat" class="form-control" type="password">
+    </div>
+</div>
+<div class="row  justify-content-md-center">
+    <div class="col-12 col-sm-4">
+        <button type="button" class="btn btn-secondary text-uppercase" (click)="signup(email, password, repeat)">
+            signup
+        </button>
+    </div>
+</div>

src/app/signup/signup.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { SupaService } from '../api/supabase/supa.service';
 
 @Component({
   selector: 'app-signup',
@@ -6,10 +8,29 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./signup.component.scss']
 })
 export class SignupComponent implements OnInit {
+  email: string = '';
+  password: string = '';
+  repeat: string = '';
 
-  constructor() { }
+  constructor(
+    private supa: SupaService,
+    private router: Router,
+  ) { }
 
   ngOnInit(): void {
   }
 
+  async signup(email: string, password: string, repeat: string) {
+    console.log(email, password, repeat);
+    if (!email || (email.length <= 0) || !password || (password.length <= 0) || !repeat || (repeat.length <= 0) || (password !== repeat)) {
+      return;
+    }
+    try {
+      await this.supa.signup(email, password);
+      this.router.navigate(['/']);
+    } catch (e) {
+      console.error('signup component', e);
+    }
+  }
+
 }