Firebase email verification flow - javascript

I am a newbie to firebase. I need a way to verify an email address during the signup process. The user should NOT be automatically logged in without verification. What code can I add to allow me to check if the email is verified or not. If yes, the user can login. If not, they need to very first. Please see code below
async registerUser(customer: Customer, password: string) {
try {
const newUserCredential = await this.firebaseAuth.createUser(
customer.email,
password
);
// store user details in firestore
this.firebaseStore.storeUserDetails(newUserCredential, customer);
// send email verification
await newUserCredential.user.sendEmailVerification();
} catch (error) {
console.error(error);
throw new Error(error.message);
}
}

You just need to check the emailVerified property on the User object.
const {emailVerified} = this.firebaseAuth.currentUser
if (emailVerified) {
// Email is verified
} else {
console.log("Email is not verified")
// Alert user
}

Related

Adding Email Authentication to a Login Service that uses React and Firebase

I currently have a file for authentication called AuthContext.js and a seperate file called Login.js for my login page. Firebase is only imported into the AuthContext file and it currently works, the method appears as follows
function signup(email, password) {
return auth.createUserWithEmailAndPassword(email, password);
}
And the method is called in the Login file inside of an async function.
async function handleSubmit(e) {
e.preventDefault();
if (passwordRef.current.value !== passwordConfirmRef.current.value) {
return setError("Passwords do not match");
}
try {
setError("");
setLoading(true);
await signup(emailRef.current.value, passwordRef.current.value);
navigate("/");
} catch (err) {
setError("Failed to create an account");
}
setLoading(false);
}
I am now attempting to integrate email authentication into the function. I would like to get it to where, if an account remains unverified for a elongated duration then it will delete the account, but I think that Is likely in the Firebase settings.
I found this article on geeksforgeeks that suggested calling the method in the following manner:
const signup = ()=>{
   auth.createUserWithEmailAndPassword(email , password)
   .then((userCredential)=>{
       // send verification mail.
     userCredential.user.sendEmailVerification();
     auth.signOut();
     alert("Email sent");
   })
   .catch(alert);
}
However, when I attempted to return this function in the form
function signup(email, password) {
return auth.createUserWithEmailAndPassword(email, password).then(
(userCredentials) => {
userCredentials.user.sendEmailVerification();
auth.signOut();
auth.alert("Please verify your email address before logging in.");
}
);
}
It does not work properly, and I get error messages every time I try to sign up a new account. How do I properly implement this to where the promise returns properly and displays the correct message? Is there a way for me to link them to the /login page with an alert already on it that says "Please verify your email address before logging in."? Thanks in advance for any help!

How to implement the change password API in typescript with jwt?

I created login api and implemented jwt in that. Now I am trying to implement change_password with jwt authentication with cookies or local storage. I tried and not able to do that. Can anybody help me with the change password api and also i attached my Login API.
export let login=async(req:Request,resp:Response)=>{
var {email , password} = req.body;
try{
const user=await User.findOne({email}).lean();
if(!user){
return resp.json({message:"user not found"})
}
if(await bcryptjs.compare(password,user.password)){
const token=jwt.sign(
{
id:user._id,
username:user.email
},config.token.secret)
return resp.json({status:'ok',data:token})
}
return resp.json({status:'error',data:'comming soon'})
}catch(error){
console.log(error);
}
}
You can create a different route for change password and there can be multiple ways for doing this. Let keep it simple.
You can ask user the username and existing password and a new password. Check if the existing password matches the password in DB and hash the new password and save it.
app.post('/passwordChange', (req, res) => {
const {username, password, newPassword} = req.body;
const user = User.findOne({username});
//check the password matches and then update the User with new password
const matched = await bcryptjs.compare(password,user.password);
if (matched) {
User.updateOne({}) // go your things
}
else {
// do tell your to update correct password
}
})
There can be multiple simple and complex ways to achieve it. The above code is a pseudocode, modify to use it in the code.

Firebase Sign Up with username. Cliend Side + Security Rules or Backend?

I have implemented a Firebase SignUp with username, email and password. Basically what I am doing is:
1- Create user with email and password (if the username and email are not used by other users)
2- Add the username to the user
Like this:
firebase
.createUserWithEmailAndPassword(email, password)
.then((currentUser) => {
// Get the username from the input
const username = this.usernameInput.current.getText();
// Create a user with this username and the current user uid in the db
firebase.createUserWithUsername(username, currentUser.user.uid); // <----------
})
.catch((err) => {
// ...
});
And my createUserWithUsername function basically do this:
createUserWithUsername = (username, userId) => {
/*
Create a document in the usernames collection
which uid (of the document itself, not a field) is the given username.
*/
// Pass username to lowercase
username = username.toLowerCase();
// Initial user's data
const data = {
email: this.auth.currentUser.email,
username,
};
return this.db
.collection("usernames")
.doc(username)
.set({ userId })
.then(() => {
this.db.collection("users").doc(userId).set(data);
})
.catch((err) => {
console.log(err);
throw err;
});
/*
Pd: As firestore automatically removes empty documents, we have to
assign them a field. The user's id is a good option, because it will help us to
update usernames faster, acting like a 'Foreign Key' in a NoSql DB.
*/
};
My question is? Is it wrong to leave this code on the client side? Can it be a security problem? Do I need to move this to a cloud function / backend?
This is my firestore security rule for the usernames collection:
match /usernames/{username} {
function isUsernameAvailable() {
return !exists(/databases/$(database)/documents/usernames/$(username));
}
allow read: if true;
allow write, update: if isSignedIn() && isUsernameAvailable();
// TODO - Allow delete?
}
I would really appreciate any guide for this. Thank you.

Why does sendSignInLinkToEmail(email, settings) not check whether the given email exists?

I don't understand, why firebase.auth().sendSignInLinkToEmail(email, settings) sends a login email to an email address which has not been registered yet.
Moreover, when I then click the link, which opens the site where I check the email with firebase.auth().signInWithEmailLink(email, signInEmailLink), the email gets registered and the user is logged in!
I think that's curios, because I've build a separate registration process.
I would expect, that I get an error when I call firebase.auth().sendSignInLinkToEmail(email, settings) with an unregistered email.
What am I doing wrong?
That's my code for sending the email and signing in when user clicked the link.
async login(email) {
try {
const settings = {
handleCodeInApp: true,
url: encodeURI(`${location.protocol}//${location.host}/#!/user/verifizieren`),
};
await firebase.auth().sendSignInLinkToEmail(email, settings);
window.localStorage.setItem(storageKeyEmail, email);
} catch(error) {
console.error(error);
throw error;
}
},
async verify(email, link) {
const signInEmailLink = link || window.location.href;
if(!firebase.auth().isSignInWithEmailLink(signInEmailLink)) {
return Promise.reject('auth/link-invalid');
}
try {
await firebase.auth().signInWithEmailLink(email, signInEmailLink);
firebase.auth().currentUser.reload();
firebase.auth().currentUser.getIdToken(true);
window.localStorage.removeItem(storageKeyEmail);
} catch(error) {
console.error(error);
throw error;
}
},
Sign in with email link is designed to also work for new email accounts. The accounts are not required to already exist.
If you want to block the email sending, you can check if the account exists before hand:
firebase.auth().fetchSignInMethodsForEmail(email).then((signInMethods) => {
if (signInMethods.length === 0) {
// New user.
} else {
// Existing user.
}
});
However, the above is only client side enforced and thus can be bypassed by the user by calling the REST API.

Meteor: check email does not exist in Meteor.users collection before creating an account

I have a form where users enter their email address and password into a join form. This creates the account but I now want to develop it further.
client.js:
Template.joinForm.events({
'submit .form-join': function(e, t) {
e.preventDefault();
var email = t.find('#email').value,
password = t.find('#password').value,
username = Random.id(),
array = [],
profile = {
nameOfArray: array
};
Accounts.createUser({
email: email,
username: username,
password: password,
profile: profile
}, function(error) {
if (error) {
alert(error);
} else {
Router.go('/');
}
});
}
});
Before creating a user account, how do you:
Check if the email variable from the joinForm does not already exist in the Meteor.users collection. Processing this on the server?
If email does exist, then reject user creation?
I have seen the new function and wondering if I can use this http://docs.meteor.com/#/full/accounts_validatenewuser
Accounts.validateNewUser(function (user) {
// pseudo if statement code
if (email not exist) {
// 1. create the user account and then
Accounts.sendVerificationEmail(userId, [email])
} else {
throw new Meteor.Error(403, "email address is already registered");
}
});
Thank you for reading this.
I'm unclear as to whether to use Accounts.createUser or Accounts.onCreateUser and which code should be on the client, and which on the server. My aim is to build the account securely, therefore, deny any other modification privileges during this process from the console.
The extra empty array nameOfArrayis now created on the server if the account is allowed to be created, ie, passing the validateNewUser function. Of course, you can add more validation checks for example, password length.
client.js:
Template.joinForm.events({
'submit .form-join': function(e, t) {
e.preventDefault();
var email = t.find('#email').value,
password = t.find('#password').value,
username = Random.id();
Accounts.createUser({
email: email,
username: username,
password: password,
profile: profile
}, function(error) {
if (error) {
alert(error.reason);
} else {
Router.go('/');
}
});
}
});
server.js:
Accounts.onCreateUser(function(options, user) {
var newEmail = user.emails[0].address;
console.log(newEmail);
var emailAlreadyExist = Meteor.users
.find({"emails.address": newEmail}, {limit: 1})
.count() > 0;
console.log(emailAlreadyExist + ' already exists');
if (emailAlreadyExist === true) {
throw new Meteor.Error(403, "email already registered");
} else {
profile = options.profile;
profile.nameOfArray = [];
user.profile = profile;
return user;
}
});
I've found that Accounts.createUser has it's own validation built in and checks for already existing email/login.
Meteor docs: Accounts.createUser:
If there are existing users with a username or email only differing in
case, createUser will fail.
Thus Accounts.onCreateUser doesn't even fire if Accounts.createUser email/login validation throws error.
The Accounts.validateNewUser function requires users to validate their email after submitting. It's basically that step where, after you sign up for something, before you can sign in you have to enter a code that's sent to you on your email or mobile device -- basically, it ensures that the user is who they say they are. It's what might prevent you from signing up with the email totallyfake#totally_not_a_real_place.com.
If I'm reading your question right, you're more interested in seeing if an email is unique than in seeing if the user actually owns that email account. You can do this with Accounts.onCreateUser, which runs on the server:
Called whenever a new user is created. Return the new user object, or throw an Error to abort the creation.
The full process will look something like this. On the client, exactly what you have:
Template.joinForm.events({
'submit .form-join': function(e, t) {
e.preventDefault();
var email = t.find('#email').value,
password = t.find('#password').value,
username = Random.id(),
array = [],
profile = {
nameOfArray: array
};
Accounts.createUser({
email: email,
username: username,
password: password,
profile: profile
}, function(error) {
if (error) {
alert(error);
} else {
Router.go('/');
}
});
}
});
Then, on the server, before the user is actually created, it will run the user through your onCreateUser function, and whatever you return will be inserted into the users collection:
Accounts.onCreateUser(function(options, user) {
var email = user.emails[0];
if (!email) { throw new Meteor.Error("You must provide a non-empty email"); // this may actually not be necessary -- createUser might do it for you
if (Meteor.users.find({emails: email}) {
throw new Meteor.Error("A user with email " + email + " already exists!");
}
... // whatever other transformation you might want
return user;
});
You might also check out the accounts-ui package, since depending on how much you want to do vary from a vanilla implementation of user accounts, a lot may already be done for you.
The Accounts.validateNewUser is used to check if the fields of the user object comply with the desired format, returning true or false accordingly.
To check if the email is already registered, I think you should include this verification in the Accounts.onCreateUser function (http://docs.meteor.com/#/full/accounts_oncreateuser).
Without having tested the code, you can try something like this:
Accounts.validateNewUser(function (user) {
// Check compliance of the user object fields, using check http://docs.meteor.com/#/full/check
});
Accounts.onCreateUser(function(options, user) {
if (options.profile){
user.profile = options.profile;
}
if (Meteor.users.find({email: user.email}).fetch == 0) {
if(Accounts.validateNewUser(user)){
Accounts.sendVerificationEmail(userId, [email]);
return user;
} else {
throw new Meteor.Error(403, "Error checking user fields");
} else {
throw new Meteor.Error(403, "email address is already registered");
}
}

Categories