Supastore

A helper library for including Supabase with auth as signals in your Angular app, it uses @ngrx/signals more examples to come.

Basic usage, provide in main.ts

This will provide the supabase client and the auth object for logged user as signals.

import { provideSupaStore } from '@outbuild/supa-store'

provideSupaStore({
  createClient:{
    supabaseUrl: environment.supabaseUrl,
    supabaseKey: environment.supabaseKey
  }
})

Including Metadata in the user object

In many cases users will have metadata that you want to include in the user object. You can do this by providing the 'metadataTable' option. This will automatically fetch the metadata from the table matching the user the 'id' field and include it in the auth object. in most cases this will be the 'users' table. There are also instances where you would want to run a custom rpc function to return a auth object, lets imagine custom logic for user, organisation data etc. you can do this by providing the 'metadataRpc' option. This will run immediatelty after the user is authenticated, either table option, or rpc option not both.

import { provideSupaStore } from '@outbuild/supa-store'

provideSupaStore({
  createClient:{
    supabaseUrl: environment.supabaseUrl,
    supabaseKey: environment.supabaseKey
  },
  metadataTable: 'users',
  // or
  metadataRpc: 'auth_query'
})

Accessing the store

  import { SupaStore, injectSupaAuth, injectSupaClient } from '@outbuild/supa-store'

  store  = inject(SupaStore)
  auth   = injectSupaAuth()
  client = injectSupaClient()
  

Observables

Observables will have either undefined, null or the logged in user value.

undefined - auth call is in progress. null - auth call complete, no logged user found, not logged in. value - auth call complete, logged user found.

Store type

type SupaStoreState = {
  client: SupabaseClient
  auth: {
    session: undefined | null | Session
    user: undefined | null | User
    metadata: undefined | null | unknown
    state: {
      prev: AuthChangeEvent | null
      curr: AuthChangeEvent | null
    }
  },
  user$: Observable<null | User>
  session$: Observable<null | Session>
  metadata$: Observable<null | unknown>
  signInWithGoogle: (options: SignInWithOAuthCredentials['options']) => void
}