This is an angular web app.
Added the screenshot of the permission page
I'm trying to authenticate mobile using firebase.
In my firebase console > Authentication > signIn Method, I've enabled the phone and saved it.
But when I try to login It throws me an error saying that
auth/operation-not-allowed
sendLoginCode() {
const appVerifier = this.windowRef.recaptchaVerifier;
const num = this.firstFormGroup.value.mobileNo
console.log('num',num);
firebase.auth().signInWithPhoneNumber(num, appVerifier)
.then(result => {
this.windowRef.confirmationResult = result;
})
.catch(error => console.log(error));
}
verifyLoginCode() {
this.windowRef.confirmationResult
.confirm(this.verificationCode)
.then(result => {
this.user = result.user;
console.log('Login Successfull')
})
.catch(error => console.log(error, "Incorrect code entered?"));
}
It looks like you haven't enabled the Google sign in method in your firebase console. To solve the issue do the following:
Enter to the firebase console (https://console.firebase.google.com/).
Select your project.
On the right side of the screen you'll see a panel, click where it says "Authentication".
Once you've entered to the Authentication menu, go to Sign-in method.
After that look for the google access provider in the list that appears below the header and click on it.
Then click on the enable button.
It is probable that you'll have to configure a secure project ID (you'll see a dropdown below the enable button). What you have to do is, enter the android and/or ios client ID from your project, and hit save. This will tell firebase that it is secure to handle sign in operations with that client.
To be able to use the phone sign in method, you need to have a paid plan active.
Original author of answer: https://stackoverflow.com/a/65598080/6310260
Related
I'm going to put a firebase-based Twitter login on a web page.
As shown in Docs, we created an app on the Twitter developer portal, put the app key and app secret in the firebase column, respectively, and added the firebase's callback URL to the Twitter app.
When you try to run by pressing the login button, a rare appears with the following error code.
auth/invalid-credential
The supplied auth credential is malformed or has expired.
Do you happen to know what I did wrong? Can I also know the solution?
JavaScript was used, and under the same conditions, Facebook and Google can log in well and retrieve user information.
Someone help me why Twitter is the only thing like this... I am desperate!
Below, I put my Twitter login code and other screenshots together in case I need it.
$(document).on('click', '#twiter', function () {
var provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().useDeviceLanguage();
firebase
.auth()
.signInWithPopup(provider)
.then((res) => {
/** #type {firebase.auth.OAuthCredential} */
var token = result.credential.accessToken;
var user = result.user;
console.log(token)
console.log(user)
// ...
}).catch((error) => {
console.log(error)
console.log(error.code)
console.log(error.message)
});
});
enter image description here
enter image description here
In my application, when I run the application, It redirects to Github Login to access the repository from the account. When the Sign In button is clicked, I get this message.
Cookies must be enabled to use GitHub.
So can anyone tell me what should I do. I tried using Cypress.Cookies.preserveOnce() , but it doesn't work.
Also, we get an access_token after successful login.
describe('Login Page', () => {
beforeEach(() => {
Cypress.Cookies.preserveOnce('access_token', 'value for the access_token')
})
it('successfully logged In', () => {
cy.get('#login_field').type('username')
cy.get('#password').type('password')
cy.get('.btn-block').click()
})
})
Take a look at this [Cypress Social Media Logins][1]. I think you are using Github Oauth to login and access.
You have to login using the plugin GitHubSocialLogin. Save the cookie that you get in the localStorage.
You will have to explore further on these lines to suit your particular use case.
[1]: https://github.com/lirantal/cypress-social-logins
ok so I've built a few apps in Firebase and really enjoy using the simple API but always struggle with auth. see this code
I have a simple email and password "form" (not a form element, just two inputs)
and then a button (div) I click to call this function below
const logUserIn = () => {
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then((res) => {
console.log('here') // this WORKS but the history redirect below does not work :/
localStorage.setItem('authUser', JSON.stringify(res))
history.push('/account')
})
.catch((error) => {
console.log('ERROR:', error)
})
}
however when I put the lines below
firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log('user logged in')
} else {
console.log('user not logged in')
}
})
it seemed to pick it up correctly
but my question is, what is the point of signInWithEmailAndPassword? and also, how do I use both functions together? do I need to call onAuthStateChanged in the .then part of my signInWithEmailAndPassword function?
it's really confusing how to have a consistent state. my app seems to work after I refresh the page but I want it to work without refreshes (obviously)
any ideas on the best approach?
EDIT
also when I click sign out
firebaseApp.auth().onAuthStateChanged((user) => {
if (user) {
history.push('/account')
} else {
console.log('NO USER')
}
})
NO USER logs but then I click on an authenticated route it takes me there until I refresh
The point of signInWithEmailAndPassword is to allow the implementation of classic username/password authentication for people who don't have a Google, Facebook, Twitter, etc. account. If you decide to add it, Google will handle the user accounts and everything, but you'll have to build the login form, complete with the I forgot my password and Register as new user links. Other than that it's simply another provider.
I have a very simple little project on my Github repo which implements user/password authentication along with several others, I suggest you to look into it. I made it as a test assignment for a job interview. It's Angular.
https://github.com/tomcatmwi/morbidomega
I am using this tutorial.
My code is:
linkedInSignup() {
console.log("linked in login....");
// check if there is an active session
this.linkedin.hasActiveSession().then((active) => {
console.log('has active session?', active);
if(active === false) {
// login
let scopes:any = ['r_basicprofile', 'r_emailaddress', 'rw_company_admin', 'w_share'];
this.linkedin.login(scopes, true)
.then(() => console.log('Logged in!'))
.catch(e => console.log('Error logging in', e));
// get connections
this.linkedin.getRequest('people/~')
.then(res => console.log(res))
.catch(e => console.log(e));
// share something on profile
const body = {
comment: 'Hello world!',
visibility: {
code: 'anyone'
}
};
this.linkedin.postRequest('~/shares', body)
.then(res => console.log(res))
.catch(e => console.log(e));
}
});
}
Installed plugin:
$ ionic cordova plugin add cordova-plugin-linkedin --variable APP_ID=YOUR_APP_ID
$ npm install --save #ionic-native/linkedin
There is not getting any error, but even doesn't login with Linked In.
Can you please help me to solve this issue? Thanks.
I am trying to implement LinkedIn login as well in my application and was also facing the same issue. The login function never passed the success callback.
After doing a little search I came across this - https://github.com/zyra/cordova-plugin-linkedin#deprecation-notice
Looks like LinkedIn has stopped support for mobile SDK and have asked all the developers to move to OAuth 2.0
Ref - https://engineering.linkedin.com/blog/2018/12/developer-program-updates
Edit:
So the workaround that I used to serve my purpose of allowing users to signup with LinkedIn was that as I was using Node.js for my server-side work. I used passport.js with LinkedIn oAuth, and in the ionic app, I made use of the Ionic InApp Browser to show the user the LinkedIn signup page and register user from the app through LinkedIn.
This is the solution that I have currently tried, but looking for some better option if possible using any Cordova plugin. Will update the answer again if I find any.
The database structure looks like this
-LGw89Lx5CA9mOe1fSRQ {
uid: "FzobH6xDhHhtjbfqxlHR5nTobL62"
image: "https://pbs.twimg.com/profile_images/8950378298..."
location: "Lorem ipsum, lorem ipsum"
name: "Lorem ipsum"
provider: "twitter.com"
}
How can I delete everything, including the -LGw89Lx5CA9mOe1fSRQ key programmatically?
I looked at this, but it's outdated and deprecated Firebase: removeUser() but need to remove data stored under that uid
I've also looked at this, but this requires for user to constantly sign in (I'm saving the user ID in localStorage) and it returns null on refresh if I write firebase.auth().currentUser. Data records and user accounts are created through social network providers and I can see the data both on Authentication and Database tab in the Firebase console.
I've tried with these piece of code but it does nothing.
// currentUser has a value of UID from Firebase
// The value is stored in localStorage
databaseChild.child(currentUser).remove()
.then(res => {
// res returns 'undefined'
console.log('Deleted', res);
})
.catch(err => console.error(err));
The bottom line is, I need to delete the user (with a specific UID) from the Authentication tab and from the Database at the same time with one click.
I know that there is a Firebase Admin SDK but I'm creating a Single Page Application and I don't have any back end code. Everything is being done on the front end.
Any kind of help is appreciated.
With suggestions from #jeremyw and #peter-haddad I was able to get exactly what I want. Here is the code that is hosted on Firebase Cloud Functions
const functions = require('firebase-functions'),
admin = require('firebase-admin');
admin.initializeApp();
exports.deleteUser = functions.https.onRequest((request, response) => {
const data = JSON.parse(request.body),
user = data.uid;
// Delete user record from Authentication
admin.auth().deleteUser(user)
.then(() => {
console.log('User Authentication record deleted');
return;
})
.catch(() => console.error('Error while trying to delete the user', err));
// Delete user record from Real Time Database
admin.database().ref().child('people').orderByChild('uid').equalTo(user).once('value', snap => {
let userData = snap.val();
for (let key of Object.keys(userData)) {
admin.database().ref().child('people').child(key).remove();
}
});
response.send(200);
});
Also, if you are facing CORS errors, add the mode: 'no-cors' option to your fetch() function and it will work without any problems.
The link you already found for deleting the user-login-account client-side is your only option if you want to keep the action on the client. Usually you want to keep most of the actions for things like account creation/deletion on the server for security reasons, and Firebase forces the issue. You can only delete your account if you were recently logged in, you can't have client-side start deleting old/random accounts.
The better option is to create your own Cloud Function to handle everything related to deleting a user. You would have to use the Admin SDK that you already found for this... but you could have that Cloud Function perform as many actions as you want - it will have to delete the user from the Auth tab, and delete the matching data in the Database.