Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rustygreen/ng-supabase
Angular Supabase components
https://github.com/rustygreen/ng-supabase
angular angular-material bootstrap material-design primeng supabase supabase-auth supabase-js
Last synced: 29 days ago
JSON representation
Angular Supabase components
- Host: GitHub
- URL: https://github.com/rustygreen/ng-supabase
- Owner: rustygreen
- Created: 2023-12-29T18:52:27.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-04-24T21:09:19.000Z (7 months ago)
- Last Synced: 2024-04-24T22:24:29.982Z (7 months ago)
- Topics: angular, angular-material, bootstrap, material-design, primeng, supabase, supabase-auth, supabase-js
- Language: TypeScript
- Homepage: https://ng-supabase.netlify.app/
- Size: 521 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-angular - ng-supabase - An Angular component library for your [Supabase](https://supabase.com/) project! (Table of contents / Angular)
- fucking-awesome-angular - ng-supabase - An Angular component library for your 🌎 [Supabase](supabase.com/) project! (Table of contents / Angular)
- fucking-awesome-angular - ng-supabase - An Angular component library for your 🌎 [Supabase](supabase.com/) project! (Table of contents / Angular)
README
An Angular component library for your Supabase project!
[](https://badge.fury.io/js/@ng-supabase%2Fcore)
[](https://github.com/rustygreen/ng-supabase/actions/workflows/ci.yaml/badge.svg?branch=main)
[](https://app.netlify.com/sites/ng-supabase/deploys)
---
## 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](https://blog.angular.io/introducing-angular-v17-4d7033312e4b) with [Signals](https://angular.io/guide/signals) and [SSR](https://angular.io/guide/ssr) support
## Docs
- [Example Site](https://ng-supabase.netlify.app/)
- Full docs coming soon...
> In the meantime, please checkout the [demo code](https://github.com/rustygreen/ng-supabase/tree/main/apps/demo) 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](https://www.npmjs.com/package/@ng-supabase/primeng) you need to include the [PrimeFlex CSS](https://primeflex.org/).
Add to `styles.css`
```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`
```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`
```html
```
6. Configure the `ng-supabase` library.
Your app: `app.config.ts`
```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](https://github.com/rustygreen/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
```bash
git tag --delete
git push --delete origin
```
### 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](https://nx.dev/recipes/nx-release/publish-in-ci-cd)_
## 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