Firebase

Our templates uses firebase service for default app authorization.

Configuring

Replace firebase configuration with yours in src/app/services/firebase/index.ts

src/app/services/firebase/index.ts
export const firebaseConfig = {
apiKey: 'AIzaSyBJVhr2WZshEGR7egcxoygQIphKOkKVIYQ',
authDomain: 'sellpixels-7d5d4.firebaseapp.com',
databaseURL: 'https://sellpixels-7d5d4.firebaseio.com',
projectId: 'sellpixels-7d5d4',
storageBucket: 'cleanui-72a42.appspot.com',
messagingSenderId: '338219933237',
}

Inject service to app

src/app/app.module.ts
import { AngularFireModule } from '@angular/fire'
import { AngularFireAuthModule } from '@angular/fire/auth'
import { AngularFirestoreModule, SETTINGS } from '@angular/fire/firestore'
import { firebaseConfig, firebaseAuthService } from './services/firebase'
@NgModule({
declarations: [AppComponent],
imports: [
...,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule,
AngularFirestoreModule,
],
providers: [
...,
firebaseAuthService,
{ provide: SETTINGS, useValue: {} },
]
})

Authorization Methods

Check src/app/services/firebase/index.js file for next functions:

src/app/services/firebase/index.ts
export class firebaseAuthService {
constructor(
...
) {
...
this.firebaseAuth.authState.subscribe(user => {
// save user state to ngrx store on firebase user state udpate
...
}
}
async login(email: string, password: string) { ... }
async register(email: string, password: string, name: string) { ... }
async logout() { ... }

For switching app to authorized state you should set authorized prop to true

src/app/store/user/reducers.ts
const initialState = {
id: 'USER_ID',
name: 'USER_NAME',
role: 'USER_ROLE',
avatar: '',
authorized: true, // user is authorized
loading: false, // handles user fetching state, eg. set Sign In button to loading state
}

src/app/store/user/effects.ts file handles app authorization process. The app should get user data from firebase API and save user state to store.

src/redux/user/.js
import * as firebase from 'services/firebase'
@Injectable()
export class UserEffects implements OnInitEffects {
// fetch user data on app init
ngrxOnInitEffects(): Action {
return { type: UserActions.LOAD_CURRENT_ACCOUNT }
}
@Effect()
login: Observable<any> = this.actions.pipe( ... )
@Effect()
register: Observable<any> = this.actions.pipe( ... )
@Effect()
loadCurrentAccount: Observable<any> = this.actions.pipe( ... )
@Effect()
logout: Observable<any> = this.actions.pipe( ... )
}

Dispatching Auth Methods

src/app/components/{templateName}/system/Auth/login/login.component.ts
submitForm(): void {
const payload = {
email: this.email.value,
password: this.password.value,
}
this.store.dispatch(new UserActions.Login(payload))
}
src/app/components/{templateName}/system/Auth/login/register.component.ts
submitForm(): void {
const payload = {
email: this.email.value,
password: this.password.value,
name: this.name.value,
}
this.store.dispatch(new UserActions.Register(payload))
}
src/app/components/{templateName}/layout/Topbar/UserMenu/user-menu.component.ts
logout() {
this.store.dispatch(new UserActions.Logout())
}