Can not login after npm update Firebase - javascript

I updated firebase to "firebase": "^4.2.0". Seems like the user's object properties changed.
const loginGG = () => {
try {
firebase.initializeApp(clientCredentials)
} catch (e) {
console.log('firebase is already created')
}
return firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())
.then(result => {
if(!result || !result.user) throw new Error('LOGIN ERROR')
const token = result.user.ze;
const user = result.user;
Cookies.set('tapId', token);
Cookies.set('tapUser', JSON.stringify(user));
history.go(-1);
return {
user,
token
}
})
.catch(function(error) {
console.log(error);
return {}
});
}
so I changed 'result.user.ie' to 'result.user.ze'. I know there is another way to generate the token because on firebase doc they say 'Use User.getToken() instead.' I tried and no success. Maybe someone who has experienced it can help me ?

.ze or .ie sound like non public fields, as you said, you could use the getToken method. which returns a promise resolving with the jwt token. something like
user.getToken().then(token => {/* do something with the token*/})
see the firebase docs:

Related

Firebase - Why is the claim not added to the user attributes?

I'm adding the claim to a user's profile that he or she paid for something, though, after the payment this attribute isn't visible. I'm running the functions on an emulator on a local host.
This is the code I'm using:
If the paypal function has been handled succesfully through paypalHandleOrder, then the function addPaidClaim is invoked.
onApprove: (data, actions) => {
paypalHandleOrder({ orderId: data.orderID }).then(
addPaidClaim(currentUser).then(
alert("THANKS FOR ORDERING!"),
// currentUser.getIdTokenResult().then(idTokenResult => {
// console.log(idTokenResult.claims)
// })
)
.catch((err) => {
return err;
})
);}
addPaidClaim is a firebase cloud function, which goes as follows:
exports.addPaidClaim = functions.https.onCall((data, context) => {
// get user and add custom claim (paid)
return admin.auth().setCustomUserClaims(data.uid, {
paid: true,
}).then(() => {
return {
message: `Success! ${data.email} has paid the course`,
};
}).catch((err) => {
return err;
});
});
I've refreshed the page and checked the user attributes afterwards through console.log on the user to see if the attribute had been added, but this is not the case. I can't find attribute paid inside the idTokenResult object. What should I do? I also find it hard to make sense of what's happening inside the function addPaidClaim. It's not returning an error when I look at the logs on my firebase console, and not much information is given, besides that the function has been invoked.
Okay, I know this question is pretty old. But I found a way just yesterday after 3 days searching over the solution. After we set up a new claim for a new user using, we need to refresh the client's getIdTokenResult(true) in the app. These are the ways I did it in Flutter Dart until a new user with updated claim managed to use it:
FirebaseAuth auth = FirebaseAuth.instance;
Future<Map<String, dynamic>> signInWithGoogle() async {
Map<String, dynamic> output = {};
final googleUser = await googleSignIn.signIn();
if (googleUser == null) {
log("Firebase => Gmail account doesn't exist");
} else {
final googleAuth = await googleUser.authentication;
final credential = GoogleAuthProvider.credential(
idToken: googleAuth.idToken,
accessToken: googleAuth.accessToken,
);
await auth.signInWithCredential(credential).then((values) async {
await userAuth(credential).then((value) =>
value.addAll(output));
});
}
return output;
}
Future<Map<String, dynamic> userAuth (OAuthCredential credential) async {
Map<String, dynamic> output = {};
await auth.currentUser!.reauthenticateWithCredential(credential);
await auth.currentUser!.reload();
await auth.currentUser!.getIdTokenResult().then((result) => {
if(result.claims!.isNotEmpty){
//check your claim here
} else {
//assign log here
}
});
return output;
}

Firebase getIdToken not working

I'm makeing tests with Firebase Authentication from javascript client and I'm trying to retrieve the idToken with retrieve id tokens on clients documentation
I think I'm forgetting something basic.
A user is logged in with Google
The code is just i've seen in other posts and in the documentation. And the result is in the comments.
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
console.log(user); // this is shown. Firebase user and provider data
console.log(user.uid); // Shown
firebase.auth().user.getIdToken().then(function(idToken) {
console.log(idToken+'--'); // Nothing happens. No errors and the function not continues
});
console.log(user.uid); // Nothing happens
}
})
Thanks
EDIT:
if I add anything wrong nothing happens too. for example if I add an alert it shows the alert but if I have a mistake, for example alter() not shows any error. Added catch and nothing too
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
alter() // Nothing happens and the function stop
console.log(user); // this is shown. Firebase user and provider data
console.log(user.uid); // Shown
firebase.auth().user.getIdToken().then(function(idToken) {
console.log(idToken+'--'); // Nothing happens. No errors and the function not continues
}).catch(function(error) {
console.log(error+'--'); // Nothing
});
console.log(user.uid); // Nothing happens
}
})
firebase.auth().user doesn't have the user in that moment yet. You have to use the user from firebase.auth().onAuthStateChanged directly like this:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
console.log(user); // It shows the Firebase user
console.log(firebase.auth().user); // It is still undefined
user.getIdToken().then(function(idToken) { // <------ Check this line
console.log(idToken); // It shows the Firebase token now
});
}
});
You can only use firebase.auth().user after firebase.auth().onAuthStateChanged is completed and outside of its scope, otherwise it will be undefined.
firebase.auth().currentUser is synchronous. We can make it asynchronous by subscribing to the auth observable instead.
Depending on the library we’re using, the JavaScript SDK has onAuthStateChanged() and AngularFire2 has both authState() onAuthStateChanged().
// For AngularFire:
private afAuth: AngularFireAuth,
afAuth.authState.subscribe(user => {
if (user) {
user.getIdToken(true).then(idToken => {
// ...
});
}
});
// or
this.afAuth.auth.onAuthStateChanged(user => {
if (user) {
user.getIdToken(true).then(idToken => {
//...
});
}
});
// For the JS SDK
firebase.auth().onAuthStateChanged(user => {
if (user) {
user.getIdToken(true).then(idToken => {
// ...
});
}
});
For firebase versions greater than V8. We directly have to call the functions of auth.
const loginWithGoogle = () => {
const googleProvider = new GoogleAuthProvider();
signInWithPopup(auth, googleProvider)
.then((userCredentials) => {
if (userCredentials) {
setIsUserAuthenticated(true);
window.localStorage.setItem('authorization', true);
console.log(userCredentials);
userCredentials.user.getIdToken().then((token) => {
setToken(token);
console.log(token);
});
}
})
.catch((err) => {
console.log(err.message);
});
};

Facebook login in React Native

I am developing an app in React Native and I want to implement logging in with Facebook.
I have an API in Node.js where I handle the logic for users to log in, etc.
I use passport.js to let users log in with either Facebook or traditional Email.
I am opening an URL in my API with SafariView which is just a regular "WebView" directly in my app.
I have tried using the following code:
class FacebookButton extends Component {
componentDidMount() {
// Add event listener to handle OAuthLogin:// URLs
Linking.addEventListener('url', this.handleOpenURL);
// Launched from an external URL
Linking.getInitialURL().then((url) => {
if (url) {
this.handleOpenURL({ url });
}
});
}
componentWillUnmount() {
Linking.removeEventListener('url', this.handleOpenURL);
}
handleOpenURL({ url }) {
// Extract stringified user string out of the URL
const [, user_string] = url.match(/user=([^#]+)/);
this.setState({
// Decode the user string and parse it into JSON
user: JSON.parse(decodeURI(user_string))
});
if (Platform.OS === 'ios') {
SafariView.dismiss();
}
}
openURL(url) {
if (Platform.OS === 'ios') {
SafariView.show({
url: url,
fromBottom: true,
});
} else {
Linking.openURL(url);
}
}
render() {
return (
<Button
onPress={() => this.openURL('https://mywebsite.com/api/auth/facebook')}
title='Continue with Facebook'
...
so I guess I will have to do the authentication on URL https://mywebsite.com/api/auth/facebook and then send the user to an url that looks something like OAuthLogin://..., but I am not entirely sure how to use it.
Can anyone help me move in the right direction?
import { LoginManager, AccessToken } from 'react-native-fbsdk'; // add this file using npm i react-native-fbsdk
Create function
const onFacebookButtonPress = async () => {
// Attempt login with permissions
const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);
if (result.isCancelled) {
throw 'User cancelled the login process';
}
// Once signed in, get the users AccesToken
const userInfo = await AccessToken.getCurrentAccessToken();
if (!userInfo) {
throw 'Something went wrong obtaining access token';
}
console.log('user info login', userInfo)
// Create a Firebase credential with the AccessToken
const facebookCredential = auth.FacebookAuthProvider.credential(userInfo.accessToken);
setGoogleToken(userInfo.accessToken)
// Sign-in the user with the credential
return auth().signInWithCredential(facebookCredential)
.then(() => {
//Once the user creation has happened successfully, we can add the currentUser into firestore
//with the appropriate details.
console.log('current User ####', auth().currentUser);
var name = auth().currentUser.displayName
var mSplit = name.split(' ');
console.log("mSplit ",mSplit);
let mUserDataFacebook = {
user_registration_email: auth().currentUser.email,
user_registration_first_name: mSplit[0],
user_registration_last_name: mSplit[1],
registration_type: 'facebook',
user_registration_role: "Transporter",
token: userInfo.accessToken,
user_image : auth().currentUser.photoURL,
};
console.log('mUserDataFacebook',mUserDataFacebook)
LoginWithGoogleFacebook(mUserDataFacebook) /// Call here your API
firestore().collection('users').doc(auth().currentUser.uid) //// here you can add facebook login details to your firebase authentication.
.set({
fname: mSplit[0],
lname: mSplit[1],
email: auth().currentUser.email,
createdAt: firestore.Timestamp.fromDate(new Date()),
userImg: auth().currentUser.photoURL,
})
//ensure we catch any errors at this stage to advise us if something does go wrong
.catch(error => {
console.log('Something went wrong with added user to firestore: ', error);
})
})
}
Call this function on button press onFacebookButtonPress()
For android need to setup and add facebook id in
android/app/src/main/res/values/strings.xml file
add these two lines.
YOUR_FACEBOOK_ID
fbYOUR_FACEBOOK_ID //Don't remove fb in this string value
/////////////add this code in AndroidMainfest.xml file
//////////This code add in MainApplication.java file
import com.facebook.FacebookSdk;
import com.facebook.appevents.AppEventsLogger;
/////////add code build.gradle file
implementation 'com.facebook.android:facebook-android-sdk:[5,6)'

Tracking Google OAuth2 token changes [duplicate]

I have a simple single-page javascript webapp which uses "Google Sign-In for Websites": https://developers.google.com/identity/sign-in/web/sign-in
How can I get an access token for the user? I need a verifiable assertion of the user's identity on my server. I don't want offline access; I just want to know that when the web client sends an ajax request to my server, I can trust the identity of the logged-in user.
For verification purposes it would be better to use the id_token which is part of the auth response, and can be retrieved at any point like this:
gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().id_token
The Google API Client libraries offer functions to verify the id_token and give you the associated user information on the server side: https://developers.google.com/api-client-library/
First, you need to initialize the SDK
Then call the following function to get the access-token
gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token;
This solution help for me to get access token in javascript.
Hope your are doing well.
Here is the solution, You may try this:
Actually there is no such a function name getAccessToken (Android Only) define in GoogleSignin.android.js as written here https://github.com/devfd/react-native-google-signin.
But the best part is they have already implemented the solution in GoogleSignin.android.js. just take a look at the code below from GoogleSignin.android.js
currentUserAsync() {
return new Promise((resolve, reject) => {
const sucessCb = DeviceEventEmitter.addListener('RNGoogleSignInSilentSuccess', (user) => {
this._user = user;
RNGoogleSignin.getAccessToken(user).then((token) => {
this._user.accessToken = token;
this._removeListeners(sucessCb, errorCb);
resolve(this._user);
})
.catch(err => {
this._removeListeners(sucessCb, errorCb);
resolve(this._user);
});
});
The thing is only we have do use this code wisely.
I have use the below code to get access_token and it help me to solve my access token problem.
I change above function like this in GoogleSignin.android.js
currentUserAsync() {
return new Promise((resolve, reject) => {
const sucessCb = DeviceEventEmitter.addListener('RNGoogleSignInSilentSuccess', (user) => {
this._user = user;
RNGoogleSignin.getAccessToken(user).then((token) => {
this._user.accessToken = token;
this._removeListeners(sucessCb, errorCb);
resolve(token);
})
.catch(err => {
this._removeListeners(sucessCb, errorCb);
resolve(this._user);
});
});
and I call this function like this from index.android.js.
_signIn() {
GoogleSignin.signIn()
.then((user) => {
console.log('this1' + JSON.stringify(user));
this.setState({user: user});
var gettoken = GoogleSignin.currentUserAsync(user).then((token) => {
console.log('USER token', token);
this.setState({user: user});
}).done();
}).catch((err) => {
console.log('WRONG SIGNIN', err);
})
.done();
}
You can call it as a individual function it look like this.
in GoogleSignin.android.js
getAccessTok(user)
{
RNGoogleSignin.getAccessToken(user).then((token) => {
this._user.accessToken = token;
resolve(token);
})
.catch(err => {
this._removeListeners(sucessCb, errorCb);
console.log('got error');
resolve(this._user);
});
}
and from index.android.js just call this function like this
_getToken(){
console.log(GoogleSignin.getAccessTok(this.state.user));
}
only you have to do is to pass the current user to get access token.
Hope this will help you.Have a great day.Thank You.
Yeah, it is 2021. And I was facing the same problem.
My solution is
gapi.signin2.render(this.id, {
scope: this.scope,
width: this._width,
height: this._height,
longtitle: this._longTitle,
theme: this.theme,
// Set to true, otherwise only user actively logging in with Google will have access token
onsuccess: (googleUser: gapi.auth2.GoogleUser) => googleUser.getAuthResponse(true),
onfailure: () => this.handleFailure()
});

How to get the access token from Google Sign-In Javascript SDK?

I have a simple single-page javascript webapp which uses "Google Sign-In for Websites": https://developers.google.com/identity/sign-in/web/sign-in
How can I get an access token for the user? I need a verifiable assertion of the user's identity on my server. I don't want offline access; I just want to know that when the web client sends an ajax request to my server, I can trust the identity of the logged-in user.
For verification purposes it would be better to use the id_token which is part of the auth response, and can be retrieved at any point like this:
gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().id_token
The Google API Client libraries offer functions to verify the id_token and give you the associated user information on the server side: https://developers.google.com/api-client-library/
First, you need to initialize the SDK
Then call the following function to get the access-token
gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token;
This solution help for me to get access token in javascript.
Hope your are doing well.
Here is the solution, You may try this:
Actually there is no such a function name getAccessToken (Android Only) define in GoogleSignin.android.js as written here https://github.com/devfd/react-native-google-signin.
But the best part is they have already implemented the solution in GoogleSignin.android.js. just take a look at the code below from GoogleSignin.android.js
currentUserAsync() {
return new Promise((resolve, reject) => {
const sucessCb = DeviceEventEmitter.addListener('RNGoogleSignInSilentSuccess', (user) => {
this._user = user;
RNGoogleSignin.getAccessToken(user).then((token) => {
this._user.accessToken = token;
this._removeListeners(sucessCb, errorCb);
resolve(this._user);
})
.catch(err => {
this._removeListeners(sucessCb, errorCb);
resolve(this._user);
});
});
The thing is only we have do use this code wisely.
I have use the below code to get access_token and it help me to solve my access token problem.
I change above function like this in GoogleSignin.android.js
currentUserAsync() {
return new Promise((resolve, reject) => {
const sucessCb = DeviceEventEmitter.addListener('RNGoogleSignInSilentSuccess', (user) => {
this._user = user;
RNGoogleSignin.getAccessToken(user).then((token) => {
this._user.accessToken = token;
this._removeListeners(sucessCb, errorCb);
resolve(token);
})
.catch(err => {
this._removeListeners(sucessCb, errorCb);
resolve(this._user);
});
});
and I call this function like this from index.android.js.
_signIn() {
GoogleSignin.signIn()
.then((user) => {
console.log('this1' + JSON.stringify(user));
this.setState({user: user});
var gettoken = GoogleSignin.currentUserAsync(user).then((token) => {
console.log('USER token', token);
this.setState({user: user});
}).done();
}).catch((err) => {
console.log('WRONG SIGNIN', err);
})
.done();
}
You can call it as a individual function it look like this.
in GoogleSignin.android.js
getAccessTok(user)
{
RNGoogleSignin.getAccessToken(user).then((token) => {
this._user.accessToken = token;
resolve(token);
})
.catch(err => {
this._removeListeners(sucessCb, errorCb);
console.log('got error');
resolve(this._user);
});
}
and from index.android.js just call this function like this
_getToken(){
console.log(GoogleSignin.getAccessTok(this.state.user));
}
only you have to do is to pass the current user to get access token.
Hope this will help you.Have a great day.Thank You.
Yeah, it is 2021. And I was facing the same problem.
My solution is
gapi.signin2.render(this.id, {
scope: this.scope,
width: this._width,
height: this._height,
longtitle: this._longTitle,
theme: this.theme,
// Set to true, otherwise only user actively logging in with Google will have access token
onsuccess: (googleUser: gapi.auth2.GoogleUser) => googleUser.getAuthResponse(true),
onfailure: () => this.handleFailure()
});

Categories