In the meantime, please checkout the demo code for a fully working example.
UI Library | Package |
---|---|
PrimeNG | @ng-supabase/primeng |
Angular Material | @ng-supabase/material |
Bootstrap | @ng-supabase/bootstrap |
Example npm install @ng-supabase/primeng
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';
Example:
/sign-in
)/register
)/set-password
)/reset-password
)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 -->
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],
},
}),
],
};
Component | Default Route |
---|---|
Sign In | /sign-in |
Register | /register |
Set Password | /set-password |
Reset Password | /reset-password |
Sign In:
Sign In with One-Time-Password:
Register/Sign Up:
Reset Password:
Reset Password Message:
Set Password:
Set Password Feedback:
Set Password Validation:
⏳ Coming soon...
⏳ Coming soon...
git tag --delete <tagname>
git push --delete origin <tagname>
To generate a new release, use the following steps:
npm run nx -- release --skip-publish
locally. This will create a commit and taggit push && git push --tags
.see more on these steps here