NgxStrapiAuth

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
• 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.

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

1. Fork it https://github.com/jabali2004/ngx-strapi-auth/fork
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