ng-supabase

An Angular component library for your Supabase project!

---

Features

• 🔥 Pre-designed Supabase components for popular UI libraries (PrimeNG, Material, Bootstrap)
• ✨ Eliminate boilerplate code and get right to consuming Supabase services
• 📝 Extendable and highly-configurable components
• 😍 Full Supabase authentication goodness, ready to go!
• 💪 Built on top of Angular 17 with Signals and SSR support

Docs

• Example Site
• Full docs coming soon...

  In the meantime, please checkout the demo code for a fully working example.

Getting Started

1. Choose the desired UI library

UI Library	Package
PrimeNG	@ng-supabase/primeng
Angular Material	@ng-supabase/material
Bootstrap	@ng-supabase/bootstrap

2. Install the desired package.

Example npm install @ng-supabase/primeng

3. Add package specific styling/dependencies

For the PrimeNG package you need to include the PrimeFlex CSS.

Add to styles.css

/* Add whatever PrimeNG theme you desire. */
@import 'primeng/resources/themes/lara-light-blue/theme.css';
@import 'primeng/resources/primeng.css';
@import 'primeicons/primeicons.css';
@import 'primeflex/primeflex.css';

4. Create the desired routes in your application for each of the authentication steps:

Example:

• Sign In (ex: /sign-in)
• Register (ex: /register)
• Set Password (ex: /set-password)
• Reset Password (ex: /reset-password)

5. Use each of the ng-supabase components in your route components.

Example:

Your app: sign-in.component.ts

// Angular.
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';

// ng-supabase.
import { SignInComponent as PrimeNgSignInComponent } from '@ng-supabase/primeng';

@Component({
  selector: 'ng-supabase-primeng-sign-in',
  standalone: true,
  imports: [CommonModule, PrimeNgSignInComponent],
  templateUrl: './sign-in.component.html',
  styleUrl: './sign-in.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SignInComponent {}

Your app: sign-in.component.html

<supabase-sign-in></supabase-sign-in>
<!-- Plus add whatever other customizations you'd like -->

6. Configure the ng-supabase library.

Your app: app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(appRoutes),
    provideAnimations(),
    provideSupabase({
      apiUrl: 'https://YOUR_SUPABASE_URL.supabase.co',
      apiKey: 'YOUR_SUPABASE_ANONYMOUS_ACCESS_KEY',
      signIn: {
        socials: [SocialSignIn.Apple, SocialSignIn.Google],
      },
    }),
  ],
};

7. Run your application and let ng-supabase do all the work ✨.

Components

Component	Default Route
Sign In	/sign-in
Register	/register
Set Password	/set-password
Reset Password	/reset-password

PrimeNG

Sign In Component

Sign In:

---

Sign In with One-Time-Password:

---

Register Component

Register/Sign Up:

---

Reset Password Component

Reset Password:

---

Reset Password Message:

---

Set Password Component

Set Password:

---

Set Password Feedback:

---

Set Password Validation:

---

Bootstrap

Coming soon...

Material

Coming soon

Development

Remove Tag

git tag --delete <tagname>
git push --delete origin <tagname>

Create New Release

To generate a new release, use the following steps:

1. Run npm run nx -- release --skip-publish locally. This will create a commit with the version and changelog updates
2. Commit changes git add -A && git commit -m "chore: bumped version".
3. Create a tag for the new version git tag v<tagname>.
4. Push the changes (including the new tag) to the remote repository with git push && git push --tags.
5. The publish workflow will automatically trigger and publish the packages to the npm registry.

see more on these steps here

TODOs

• Add SignedIn route guard
• Add avatar component
• Add Roles route guard
• Implement Bootstrap components
• Implement Material components
• Support Angular 17 SSR