Ok so I’ve been banging my head against the wall for half a day trying to resolve this, reason I haven’t as of yet is due to my level of knowledge with AngularFire2 and Angular2 is somewhat beginner.
I have an application, a simple login form which uses AngularFire2 connects to Facebook, retrieves the users Access Token and Facebook Id and then calls the Facebook Graph API which returns firstname, lastname, gender, email etc.
As shown here:
loginWithFacebook(): FirebaseListObservable<string> {
return FirebaseListObservable.create(obs => {
this.af.auth.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup,
scope: ['public_profile']
}).then((authState: any) => {
let authSubscription = this.af.auth.subscribe(auth => {
if (auth == null) return;
let url = `http://ift.tt/2k3ccyF}`;
this.http.get(url).subscribe(response => {
let user = response.json()
this.af.database.object('/users/' + authState.uid).update({
first_name: user.first_name,
last_name: user.last_name,
display_name: auth.facebook.displayName,
gender: user.gender,
email_address: auth.facebook.email,
accessToken: authState.facebook.accessToken,
facebook_Id: auth.facebook.uid,
})
},
err => {
obs.next(false);
});
});
authSubscription.unsubscribe();
obs.next(true);
}).catch(err => {
obs.next(false);
});
});
}
Facebook Id = Comes from auth
Access Token = Comes from authState
I then save the information returned from the Facebook Graph API to Firebase.
Now here comes the issue, as you can see inside the function specified above, I have subscribed to the auth method, this allows me to access the Facebook Id and the Access Token which is required to call Facebook Graph API
In the navigation of my application I have a logout button. When the user clicks this button I call
this.af.auth.logout();
Once I’ve pressed logout, my function specified above will be called due to being subscribed to the change of auth, I’ve placed an if statement inside to check if auth is null, if so return which is working – Seems a bit hacky to me.
If I then try and sign back in, the url for calling Facebook Graph API fails on ${auth.facebook.uid} which states it’s undefined, which I’m not entirely sure why this would fail because to me it’s classed as a new login so the method should run from start to finish again.
Now my question is this:
How can I get around subscribing to the auth within my Login with facebook method? and still access the Facebook Id and Access Token
I’m trying to figure out a way whereby the method will work for two scenarios which are:
- User already exists in the database
- User does not exist so its a fresh signup.
The logout and Sign Up/Login should both be isolated from one another and not interfere with one another responsibilities.
If anyone can share any knowledge or suggest a much cleaner way of doing this I would highly appreciate it.
Update
I’ve created a repository on Github which is a cut down version of my application and it shows the error I’m experiencing.
To replicate:
Inside the login.service loginWithFacebook method you will see this line of code:
if (auth.facebook.uid == null) return;
comment this out and follow the steps below.
- Login with facebook on the signup page
- signout using the logout button
- Sign back in with facebook straight after logging out
You will notice first time logging in it works, as soon as you signout and sign back in with facebook the graph API will fail due to auth.facebook.uid being undefined.
Now Ideally I do not want to subscribe to the auth event reason being is because we will be implementing signin with Google and email and password.
The only place I would like to subscribe to the auth event would be inside the nav bar which changes the menu navigation when the user becomes authorised.
NOTE: this is linked to a test account on firebase. Once this issue has been resolved the test account will be deleted. So all account information that has been used to test this will be deleted.
Final Update
Ok so I’ve decided to open a bounty on this to help find a solution.
The only way I can see this working is having one login page, this login page will cater for new and existing user, if the user logs in with Facebook if they’re new then call Facebook Graph API retrieve information about them and then save it, if they’re existing then don’t call the Facebook Graph API.
How I expect this to work:
New User:
1. User navigates to website
2. Signs in with Facebook
3. Popup appears
4. Users grants the permissions I’ve requested
5. Callback to website <- at this point I have access to users Facebook Id and accessToken via the auth
6. Call Facebook Graph API retrieve first_name, last name etc passing in users Facebook Id and accessToken
7. Then save the information returned from Facebook Graph to Firebase
Existing user
If the user has already signed up using Facebook then when he / she signs in I don’t want to call the Facebook Graph API, the call to the Graph is only required once for new accounts.
Also the repo is still available.
from Recent Questions – Stack Overflow http://ift.tt/2kTF2Sc
Stacks 1 