{"id":13472855,"url":"https://github.com/jabali2004/ngx-strapi-auth","last_synced_at":"2025-03-26T17:31:25.255Z","repository":{"id":37185180,"uuid":"347418329","full_name":"jabali2004/ngx-strapi-auth","owner":"jabali2004","description":"[WIP] NgxStrapiAuth implements all standard operations like logging in or registering a user for the headless CMS Strapi.","archived":false,"fork":false,"pushed_at":"2024-05-16T00:30:44.000Z","size":29406,"stargazers_count":8,"open_issues_count":46,"forks_count":4,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-24T18:25:43.378Z","etag":null,"topics":["angular","auth","auth-library","library","strapi"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jabali2004.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2021-03-13T16:18:06.000Z","updated_at":"2024-08-01T20:20:43.000Z","dependencies_parsed_at":"2024-01-16T07:27:36.160Z","dependency_job_id":"7640543e-7320-46d5-b1b9-a447de1a242f","html_url":"https://github.com/jabali2004/ngx-strapi-auth","commit_stats":{"total_commits":424,"total_committers":3,"mean_commits":"141.33333333333334","dds":0.3679245283018868,"last_synced_commit":"016c4ba7a9bd4fb4b83772a718151a32127e9ef4"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jabali2004%2Fngx-strapi-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jabali2004%2Fngx-strapi-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jabali2004%2Fngx-strapi-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jabali2004%2Fngx-strapi-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jabali2004","download_url":"https://codeload.github.com/jabali2004/ngx-strapi-auth/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245377954,"owners_count":20605375,"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","auth","auth-library","library","strapi"],"created_at":"2024-07-31T16:00:58.515Z","updated_at":"2025-03-26T17:31:24.682Z","avatar_url":"https://github.com/jabali2004.png","language":"TypeScript","funding_links":[],"categories":["Strapi v3"],"sub_categories":["Plugin \u0026 Providers - v3"],"readme":"# NgxStrapiAuth\n\n[![build pipeline](https://github.com/jabali2004/ngx-strapi-auth/actions/workflows/build.yml/badge.svg)](https://github.com/jabali2004/ngx-strapi-auth/actions/workflows/build.yml)\n\n\u003e 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.\n\n\u003e NgxStrapiAuth is a Angular library that implements all standard operations like logging in or registering a user for the headless CMS Strapi.\n\nServices and guards are provided, as well as ready-made components.\n\nThe goal of this project is to implement standard functionalities so that a developer does not have to deal with these tasks unnecessarily.\n\n## Features\n\nCurrently implemented functionalities:\n\n* login / logout user\n* register new user\n* update user\n* reset / request password reset\n* authenticating requests using interceptor\n* auth guard / token guard\n* ready to use routing module\n* translation using [ngx-translate](https://github.com/ngx-translate/core)  \n* authentifikation providers\n  * google\n  * github\n  * microsoft\n  * facebook\n  * twitter\n\nFinished Angular components:\n\n* login\n* logout\n* register\n* request password\n* reset password\n* profile (update password or user info)\n\n## Roadmap\n\n### Version 1.0:\n\n* add abstraction for auth providers\n* enhance auth interceptor\n  * better error handling\n  * token refresh\n* add modular and customizable styling options\n* add modular component / form creation using model definitions\n* add captcha option for registration\n* add support for older angular versions\n* enhance documentation\n\n## Installation / Integration\n\n\u003e NgxStrapiAuth uses Nebular, NgBootstrap for components and styling, and NgxTranslate for implementing multilingualism.\n\n### Requirements\n\n\u003e The use of NodeJS v14 is highly recommended.\n\nMinimum requirements:\n\n* NodeJS v14\n* Angular 11.1.1\n* Strapi 3.4.0\n\n### Install and set up NgxTranslate\n\n\u003c!-- TODO: Improve installation / integration documentation --\u003e\n\nFor more information look at the official [documentation](https://github.com/ngx-translate/core).\n\nInstall ngx-translate:\n\n```` bash\nnpm install @ngx-translate/core @ngx-translate/http-loader  --save\n````\n\nIntegrate ngx-translate in app.module.ts:\n\n```` typescript\nimport { LOCALE_ID, NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport localeDe from '@angular/common/locales/de';\nimport localeEn from '@angular/common/locales/en';\nimport {\n  HttpClientModule,\n  HttpClient,\n} from '@angular/common/http';\nimport {\n  TranslateModule,\n  TranslateLoader,\n  TranslateService,\n} from '@ngx-translate/core';\nimport { TranslateHttpLoader } from '@ngx-translate/http-loader';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { registerLocaleData } from '@angular/common';\n\n\nregisterLocaleData(localeEn, 'en');\nregisterLocaleData(localeDe, 'de');\n\n// AoT requires an exported function for factories\nexport function createTranslateLoader(http: HttpClient): TranslateHttpLoader {\n  return new TranslateHttpLoader(http, './assets/i18n/', '.json');\n}\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        HttpClientModule,\n        TranslateModule.forRoot({\n            loader: {\n                provide: TranslateLoader,\n                useFactory: createTranslateLoader,\n                deps: [HttpClient]\n            }\n        })\n    ],\n    providers: [\n      { provide: LOCALE_ID, useValue: 'de-DE' }\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule { }\n````\n\n### Install Nebular and NgBootstrap\n\nNebular [(docs)](https://akveo.github.io/nebular/docs) :\n\n```` bash\nng add @nebular/theme\n````\n\nNgBootstrap [(docs)](https://ng-bootstrap.github.io/#/home) :\n\n```` bash\nng add @ng-bootstrap/ng-bootstrap\n````\n\n### Install ngx-strapi-auth\n\nInstall npm package:\n\n```` bash\nnpm install --save ngx-strapi-auth\n````\n\nRegister StrapiAuthModule in app.module:\n\n```` typescript\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    StrapiAuthModule.forRoot({\n      strapi_base_url: 'http://localhost:1337', // environment.API_BASE_PATH\n      auth_providers: ['github'], // github , microsoft , ....\n      routes: { // override some default routing paths\n        login: '/auth/login',\n        register: '/auth/register',\n        logoutRedirect: '/'\n      }\n    }),\n  ],\n    providers: [\n    { // register AuthInterceptor\n      provide: HTTP_INTERCEPTORS, \n      useClass: AuthInterceptor,\n      multi: true\n    }\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {\n  constructor(\n    private translate: TranslateService,\n    private authService: AuthService\n  ) {\n    // Load all translations used in StrapiAuthModule\n    this.authService.setDefaultTranslation(this.translate);\n  }\n}\n````\n\nAdd routes for authentifikation and user handling to routing module:\n\napp.routing.module (example)\n```` typescript\n  {\n    path: '',\n    loadChildren: () =\u003e import('./auth/auth.module').then((m) =\u003e m.AuthModule),\n  },\n  {\n    path: 'profile',\n    canActivate: [AuthGuard],\n    component: ProfileComponent,\n  }\n````\n\nRoutes registered in StrapiAuthRoutingModule:\n\n```` typescript\nconst routes: Routes = [\n  {\n    path: '',\n    component: AuthComponentsComponent,\n    children: [\n      {\n        path: 'login',\n        component: LoginComponent\n      },\n      {\n        path: 'register',\n        component: RegisterComponent\n      },\n      {\n        path: 'logout',\n        component: LogoutComponent\n      },\n      {\n        path: 'request-password',\n        component: RequestPasswordComponent\n      },\n      {\n        path: 'reset-password',\n        component: ResetPasswordComponent\n      },\n      {\n        path: 'providers',\n        canActivateChild: [TokenGuard],\n        children: [\n          {\n            path: 'github'\n          },\n          {\n            path: 'google'\n          },\n          {\n            path: 'microsoft'\n          }\n        ]\n      }\n    ]\n  }\n];\n````\n\nCreate AuthModule:\n\n```` bash\nng g m Auth\n````\n\nImport StrapiAuthRoutingModule in auth.module:\n\n```` typescript\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AuthService, StrapiAuthRoutingModule } from 'ngx-strapi-auth';\nimport { TranslateService } from '@ngx-translate/core';\n\n@NgModule({\ndeclarations: [],\nimports: [CommonModule, StrapiAuthRoutingModule], // Import StrapiAuthRoutingModule\n})\nexport class AuthModule {}\n````\n\nActivate user handling in app.component:\n\n```` typescript\n  constructor(private authService: AuthService) {}\n\n  // Load user data if user is authenticated\n  ngOnInit(): void {\n    if (this.authService.isAuthenticated \u0026\u0026 !this.authService.getUser()) {\n      this.authService.loadUser();\n    }\n\n    this.authService.AuthState.subscribe(() =\u003e {\n      if (this.authService.isAuthenticated \u0026\u0026 !this.authService.getUser()) {\n        this.authService.loadUser();\n      }\n    });\n  }\n````\n\nAdd proxy for developing:\n\nproxy.conf.json\n\n```` json\n{\n  \"/api/*\": {\n    \"target\": \"http://localhost:1337\",\n    \"secure\": false,\n    \"pathRewrite\": {\n      \"^/api\": \"\"\n    }\n  }\n}\n````\n\nActivate proxy in angular.json:\n\n```` json\n  \"serve\": {\n    \"builder\": \"@angular-devkit/build-angular:dev-server\",\n    \"options\": {\n      \"browserTarget\": \"NgStrapiAuthTest:build\",\n      \"proxyConfig\": \"src/proxy.conf.json\"\n    },\n    \"configurations\": {\n      \"production\": {\n        \"browserTarget\": \"NgStrapiAuthTest:build:production\"\n      }\n    }\n  },\n````\n\n### Override default components\n\nThe already implemented Angular components can be manually overridden by creating a custom component and extending it with a pre-implemented component.\n\n```` typescript\nexport class ProfileComponent extends StrapiProfileComponent implements OnInit {}\n````\n\n## Project structure\n\n```` bash\n└── projects\n    ├── strapi-auth library # library project\n    │   └── src\n    │       └── lib\n    │           ├── components # pre-implemented components\n    │           │   ├── auth-components\n    │           │   │   ├── auth-block\n    │           │   │   ├── login\n    │           │   │   ├── logout\n    │           │   │   ├── register\n    │           │   │   ├── request-password\n    │           │   │   └── reset-password\n    │           │   └── profile\n    │           ├── guards # auth and token guard\n    │           ├── i18n # language files\n    │           ├── interceptors\n    │           ├── routing\n    │           ├── services\n    │           ├── styles\n    │           └── types # interfaces and classes\n    └── strapi-auth-showcase # test and showcase project\n        ├── src\n        │   ├── app\n        │   │   ├── @core # core components\n        │   │   │   ├── components\n        │   │   │   ├── services\n        │   │   │   └── utils\n        │   │   ├── @theme # theme using nebular\n        │   │   │   ├── components\n        │   │   │   ├── directives\n        │   │   │   ├── layouts\n        │   │   │   ├── pipes\n        │   │   │   └── styles\n        │   │   └── pages # pages\n        │   │       ├── auth\n        │   │       ├── home\n        │   │       └── miscellaneous\n        │   │           └── not-found\n        │   ├── assets\n        │   └── environments\n        └── strapi_backend # example strapi backend\n            ├── api\n            ├── build\n            ├── config\n            ├── exports\n            ├── extensions\n            └── public\n````\n\n\u003c!-- TODO: Add development guide --\u003e\n\n## Development guide\n\n### First start\n\nInstall needed global packages:\n\n```` bash\n   npm install -g strapi @angular/cli # install strapi, angular cli\n````\n\nInstall local packages:\n\n```` bash\nnpm install # Install all needed packages in repo\n````\n\nStart frontend and backend:\n\n```` bash\nnpm start\n````\n\nShould Angular and Strapi be started separately:\n\n```` bash\nng serve\n````\n\n```` bash\ncd backend\nstrapi dev\n````\n\n## Contribute\n\n1. Fork it \u003chttps://github.com/jabali2004/ngx-strapi-auth/fork\u003e\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -am 'Add some fooBar'`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjabali2004%2Fngx-strapi-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjabali2004%2Fngx-strapi-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjabali2004%2Fngx-strapi-auth/lists"}