ngx-strapi-auth v0.2.10
NgxStrapiAuth
NgxStrapiAuth in Version 0.2 is currently in alpha and not stable.
NgxStrapiAuth is a Angular library that implements all standard operations like logging in or registering a user for the headless CMS Strapi.
Services and guards are provided, as well as ready-made components.
The goal of this project is to implement standard functionalities so that a developer does not have to deal with these tasks unnecessarily.
Features
Currently implemented functionalities:
- login / logout user
- register new user
- update user
- reset / request password reset
- authenticating requests using interceptor
- auth guard / token guard
- ready to use routing module
- translation using ngx-translate
- authentifikation providers
- github
- microsoft
Finished Angular components:
- login
- logout
- register
- request password
- reset password
- profile (update password or user info)
Roadmap
Version 1.0:
- add abstraction for auth providers
- enhance auth interceptor
- better error handling
- token refresh
- add modular and customizable styling options
- add modular component / form creation using model definitions
- add captcha option for registration
- add support for older angular versions
- enhance documentation
Installation / Integration
NgxStrapiAuth uses Nebular, NgBootstrap for components and styling, and NgxTranslate for implementing multilingualism.
Requirements
The use of NodeJS v14 is highly recommended.
Minimum requirements:
- NodeJS v14
- Angular 11.1.1
- Strapi 3.4.0
Install and set up NgxTranslate
For more information look at the official documentation.
Install ngx-translate:
npm install @ngx-translate/core @ngx-translate/http-loader --save
Integrate ngx-translate in app.module.ts:
import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import localeDe from '@angular/common/locales/de';
import localeEn from '@angular/common/locales/en';
import {
HttpClientModule,
HttpClient,
} from '@angular/common/http';
import {
TranslateModule,
TranslateLoader,
TranslateService,
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localeEn, 'en');
registerLocaleData(localeDe, 'de');
// AoT requires an exported function for factories
export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
})
],
providers: [
{ provide: LOCALE_ID, useValue: 'de-DE' }
],
bootstrap: [AppComponent]
})
export class AppModule { }
Install Nebular and NgBootstrap
Nebular (docs) :
ng add @nebular/theme
NgBootstrap (docs) :
ng add @ng-bootstrap/ng-bootstrap
Install ngx-strapi-auth
Install npm package:
npm install --save ngx-strapi-auth
Register StrapiAuthModule in app.module:
@NgModule({
declarations: [AppComponent],
imports: [
StrapiAuthModule.forRoot({
strapi_base_url: 'http://localhost:1337', // environment.API_BASE_PATH
auth_providers: ['github'], // github , microsoft , ....
routes: { // override some default routing paths
login: '/auth/login',
register: '/auth/register',
logoutRedirect: '/'
}
}),
],
providers: [
{ // register AuthInterceptor
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}
],
bootstrap: [AppComponent],
})
export class AppModule {
constructor(
private translate: TranslateService,
private authService: AuthService
) {
// Load all translations used in StrapiAuthModule
this.authService.setDefaultTranslation(this.translate);
}
}
Add routes for authentifikation and user handling to routing module:
app.routing.module (example)
{
path: '',
loadChildren: () => import('./auth/auth.module').then((m) => m.AuthModule),
},
{
path: 'profile',
canActivate: [AuthGuard],
component: ProfileComponent,
}
Routes registered in StrapiAuthRoutingModule:
const routes: Routes = [
{
path: '',
component: AuthComponentsComponent,
children: [
{
path: 'login',
component: LoginComponent
},
{
path: 'register',
component: RegisterComponent
},
{
path: 'logout',
component: LogoutComponent
},
{
path: 'request-password',
component: RequestPasswordComponent
},
{
path: 'reset-password',
component: ResetPasswordComponent
},
{
path: 'providers',
canActivateChild: [TokenGuard],
children: [
{
path: 'github'
},
{
path: 'google'
},
{
path: 'microsoft'
}
]
}
]
}
];
Create AuthModule:
ng g m Auth
Import StrapiAuthRoutingModule in auth.module:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthService, StrapiAuthRoutingModule } from 'ngx-strapi-auth';
import { TranslateService } from '@ngx-translate/core';
@NgModule({
declarations: [],
imports: [CommonModule, StrapiAuthRoutingModule], // Import StrapiAuthRoutingModule
})
export class AuthModule {}
Activate user handling in app.component:
constructor(private authService: AuthService) {}
// Load user data if user is authenticated
ngOnInit(): void {
if (this.authService.isAuthenticated && !this.authService.getUser()) {
this.authService.loadUser();
}
this.authService.AuthState.subscribe(() => {
if (this.authService.isAuthenticated && !this.authService.getUser()) {
this.authService.loadUser();
}
});
}
Add proxy for developing:
proxy.conf.json
{
"/api/*": {
"target": "http://localhost:1337",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
Activate proxy in angular.json:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "NgStrapiAuthTest:build",
"proxyConfig": "src/proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "NgStrapiAuthTest:build:production"
}
}
},
Override default components
The already implemented Angular components can be manually overridden by creating a custom component and extending it with a pre-implemented component.
export class ProfileComponent extends StrapiProfileComponent implements OnInit {}
Project structure
└── projects
├── strapi-auth library # library project
│ └── src
│ └── lib
│ ├── components # pre-implemented components
│ │ ├── auth-components
│ │ │ ├── auth-block
│ │ │ ├── login
│ │ │ ├── logout
│ │ │ ├── register
│ │ │ ├── request-password
│ │ │ └── reset-password
│ │ └── profile
│ ├── guards # auth and token guard
│ ├── i18n # language files
│ ├── interceptors
│ ├── routing
│ ├── services
│ ├── styles
│ └── types # interfaces and classes
└── strapi-auth-showcase # test and showcase project
├── src
│ ├── app
│ │ ├── @core # core components
│ │ │ ├── components
│ │ │ ├── services
│ │ │ └── utils
│ │ ├── @theme # theme using nebular
│ │ │ ├── components
│ │ │ ├── directives
│ │ │ ├── layouts
│ │ │ ├── pipes
│ │ │ └── styles
│ │ └── pages # pages
│ │ ├── auth
│ │ ├── home
│ │ └── miscellaneous
│ │ └── not-found
│ ├── assets
│ └── environments
└── strapi_backend # example strapi backend
├── api
├── build
├── config
├── exports
├── extensions
└── public
Development guide
First start
Install needed global packages:
npm install -g strapi @angular/cli # install strapi, angular cli
Install local packages:
npm install # Install all needed packages in repo
Start frontend and backend:
npm start
Should Angular and Strapi be started separately:
ng serve
cd backend
strapi dev
Contribute
- Fork it https://github.com/jabali2004/ngx-strapi-auth/fork
- Create your feature branch (
git checkout -b feature/fooBar
) - Commit your changes (
git commit -am 'Add some fooBar'
) - Push to the branch (
git push origin feature/fooBar
) - Create a new Pull Request
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago