I'm trying to sign up a new user with email and password using Firebase.
Below you can see my Vue method.
signup() {
if (!this.validate()) return
const auth = getAuth()
createUserWithEmailAndPassword(auth, this.email, this.password)
.then(() => {
console.log("Signup successful!")
})
.catch((error) => {
const errorMessage = error.message
console.error("Signup error! ", errorMessage)
})
}
Right below my script tag I have this import:
import { getAuth, createUserWithEmailAndPassword } from "#/firebase.js"
And in my firebase.js file I have this code:
import { initializeApp } from "firebase/app"
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"
const firebaseConfig = {
// here I pasted the config object I got from Firebase
}
initializeApp(firebaseConfig)
export { getAuth, createUserWithEmailAndPassword }
When I try to sign a new user up, I get this printed out in the console:
POST https://identitytoolkit.googleapis.com/v1/accounts:lookup?key=AIzaSyDmpWucdj9MuwM5mvjA5_TKMCFlsUXUGpg 400
Signup successful!
I can see that I have a new user registered in my Firebase console. Why is this error showing up then?
Related
update 2, i logged the errors
update: I changed const db = getDatabase to const db getDatabase()
it printed to the console that the credentials were removed, but when i checked database, they still remain.
plus this error
I am trying to delete the user data as well as the authenticated data. I am successfully deleting the authenticated data, but it leaves the rest of the data in the database untouched. I have tried the following code:
import React from "react";
import { getAuth, deleteUser, onAuthStateChanged } from "firebase/auth";
import { remove, ref, getDatabase } from "firebase/database";
import { connectStorageEmulator } from "firebase/storage";
function DeleteUser() {
const auth = getAuth();
const user = auth.currentUser;
const db = getDatabase;
const del = ()=>{
if (user) {
remove(ref(db,'users'+user.uid))
.then(()=>{
console.log("credentials emoved")
})
.catch((error)=>{
console.log('failed')
});
deleteUser(user)
.then(() => {
console.log("User deleted");
})
.catch((error) => {
console.log("failed");
});
} else {
console.log("user is sighned out");
}
}
return (
<div>
<button onClick={del}>Delete</button>
</div>
);
}
export default DeleteUser;
I am using this bit to try removing the data, but I am getting some errors
remove(ref(db,'users'+user.uid))
.then(()=>{
console.log("credentials emoved")
})
.catch((error)=>{
console.log('failed')
});
The getDatabase() is a function but you are just assigning that to a variable instead of calling it.
const db = getDatabase;
// change that to
const db = getDatabase();
The recent login required essentially means user must have logged in (by entering their password, signing in by Google, etc) recently. If they have been logged in for a while then you'll need to reauthenticate the user (ask them to enter their password if using Email-password auth).
Checkout Firebase: recent login requested for more information.
I integrated supabase with react-native I followed this article
But I couldn't signUp
import AsyncStorage from '#react-native-async-storage/async-storage'
import { createClient } from '#supabase/supabase-js'
import { SUPABASE_URL, SUPABASE_ANON_KEY } from '../constants'
export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
localStorage: AsyncStorage as any,
})
const signup = async (email, password)=>{
const { user, error } = await supabase.auth.signUp({
email,
password,
})
if(error){
console.log(error);
// Object {
// "message": "Unable to validate email address: invalid format",
// "status": 422,
// }
return
}
return user;
}
When I Invoke signup function it prints
Unable to validate email address: invalid format
I had a similar issue with auth.generateLink. It turned out that my arguments were in the wrong order.
I have a problem concerning my application using firebase: If I want to enable the users to reset their password themselves firebase doesn't send an email to their address. If I do it myself from the firebase console it works fine. I'm trying it like this:
resetPassword(email: string) {
sendPasswordResetEmail(this.auth, email)
.then(() => {
// Password reset email sent!
// ..
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
}
Has someone some insights for me, why this isn't working? I get my auth like this:
this.firebaseApp = initializeApp(environment.firebaseConfig);
this.auth = getAuth(firebaseApp);
I am using the Firebase Modular SDK (V9.0.0+).
I would be really grateful if someone can help me!
Cheers!
Where are you getting environment from? If you are getting it correctly and environment.firebaseConfig is not undefined then this should work.
import { initializeApp } from 'firebase/app';
import { getAuth, sendPasswordResetEmail } from "firebase/auth";
const app = initializeApp(environment.firebaseConfig);
const auth = getAuth();
sendPasswordResetEmail(auth, email)
.then(() => {
// Password reset email sent!
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
sorry for not providing the most useful answer, what I suggest is:
Verify the console is not throwing Firebase errors
Validate that the firebase env variables are correct
I have an application that logs in both by email and password and by GoogleAuth, but after logged in, if the user reloads the page, it logs out.
I'm trying to manage GoogleAuthProvider, signInWithEmailAndPassword and setPersistence. For this example, just follow the login function with Google. I did it as follows:
Login.vue
import { getAuth, setPersistence, inMemoryPersistence, GoogleAuthProvider, signInWithPopup, } from "firebase/auth";
googleSignIn: function() {
const auth = getAuth();
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then(() => {
setPersistence(auth, inMemoryPersistence);
this.$router.push("/");
})
.catch((error) => {
// error messages
}
});
},
I'm trying to apply what I saw here: https://firebase.google.com/docs/auth/web/auth-state-persistence
On the other hand, in the parent component (after logging in), I'm getting the user data without any problems as follows:
Header.vue
import { getAuth, onAuthStateChanged } from "firebase/auth";
export default {
date: () => ({ username: "" }),
created() {
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
this.username = user.displayName;
} else {
this.username = "logged out";
}
});
},
};
EDIT
I'm including the data saved in the application here. Even so, when reloading the user logs out.
On browser environments the default behavior for Firebase Authentication is to persist the user authentication state between page loads, and there is no need to call setPersistence yourself. I recommend removing this call from your code, and leaving it to the Firebase SDK to use its defaults.
That's the intended behavior. You are setting auth persistence to inMemoryPersistencce. The documentation says,
NONE (inMemoryPeristence) indicates that the state will only be stored in memory and will be cleared when the window or activity is refreshed.
Try setting the persistence to SESSION or LOCAL.
If I open dev tools, I can see I am authenticated. The issue seems to be with your redirect here:
router.beforeEach((to, from, next) => {
// This currentUser maybe undefined
const currentUser = getAuth().currentUser;
// ...
else next();
});
Try using onAuthStateChanged() in the beforeEach:
router.beforeEach((to, from, next) => {
const auth = getAuth()
onAuthStateChanged(auth, (user) => {
if (!user) return next("login");
})
})
How do we do this now:
const auth = getAuth(firebaseApp);
export async function updateUserEmail(email) {
try {
// let updatedUser = if need access
await auth.currentUser.updateEmail(email);
} catch (e) {
alert(e.message);
throw new Error();
}
}
updateEmail is no longer a method
You need to import updateEmail from the SDK this way now:
import firebase from "firebase/compat/app";
import { getAuth, onAuthStateChanged, updateEmail } from "firebase/auth";
// Initialize Firebase App
const app = firebase.initializeApp(firebaseConfig);
const auth = getAuth(app);
onAuthStateChanged(auth, (user) => {
console.log("Old Email", user.email);
updateEmail(user, "new#email.tld").then(() => {
console.log("email updated");
}).catch((e) => {
console.log(e);
});
});
Also you need to pass the user object itself in the updateEmail function so for testing purpose I've added the code in onAuthStateChanged but you can fetch the object or actually store it when page loads.