``` npm install @anli/auth --save ```
npm install @anli/auth --save
`
`
npm install @ngrx/store @ngrx/effects @ngrx/entity --save
npm install @ngrx/store-devtools --save-dev
`
`
npm install angularfire2@5.0.0-rc.4 --save
npm install firebase@4.13.1 --save
`
`
npm install ramda --save
`
Usage
Update to src/environments/environment.ts:
`
export const environment = {
production: false,
auth0: {
clientId: '',
domain: '',
},
firebase: {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
}
}
`
Update to src/app/app.module.ts:
`javascript
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {
AuthModule,
Auth0Module, // only if using auth0
FirebaseModule, // only if using firebase
} from '@anli/auth';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
...
@NgModule({
...
imports: [
...
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AuthModule,
Auth0Module.forRoot(environment.auth0), // only if using auth0
FirebaseModule, // only if using firebase
EffectsModule.forRoot([]),
StoreModule.forRoot({ }),
StoreDevtoolsModule.instrument({ maxAge: 25 }),
`
Update to login.module.ts:
`javascript
import { ComponentsModule } from '@anli/auth';
...
@NgModule({
...
imports: [
...
ComponentsModule,
`
Update to login.html:
`html
(click)="login(loginForm.form)" >
Login
`
Update to login.ts:
`javascript
import {
Logout, selectError,
FirebaseLogin as Login, // only if using firebase
Auth0Login as Login, // only if using auth0
} from '@anli/auth';
import { Store, select } from '@ngrx/store';
...
export class LoginPage {
...
constructor(
...
public loadingCtrl: LoadingController,
public store: Store,
public toastCtrl: ToastController,
) { }
login(form: FormGroup) {
const email = form.value.email;
const password = form.value.password;
let loading = this.loadingCtrl.create({ content: 'Please wait...' });
loading.present();
this.store.dispatch(new Login(email, password));
this.store
.pipe(
select(selectError),
filter(res => !R.isNil(res)),
first(),
)
.subscribe((res: { ok: boolean, response?: string }) => {
loading.dismiss();
if (res.response) {
this.notification(res.response);
}
if (res.ok) {
// this.navCtrl.setRoot('HomePage');
}
})
}
notification(message: string, duration: number = 3000): void {
let toast = this.toastCtrl.create({
message,
duration,
});
toast.present();
}
``