Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jabali2004/ngx-strapi-auth
[WIP] NgxStrapiAuth implements all standard operations like logging in or registering a user for the headless CMS Strapi.
https://github.com/jabali2004/ngx-strapi-auth
angular auth auth-library library strapi
Last synced: 10 days ago
JSON representation
[WIP] NgxStrapiAuth implements all standard operations like logging in or registering a user for the headless CMS Strapi.
- Host: GitHub
- URL: https://github.com/jabali2004/ngx-strapi-auth
- Owner: jabali2004
- License: apache-2.0
- Created: 2021-03-13T16:18:06.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-16T00:30:44.000Z (6 months ago)
- Last Synced: 2024-10-05T11:47:07.956Z (about 1 month ago)
- Topics: angular, auth, auth-library, library, strapi
- Language: TypeScript
- Homepage:
- Size: 28 MB
- Stars: 8
- Watchers: 0
- Forks: 4
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# NgxStrapiAuth
[](https://github.com/jabali2004/ngx-strapi-auth/actions/workflows/build.yml)
> NgxStrapiAuth in Version 0.2.x is currently in alpha and not stable. Only up to version 0.1.x it is currently usable. The goal is to remove various dependencies like Nebular, Material and NgxTranslate.
> 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](https://github.com/ngx-translate/core)
* authentifikation providers
* google
* github
* microsoft
* facebook
* twitter
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](https://github.com/ngx-translate/core).
Install ngx-translate:
```` bash
npm install @ngx-translate/core @ngx-translate/http-loader --save
````
Integrate ngx-translate in app.module.ts:
```` typescript
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)](https://akveo.github.io/nebular/docs) :
```` bash
ng add @nebular/theme
````
NgBootstrap [(docs)](https://ng-bootstrap.github.io/#/home) :
```` bash
ng add @ng-bootstrap/ng-bootstrap
````
### Install ngx-strapi-auth
Install npm package:
```` bash
npm install --save ngx-strapi-auth
````
Register StrapiAuthModule in app.module:
```` typescript
@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)
```` typescript
{
path: '',
loadChildren: () => import('./auth/auth.module').then((m) => m.AuthModule),
},
{
path: 'profile',
canActivate: [AuthGuard],
component: ProfileComponent,
}
````
Routes registered in StrapiAuthRoutingModule:
```` typescript
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:
```` bash
ng g m Auth
````
Import StrapiAuthRoutingModule in auth.module:
```` typescript
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:
```` typescript
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
```` json
{
"/api/*": {
"target": "http://localhost:1337",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
````
Activate proxy in angular.json:
```` 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.
```` typescript
export class ProfileComponent extends StrapiProfileComponent implements OnInit {}
````
## Project structure
```` bash
└── 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:
```` bash
npm install -g strapi @angular/cli # install strapi, angular cli
````
Install local packages:
```` bash
npm install # Install all needed packages in repo
````
Start frontend and backend:
```` bash
npm start
````
Should Angular and Strapi be started separately:
```` bash
ng serve
````
```` bash
cd backend
strapi dev
````
## Contribute
1. Fork it
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes (`git commit -am 'Add some fooBar'`)
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request