{"id":13982919,"url":"https://github.com/rustygreen/ng-supabase","last_synced_at":"2025-06-19T22:32:54.542Z","repository":{"id":214675578,"uuid":"737080285","full_name":"rustygreen/ng-supabase","owner":"rustygreen","description":"Angular Supabase components","archived":false,"fork":false,"pushed_at":"2025-03-25T14:52:00.000Z","size":756,"stargazers_count":34,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-02T20:10:35.939Z","etag":null,"topics":["angular","angular-material","bootstrap","material-design","primeng","supabase","supabase-auth","supabase-js"],"latest_commit_sha":null,"homepage":"https://ng-supabase.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rustygreen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-29T18:52:27.000Z","updated_at":"2025-06-01T16:32:50.000Z","dependencies_parsed_at":"2024-03-05T16:06:34.491Z","dependency_job_id":"49d4c6a0-41ba-4b92-a9d2-12ebf4e5fb2d","html_url":"https://github.com/rustygreen/ng-supabase","commit_stats":{"total_commits":87,"total_committers":2,"mean_commits":43.5,"dds":0.09195402298850575,"last_synced_commit":"ff21b8c40e451a9c211edf25bdfd4f1be3eb3fe3"},"previous_names":["rustygreen/ng-supabase"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/rustygreen/ng-supabase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustygreen%2Fng-supabase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustygreen%2Fng-supabase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustygreen%2Fng-supabase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustygreen%2Fng-supabase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rustygreen","download_url":"https://codeload.github.com/rustygreen/ng-supabase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustygreen%2Fng-supabase/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259623307,"owners_count":22886299,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","bootstrap","material-design","primeng","supabase","supabase-auth","supabase-js"],"created_at":"2024-08-09T05:01:33.808Z","updated_at":"2025-06-19T22:32:49.527Z","avatar_url":"https://github.com/rustygreen.png","language":"TypeScript","funding_links":[],"categories":["Security and Authentication"],"sub_categories":["Authentication"],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/apps/demo/src/assets/supabase-logo.png\" alt=\"Logo\"\u003e\n\u003c/p\u003e\n\n\u003ca href=\"https://github.com/rustygreen/ng-supabase\"\u003e\n  \u003ch1 align=\"center\"\u003eng-supabase\u003c/h1\u003e\n\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  An Angular component library for your \u003ca href=\"https://supabase.com/\" target=\"_blank\"\u003eSupabase\u003c/a\u003e project!\n\u003c/p\u003e\n\n[![npm version](https://badge.fury.io/js/@ng-supabase%2Fcore.svg)](https://badge.fury.io/js/@ng-supabase%2Fcore)\n![NPM Downloads](https://img.shields.io/npm/dt/%40ng-supabase%2Fcore)\n[![Build Status](https://github.com/rustygreen/ng-supabase/actions/workflows/ci.yaml/badge.svg?branch=main)](https://github.com/rustygreen/ng-supabase/actions/workflows/ci.yaml/badge.svg?branch=main)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/d6d66504-cf8d-4eed-93d7-8dcbd03ec91d/deploy-status)](https://app.netlify.com/sites/ng-supabase/deploys)\n\n\u003c/div\u003e\n\n---\n\n## Features\n\n- 🔥 Pre-designed Supabase components for popular UI libraries (PrimeNG, Material, Bootstrap)\n- ✨ Eliminate boilerplate code and get right to consuming Supabase services\n- 📝 Extendable and highly-configurable components\n- 😍 Full Supabase authentication goodness, ready to go!\n- 💪 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\n\n## Docs\n\n- [Example Site](https://ng-supabase.netlify.app/)\n- Full docs coming soon...\n  \u003e In the meantime, please checkout the [demo code](https://github.com/rustygreen/ng-supabase/tree/main/apps/demo) for a fully working example.\n\n## Getting Started\n\n1. Choose the desired UI library\n\n| UI Library       | Package                  |\n| ---------------- | ------------------------ |\n| PrimeNG          | `@ng-supabase/primeng`   |\n| Angular Material | `@ng-supabase/material`  |\n| Bootstrap        | `@ng-supabase/bootstrap` |\n\n2. Install the desired package.\n\nExample `npm install @ng-supabase/primeng`\n\n3. Add package specific styling/dependencies\n\nFor the [PrimeNG package](https://www.npmjs.com/package/@ng-supabase/primeng) you need to include the [PrimeFlex CSS](https://primeflex.org/).\n\nAdd to `styles.css`\n\n```css\n/* Add whatever PrimeNG theme you desire. */\n@import 'primeng/resources/themes/lara-light-blue/theme.css';\n@import 'primeng/resources/primeng.css';\n@import 'primeicons/primeicons.css';\n@import 'primeflex/primeflex.css';\n```\n\n4. Create the desired routes in your application for each of the authentication steps:\n\nExample:\n\n- Sign In (ex: `/sign-in`)\n- Register (ex: `/register`)\n- Set Password (ex: `/set-password`)\n- Reset Password (ex: `/reset-password`)\n\n5. Use each of the `ng-supabase` components in your route components.\n\nExample:\n\nYour app: `sign-in.component.ts`\n\n```ts\n// Angular.\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\n// ng-supabase.\nimport { SignInComponent as PrimeNgSignInComponent } from '@ng-supabase/primeng';\n\n@Component({\n  selector: 'ng-supabase-primeng-sign-in',\n  standalone: true,\n  imports: [CommonModule, PrimeNgSignInComponent],\n  templateUrl: './sign-in.component.html',\n  styleUrl: './sign-in.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SignInComponent {}\n```\n\nYour app: `sign-in.component.html`\n\n```html\n\u003csupabase-sign-in\u003e\u003c/supabase-sign-in\u003e\n\u003c!-- Plus add whatever other customizations you'd like --\u003e\n```\n\n6. Configure the `ng-supabase` library.\n\nYour app: `app.config.ts`\n\n```ts\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideRouter(appRoutes),\n    provideAnimations(),\n    provideSupabase({\n      // You can optionally provide \"project: 123455\" and omit apiUrl.\n      apiUrl: 'https://YOUR_SUPABASE_URL.supabase.co',\n      apiKey: 'YOUR_SUPABASE_ANONYMOUS_ACCESS_KEY',\n      signIn: {\n        socials: [SocialSignIn.Apple, SocialSignIn.Google],\n      },\n    }),\n  ],\n};\n```\n\n7. Run your application and let [ng-supabase](https://github.com/rustygreen/ng-supabase) do all the work ✨.\n\n## Components\n\n| Component      | Default Route     |\n| -------------- | ----------------- |\n| Sign In        | `/sign-in`        |\n| Register       | `/register`       |\n| Set Password   | `/set-password`   |\n| Reset Password | `/reset-password` |\n\n### PrimeNG\n\n### Sign In Component\n\nSign In:\n\n---\n\n![Sign In Component](/assets/primeng-sign-in.png)\n\nSign In with One-Time-Password:\n\n---\n\n![Sign In Message](/assets/primeng-sign-in-message.png)\n\n### Register Component\n\nRegister/Sign Up:\n\n---\n\n![Register Component](/assets/primeng-register.png)\n\n### Reset Password Component\n\nReset Password:\n\n---\n\n![Reset Password Component](/assets/primeng-reset-password.png)\n\nReset Password Message:\n\n---\n\n![Reset Password Message](/assets/primeng-reset-password-message.png)\n\n### Set Password Component\n\nSet Password:\n\n---\n\n![Set Password Component](/assets/primeng-set-password.png)\n\nSet Password Feedback:\n\n---\n\n![Set Password Feedback](/assets/primeng-set-password-feedback.png)\n\nSet Password Validation:\n\n---\n\n![Set Password Validation](/assets/primeng-set-password-validation.png)\n\n### Bootstrap\n\n⏳ Coming soon...\n\n### Material\n\n⏳ Coming soon...\n\n## Development\n\n### Remove Tag\n\n```bash\ngit tag --delete \u003ctagname\u003e\ngit push --delete origin \u003ctagname\u003e\n```\n\n### Create New Release\n\nTo generate a new release, use the following steps:\n\n1. Run `npm run nx -- release --skip-publish` locally. This will create a commit and tag\n2. Push the changes (including the new tag) to the remote repository with `git push \u0026\u0026 git push --tags`.\n3. The publish workflow will automatically trigger and publish the packages to the npm registry.\n\n_see more on these steps [here](https://nx.dev/recipes/nx-release/publish-in-ci-cd)_\n\n## TODOs\n\n- [x] Add SignedIn route guard\n- [x] Add avatar component\n- [x] Upgrade to NGPrime 18\n- [x] Remove use of PrimeFlex\n- [ ] Add Roles route guard\n- [ ] Full coverage unit tests\n- [ ] Documentation site\n- [ ] Implement Bootstrap components\n- [ ] Implement Material components\n- [ ] Fully support Angular SSR\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frustygreen%2Fng-supabase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frustygreen%2Fng-supabase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frustygreen%2Fng-supabase/lists"}