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

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

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({
      // You can optionally provide "project: 123455" and omit apiUrl.
      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

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 and tag
2. Push the changes (including the new tag) to the remote repository with git push && git push --tags.
3. The publish workflow will automatically trigger and publish the packages to the npm registry.

see more on these steps here

TODOs

• [x] Add SignedIn route guard
• [x] Add avatar component
• [x] Upgrade to NGPrime 18
• [x] Remove use of PrimeFlex
• [ ] Add Roles route guard
• [ ] Full coverage unit tests
• [ ] Documentation site
• [ ] Implement Bootstrap components
• [ ] Implement Material components
• [ ] Fully support Angular SSR