Angular Supabase Access

• Angular frontend Authentication form with a Supabase PostgreSQL database backend
• Tutorial code from Domini Code - in Spanish
• Note: to open web links in a new window use: ctrl+click on link

Table of contents

• Angular Supabase Access
  • Table of contents
  • General info
  • Screenshots
  • Technologies
  • Setup
  • Testing
  • Code Examples
  • Features
  • Status & To-Do List
  • Inspiration
  • License
  • Contact

General info

• Supabase is an open-source alternative to Firebase, but uses PostgreSQL instead of document database. Database is realtime & can use SQL joins. Realtime notifications via Websockets. RESTful API requires no backend code.
• I had to have CORS Access Control Allow Origin enabled for this to work

Screenshots

Technologies

• Angular v14
• @angular/forms v14 reactive form used for user input
• Supabase public v1
• @supabase/supabase-js"">npm @superbase/supabase-js v1 isomorphic (same in form) Javascript client for Supabase. Not updated to latest v2 due to breaking changes
• rxjs v7 Reactive Extensions Library for Javascript
• Bootstrap v5 responsive styling, including ready-made forms, navbars etc.

Setup

• npm i to install dependencies then…
• Create free account with Supabase and setup email auth
• add Supabase credentials to environments/environment.ts
• ng serve for a dev server. Navigate to http://localhost:4200/ - app will automatically reload if you change any of the source files
• npm run build for a build folder with production configuration

Testing

• ng test to execute the unit tests via Karma.
• ng e2e to execute the end-to-end tests via Protractor.

Code Examples

• function to call signout function from auth service & catch errors (by Domini Code)

  async onLogout(): Promise<void> {
    try {
      await this.authSvc.signOut();
    } catch (error) {
      console.log(error);
    }
  }

Features

• Supabase user interface is cool to work with.
• User session stored in local storage, cleared upon user logout

Status & To-Do List

• Status: Working
• To-Do: Nothing

Inspiration

• Login con Angular 13, Supabase & Bootstrap 5 - Login con Angular 13 - in Spanish
• Supabase Docs: Quickstart: Angular

License

• N/A

Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com