Awesome
<div align="center"> <p align="center"> <img src="/apps/demo/src/assets/supabase-logo.png" alt="Logo"> </p> <a href="https://github.com/rustygreen/ng-supabase"> <h1 align="center">ng-supabase</h1> </a> <p align="center"> An Angular component library for your <a href="https://supabase.com/" target="_blank">Supabase</a> project! </p> </div>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
- Choose the desired UI library
UI Library | Package |
---|---|
PrimeNG | @ng-supabase/primeng |
Angular Material | @ng-supabase/material |
Bootstrap | @ng-supabase/bootstrap |
- Install the desired package.
Example npm install @ng-supabase/primeng
- 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';
- 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
)
- 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 -->
- 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],
},
}),
],
};
- 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:
- Run
npm run nx -- release --skip-publish
locally. This will create a commit and tag - Push the changes (including the new tag) to the remote repository with
git push && git push --tags
. - 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
- Fully coverage unit tests
- Documentation site
- Implement Bootstrap components
- Implement Material components
- Fully support Angular SSR