Skip to content

Commit 5c7bba1

Browse files
codediodeiocodediodeio
committed
fb auth service
1 parent e7dbd30 commit 5c7bba1

18 files changed

+336
-21
lines changed

‎.angular-cli.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"test": "test.ts",
1818
"tsconfig": "tsconfig.app.json",
1919
"testTsconfig": "tsconfig.spec.json",
20-
"prefix": "app",
20+
"prefix": "",
2121
"styles": [
2222
"styles.scss"
2323
],

‎NOTES.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
ng new firestarter -ng4 --skip-tests true --style scss --routing
2+
3+
4+
Make Sure
5+
6+
npm install -g @angular/cli
7+
npm install -g typings
8+
npm install -g typescript
9+
npm install angularfire2 firebase --save
10+
11+
Firebase sign in methods enabled
12+
13+
14+
http://stackoverflow.com/questions/34925992/how-to-avoid-imports-with-very-long-relative-paths-in-angular-2
15+
tsconfig.json changed "baseUrl": "src"
16+
to "baseUrl": "."

‎package.json

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,22 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15-
"@angular/common": ">=4.0.0-beta <5.0.0",
16-
"@angular/compiler": ">=4.0.0-beta <5.0.0",
17-
"@angular/core": ">=4.0.0-beta <5.0.0",
18-
"@angular/forms": ">=4.0.0-beta <5.0.0",
19-
"@angular/http": ">=4.0.0-beta <5.0.0",
20-
"@angular/platform-browser": ">=4.0.0-beta <5.0.0",
21-
"@angular/platform-browser-dynamic": ">=4.0.0-beta <5.0.0",
22-
"@angular/router": ">=4.0.0-beta <5.0.0",
15+
"@angular/animations": "^4.0.0",
16+
"@angular/common": "^4.0.0",
17+
"@angular/compiler": "^4.0.0",
18+
"@angular/compiler-cli": "^4.0.0",
19+
"@angular/core": "^4.0.0",
20+
"@angular/forms": "^4.0.0",
21+
"@angular/http": "^4.0.0",
22+
"@angular/platform-browser": "^4.0.0",
23+
"@angular/platform-browser-dynamic": "^4.0.0",
24+
"@angular/platform-server": "^4.0.0",
25+
"@angular/router": "^4.0.0",
26+
"angularfire2": "^2.0.0-beta.8",
2327
"core-js": "^2.4.1",
28+
"firebase": "^3.7.2",
2429
"rxjs": "^5.1.0",
30+
"typescript": "^2.2.1",
2531
"zone.js": "^0.7.6"
2632
},
2733
"devDependencies": {

‎src/app/app-routing.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { NgModule } from '@angular/core';
22
import { Routes, RouterModule } from '@angular/router';
3+
import { UserLoginComponent } from './users/user-login/user-login.component';
34

45
const routes: Routes = [
56
{
67
path: '',
78
children: []
8-
}
9+
},
10+
{ path: 'login', component: UserLoginComponent, },
911
];
1012

1113
@NgModule({

‎src/app/app.component.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<h1>
2-
{{title}}
3-
</h1>
1+
<h1>{{title}}</h1>
2+
3+
<user-profile></user-profile>
4+
45
<router-outlet></router-outlet>

‎src/app/app.component.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import { Component } from '@angular/core';
2+
import { AuthService } from "./core/auth.service";
23

34
@Component({
45
selector: 'app-root',
56
templateUrl: './app.component.html',
67
styleUrls: ['./app.component.scss']
78
})
89
export class AppComponent {
9-
title = 'app works!';
10+
11+
constructor() {}
12+
title = 'FireStarter app works!';
13+
1014
}

‎src/app/app.module.ts

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,38 @@ import { HttpModule } from '@angular/http';
66
import { AppRoutingModule } from './app-routing.module';
77
import { AppComponent } from './app.component';
88

9+
// FireStarter
10+
import { environment } from '../environments/environment';
11+
import { AuthService } from './core/auth.service';
12+
import { UserLoginComponent } from './users/user-login/user-login.component';
13+
14+
15+
import { AngularFireModule } from 'angularfire2';
16+
import { UserProfileComponent } from './users/user-profile/user-profile.component';
17+
export const firebaseConfig = environment.firebaseConfig;
18+
19+
20+
// End FireStarter
21+
22+
923
@NgModule({
1024
declarations: [
11-
AppComponent
25+
AppComponent,
26+
UserLoginComponent,
27+
UserProfileComponent
1228
],
1329
imports: [
1430
BrowserModule,
1531
FormsModule,
1632
HttpModule,
17-
AppRoutingModule
33+
AppRoutingModule,
34+
AngularFireModule.initializeApp(firebaseConfig)
1835
],
19-
providers: [],
20-
bootstrap: [AppComponent]
36+
providers: [
37+
AuthService
38+
],
39+
bootstrap: [
40+
AppComponent
41+
]
2142
})
2243
export class AppModule { }

‎src/app/core/auth.service.ts

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { Injectable } from '@angular/core';
2+
import { AngularFireAuth, AngularFireDatabase, FirebaseAuthState, AuthProviders, AuthMethods, AngularFire } from "angularfire2";
3+
// import { User } from "../users/user";
4+
import { Router } from "@angular/router";
5+
6+
7+
@Injectable()
8+
export class AuthService {
9+
10+
public authState: FirebaseAuthState = null;
11+
12+
constructor(private af: AngularFire,
13+
private db: AngularFireDatabase,
14+
private router:Router) {
15+
16+
af.auth.subscribe((auth) => {
17+
this.authState = auth;
18+
console.log(this.authState)
19+
});
20+
}
21+
22+
// Returns true if user is logged in
23+
get authenticated(): boolean {
24+
return this.authState !== null;
25+
}
26+
27+
// Returns current user
28+
get currentUser(): any {
29+
return this.authenticated ? this.authState.auth : null;
30+
}
31+
32+
// Returns current user UID
33+
get currentUserId(): string {
34+
return this.authenticated ? this.authState.uid : '';
35+
}
36+
37+
38+
//// Social Auth ////
39+
40+
githubLogin(): firebase.Promise<FirebaseAuthState> {
41+
return this.socialSignIn(AuthProviders.Github);
42+
}
43+
44+
googleLogin(): firebase.Promise<FirebaseAuthState> {
45+
return this.socialSignIn(AuthProviders.Google);
46+
}
47+
48+
facebookLogin(): firebase.Promise<FirebaseAuthState> {
49+
return this.socialSignIn(AuthProviders.Facebook);
50+
}
51+
52+
twitterLogin(): firebase.Promise<FirebaseAuthState> {
53+
return this.socialSignIn(AuthProviders.Twitter);
54+
}
55+
56+
private socialSignIn(provider: number): firebase.Promise<FirebaseAuthState> {
57+
return this.af.auth.login({provider, method: AuthMethods.Popup})
58+
.then(() => this.writeUserData() )
59+
.catch(error => console.log(error));
60+
}
61+
62+
//// Email/Password Auth ////
63+
64+
// emailSignUp(email: string, password: string): firebase.Promise<FirebaseAuthState> {
65+
// return this.af.auth.createUser({ email, password })
66+
// .then(() => this.writeUserData())
67+
// .catch(error => console.log(error));
68+
// }
69+
//
70+
// emailLogin(email: string, password: string): firebase.Promise<FirebaseAuthState> {
71+
// return this.af.auth.login({email, password})
72+
// .then(() => this.writeUserData())
73+
// .catch(error => console.log(error));
74+
// }
75+
76+
//// Anonymous Auth ////
77+
78+
// anonymousLogin() {
79+
// return this.af.auth.login({
80+
// provider: AuthProviders.Anonymous,
81+
// method: AuthMethods.Anonymous,
82+
// })
83+
// .then(() => this.writeUserData())
84+
// .catch(error => console.log(error));
85+
// }
86+
87+
//// Sign Out ////
88+
89+
signOut(): void {
90+
this.af.auth.logout();
91+
this.router.navigate(['/'])
92+
}
93+
94+
95+
//// Helpers ////
96+
97+
private writeUserData(): void {
98+
// Writes user name and email to realtime db
99+
// useful if your app displays information about users or for admin features
100+
101+
let path = `users/${this.currentUserId}`; // Endpoint on firebase
102+
let data = {
103+
name: this.currentUser.displayName,
104+
email: this.currentUser.email,
105+
}
106+
107+
this.db.object(path).update(data)
108+
.catch(error => console.log(error));
109+
110+
}
111+
112+
113+
114+
115+
}

‎src/app/users/user-login/user-login.component.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<h3>Social Login</h3>
2+
3+
<a (click)="signInWithGithub()" class="btn btn-github">
4+
<i class="fa fa-github fa-lg"></i> Connect GitHub
5+
</a>
6+
7+
8+
<a (click)="signInWithGoogle()" class="btn btn-google">
9+
<i class="fa fa-google-plus fa-lg"></i> Connect Google
10+
</a>
11+
12+
13+
<a (click)="signInWithFacebook()" class="btn btn-facebook">
14+
<i class="fa fa-facebook fa-lg"></i> Connect Facebook
15+
</a>
16+
17+
<a (click)="signInWithTwitter()" class="btn btn-facebook">
18+
<i class="fa fa-twitter fa-lg"></i> Connect Facebook
19+
</a>
20+
21+
<h3>Email/Password Login</h3>
22+
23+
24+
<h3>Anonymous Sign In</h3>
25+
26+
<a (click)="signInAnonymously()" class="btn btn-primary btn-block">
27+
Sign In as Guest
28+
</a>

‎src/app/users/user-login/user-login.component.scss

Whitespace-only changes.

0 commit comments

Comments
 (0)