Angular - Firebase get userdata after redirect
0
I currently try to refactor all the signInWithPopup methods with signInWithRedirect because its more user-friedly on mobile devices. Nevertheless when I try to retrieve the data after the redirect I am never able to get it. I even tried to set a timeout. Maybe some of you know the solution for my issue:
Firebase doc
My Service
public loginWithGoogle(): Promise<firebase.UserCrendential> {
const provider = new firebase.auth.GoogleAuthProvider();
return this.angularFireAuth.auth.signInWithRedirect(provider).then(() =>
this.angularFireAuth.auth.getRedirectResult().then(res => res));
}
Component
// binded on a click event on the dom - just wanna log the data not more :(
public loginWithGoogle(): void {
this.loginService.loginWithGoogle().then(res => console.log(res))
}
angular firebase firebase-authentication angularfire2 add a comment |
0
I currently try to refactor all the signInWithPopup methods with signInWithRedirect because its more user-friedly on mobile devices. Nevertheless when I try to retrieve the data after the redirect I am never able to get it. I even tried to set a timeout. Maybe some of you know the solution for my issue:
Firebase doc
My Service
public loginWithGoogle(): Promise<firebase.UserCrendential> {
const provider = new firebase.auth.GoogleAuthProvider();
return this.angularFireAuth.auth.signInWithRedirect(provider).then(() =>
this.angularFireAuth.auth.getRedirectResult().then(res => res));
}
Component
// binded on a click event on the dom - just wanna log the data not more :(
public loginWithGoogle(): void {
this.loginService.loginWithGoogle().then(res => console.log(res))
}
add a comment |
0
0
0
I currently try to refactor all the signInWithPopup methods with signInWithRedirect because its more user-friedly on mobile devices. Nevertheless when I try to retrieve the data after the redirect I am never able to get it. I even tried to set a timeout. Maybe some of you know the solution for my issue:
Firebase doc
My Service
public loginWithGoogle(): Promise<firebase.UserCrendential> {
const provider = new firebase.auth.GoogleAuthProvider();
return this.angularFireAuth.auth.signInWithRedirect(provider).then(() =>
this.angularFireAuth.auth.getRedirectResult().then(res => res));
}
Component
// binded on a click event on the dom - just wanna log the data not more :(
public loginWithGoogle(): void {
this.loginService.loginWithGoogle().then(res => console.log(res))
}
I currently try to refactor all the signInWithPopup methods with signInWithRedirect because its more user-friedly on mobile devices. Nevertheless when I try to retrieve the data after the redirect I am never able to get it. I even tried to set a timeout. Maybe some of you know the solution for my issue:
Firebase doc
My Service
public loginWithGoogle(): Promise<firebase.UserCrendential> {
const provider = new firebase.auth.GoogleAuthProvider();
return this.angularFireAuth.auth.signInWithRedirect(provider).then(() =>
this.angularFireAuth.auth.getRedirectResult().then(res => res));
}
Component
// binded on a click event on the dom - just wanna log the data not more :(
public loginWithGoogle(): void {
this.loginService.loginWithGoogle().then(res => console.log(res))
}
asked Nov 23 '18 at 8:38
user10207707
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
-1
I've faced this before.
Here's a workaround if you're interested in one:
You can listen to the authState Observable on AngularFireAuth. Once you subscribe to it in the ngOnInit on your Component, after the redirect, the authState is going to change and would yield the logged-in user's details.
Something like this:
import { Component, OnInit } from '@angular/core';
...
import { AngularFireAuth } from 'angularfire2/auth';
...
@Component({...})
export class UserDetailsComponent implements OnInit {
constructor(...public afAuth: AngularFireAuth,...) { }
ngOnInit() {
this.afAuth.authState.subscribe(user => {
if(user) {
console.log('User Details: ', user);
} else {
console.log('No user logged in as of now');
}
})
}
...
}
answered Nov 23 '18 at 8:46
SiddAjmeraSiddAjmera
16k31239
1
It works but not satisfied at all, why is there a getRedirectResult() function if it is not working? Furthermore my initial goal was to extend my service method to set a user document in firestore if there is not. So I want to encapsulate this logic all within a service and keep my components as dummy as possible.... I need to make an action explizit and only after I get the redirect result.
– user10207707
Nov 23 '18 at 8:54
1
You could look at using the resolve function on the router that way you could on login and you go to a different route have it do x angular.io/api/router/Resolve Or you could encapsulate it in your auth guard where it does an async get of the user data in your service
– Jack Woodward
Nov 23 '18 at 9:02
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53443165%2fangular-firebase-get-userdata-after-redirect%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
-1
I've faced this before.
Here's a workaround if you're interested in one:
You can listen to the authState Observable on AngularFireAuth. Once you subscribe to it in the ngOnInit on your Component, after the redirect, the authState is going to change and would yield the logged-in user's details.
Something like this:
import { Component, OnInit } from '@angular/core';
...
import { AngularFireAuth } from 'angularfire2/auth';
...
@Component({...})
export class UserDetailsComponent implements OnInit {
constructor(...public afAuth: AngularFireAuth,...) { }
ngOnInit() {
this.afAuth.authState.subscribe(user => {
if(user) {
console.log('User Details: ', user);
} else {
console.log('No user logged in as of now');
}
})
}
...
}
answered Nov 23 '18 at 8:46
SiddAjmeraSiddAjmera
16k31239
1
It works but not satisfied at all, why is there a getRedirectResult() function if it is not working? Furthermore my initial goal was to extend my service method to set a user document in firestore if there is not. So I want to encapsulate this logic all within a service and keep my components as dummy as possible.... I need to make an action explizit and only after I get the redirect result.
– user10207707
Nov 23 '18 at 8:54
1
You could look at using the resolve function on the router that way you could on login and you go to a different route have it do x angular.io/api/router/Resolve Or you could encapsulate it in your auth guard where it does an async get of the user data in your service
– Jack Woodward
Nov 23 '18 at 9:02
add a comment |
-1
I've faced this before.
Here's a workaround if you're interested in one:
You can listen to the authState Observable on AngularFireAuth. Once you subscribe to it in the ngOnInit on your Component, after the redirect, the authState is going to change and would yield the logged-in user's details.
Something like this:
import { Component, OnInit } from '@angular/core';
...
import { AngularFireAuth } from 'angularfire2/auth';
...
@Component({...})
export class UserDetailsComponent implements OnInit {
constructor(...public afAuth: AngularFireAuth,...) { }
ngOnInit() {
this.afAuth.authState.subscribe(user => {
if(user) {
console.log('User Details: ', user);
} else {
console.log('No user logged in as of now');
}
})
}
...
}
answered Nov 23 '18 at 8:46
SiddAjmeraSiddAjmera
16k31239
1
It works but not satisfied at all, why is there a getRedirectResult() function if it is not working? Furthermore my initial goal was to extend my service method to set a user document in firestore if there is not. So I want to encapsulate this logic all within a service and keep my components as dummy as possible.... I need to make an action explizit and only after I get the redirect result.
– user10207707
Nov 23 '18 at 8:54
1
You could look at using the resolve function on the router that way you could on login and you go to a different route have it do x angular.io/api/router/Resolve Or you could encapsulate it in your auth guard where it does an async get of the user data in your service
– Jack Woodward
Nov 23 '18 at 9:02
add a comment |
-1
-1
-1
I've faced this before.
Here's a workaround if you're interested in one:
You can listen to the authState Observable on AngularFireAuth. Once you subscribe to it in the ngOnInit on your Component, after the redirect, the authState is going to change and would yield the logged-in user's details.
Something like this:
import { Component, OnInit } from '@angular/core';
...
import { AngularFireAuth } from 'angularfire2/auth';
...
@Component({...})
export class UserDetailsComponent implements OnInit {
constructor(...public afAuth: AngularFireAuth,...) { }
ngOnInit() {
this.afAuth.authState.subscribe(user => {
if(user) {
console.log('User Details: ', user);
} else {
console.log('No user logged in as of now');
}
})
}
...
}
answered Nov 23 '18 at 8:46
SiddAjmeraSiddAjmera
16k31239
I've faced this before.
Here's a workaround if you're interested in one:
You can listen to the authState Observable on AngularFireAuth. Once you subscribe to it in the ngOnInit on your Component, after the redirect, the authState is going to change and would yield the logged-in user's details.
Something like this:
import { Component, OnInit } from '@angular/core';
...
import { AngularFireAuth } from 'angularfire2/auth';
...
@Component({...})
export class UserDetailsComponent implements OnInit {
constructor(...public afAuth: AngularFireAuth,...) { }
ngOnInit() {
this.afAuth.authState.subscribe(user => {
if(user) {
console.log('User Details: ', user);
} else {
console.log('No user logged in as of now');
}
})
}
...
}
answered Nov 23 '18 at 8:46
SiddAjmeraSiddAjmera
16k31239
edited Nov 23 '18 at 13:05
answered Nov 23 '18 at 8:46
SiddAjmeraSiddAjmera
16k31239
answered Nov 23 '18 at 8:46
SiddAjmeraSiddAjmera
16k31239
answered Nov 23 '18 at 8:46
SiddAjmeraSiddAjmera
16k31239
16k31239
1
It works but not satisfied at all, why is there a getRedirectResult() function if it is not working? Furthermore my initial goal was to extend my service method to set a user document in firestore if there is not. So I want to encapsulate this logic all within a service and keep my components as dummy as possible.... I need to make an action explizit and only after I get the redirect result.
– user10207707
Nov 23 '18 at 8:54
1
You could look at using the resolve function on the router that way you could on login and you go to a different route have it do x angular.io/api/router/Resolve Or you could encapsulate it in your auth guard where it does an async get of the user data in your service
– Jack Woodward
Nov 23 '18 at 9:02
add a comment |
1
It works but not satisfied at all, why is there a getRedirectResult() function if it is not working? Furthermore my initial goal was to extend my service method to set a user document in firestore if there is not. So I want to encapsulate this logic all within a service and keep my components as dummy as possible.... I need to make an action explizit and only after I get the redirect result.
– user10207707
Nov 23 '18 at 8:54
1
You could look at using the resolve function on the router that way you could on login and you go to a different route have it do x angular.io/api/router/Resolve Or you could encapsulate it in your auth guard where it does an async get of the user data in your service
– Jack Woodward
Nov 23 '18 at 9:02
1
1
It works but not satisfied at all, why is there a getRedirectResult() function if it is not working? Furthermore my initial goal was to extend my service method to set a user document in firestore if there is not. So I want to encapsulate this logic all within a service and keep my components as dummy as possible.... I need to make an action explizit and only after I get the redirect result.
– user10207707
Nov 23 '18 at 8:54
It works but not satisfied at all, why is there a getRedirectResult() function if it is not working? Furthermore my initial goal was to extend my service method to set a user document in firestore if there is not. So I want to encapsulate this logic all within a service and keep my components as dummy as possible.... I need to make an action explizit and only after I get the redirect result.
– user10207707
Nov 23 '18 at 8:54
1
1
You could look at using the resolve function on the router that way you could on login and you go to a different route have it do x angular.io/api/router/Resolve Or you could encapsulate it in your auth guard where it does an async get of the user data in your service
– Jack Woodward
Nov 23 '18 at 9:02
You could look at using the resolve function on the router that way you could on login and you go to a different route have it do x angular.io/api/router/Resolve Or you could encapsulate it in your auth guard where it does an async get of the user data in your service
– Jack Woodward
Nov 23 '18 at 9:02
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53443165%2fangular-firebase-get-userdata-after-redirect%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
