I've been working on my first React Native project using Firebase Auth (plain email&password only).
Signing-in, Signing-out, Resetting passwords, etc... everything is fine, but I'm stuck with one thing and I need help with deleting user.
Because deleting user is a "sensitive" request, Firebase Auth demands re-authenticating the user before actually deleting the user.
This is where I can't figure out how to do it. Even the docs don't tell much. They literally say: "TODO(you): prompt the user to re-provide their sign-in credentials".
ErrorMessage :
TypeError: undefined is not an object (evaluating '_firebase.auth.EmailAuthProvider.credential')
My firebase.js :
import firebase from 'firebase';
const firebaseConfig = { //key hidden here for security reasons
apiKey: apiKey,
authDomain: authDomain,
projectId: projectId,
storageBucket: storageBucket,
messagingSenderId: messagingSenderId,
appId: appId,
measurementId: measurementId
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const auth = firebase.auth();
export {db, auth};
My component.js :
...
import { auth } from '../firebase/firebase';
...
const deleteUser = () => {
const user = auth.currentUser;
const credential = auth.EmailAuthProvider.credential(userEmail,userProvidedPassword);
user.reauthenticateWithCredential(credential).then(() => {
user.delete().then(() => {
auth.signOut();
}).catch((error) => {
console.log(error.message);
});
}).catch((error) => {
console.log(error.message);
});
}
You cannot delete users from the front-end React Native!
Instead, there is firebase admin SDK which allows you to delete users but it has to be done from the backend. I believe this link to Firebase Admin SDK will answer your questions.
Also, do check Firebase Cloud Functions if you don't have a backend and you are just relying on Firebase.
Cloud Functions allows you to create a function in Firebase that you can call from React Native using Firebase SDK and perform delete user operation also you could watch for a collection and send notification and do more stuff!
And it is simple than it sounds!
Related
I know there is a NextJS Auth ways to do it but its not comfortable to me and I'm used to do it in firebase, but I don't understand why it is receiving an error in authentication?
Basically I have this bunch of codes.
And the getAuth() is giving me an error..
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth ,GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider,GithubAuthProvider } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
console.log(process.env.API_KEY);
console.log(process.env.AUTH_DOMAIN);
console.log(process.env.PROJECT_ID);
console.log(process.env.STORAGE_BUCKET);
console.log(process.env.MESSAGING_SENDER_ID);
console.log(process.env.APP_ID);
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const storage = getStorage(app);
export const authentication = getAuth();
export const google = new GoogleAuthProvider();
export const facebook = new FacebookAuthProvider();
export const twitter = new TwitterAuthProvider();
export const github = new GithubAuthProvider();
This is the error I received in nextjs.
But all my firebase config in .env file is right and its working in console.log() can anyone tell me why it is not working? I've been annoyed lately at any bugs I receive in NextJS that I don't understand where it come from.
According to Exposing Environment Variables to the Browser, all of your process.env variables should be prefixed with NEXT_PUBLIC_.
Also as a local test, you can copy the project config directly from your project settings in the Firebase cloud UI and replace your config that's dependent on env variables. Use that to verify you're able to connect - then go back to your environment variables.
I have problem with my app. It's based on electron + react boilerplate. I tried to link Firebase Storage to let user download files, but I can't make it work.
Everytime when I try to make any operation on the storage (list files, getDownloadURL, download file, upload file) I get error:
Firebase.tsx:31 Uncaught (in promise) FirebaseError: Firebase Storage: Max retry time for operation exceeded, please try again. (storage/retry-limit-exceeded)
So far my code looks like this for debug:
import { initializeApp } from 'firebase/app';
import { getStorage, ref, getDownloadURL} from 'firebase/storage';
const firebaseConfig = {
apiKey:
authDomain: ...
projectId: ...
storageBucket: ...
messagingSenderId:...
appId:...
};
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);
const file = ref(storage, '/maps/122.png');
async function getURL() {
let data = await getDownloadURL(file);
console.log(data);
}
function Firebase() {
return <button onClick={() => getURL()}>Click</button>;
}
After I click on the button I wait for about few seconds and this error shows in console.
Tried different functions
Tried different arguments
Read docs and copy paste the original code
Tried to change rules for allow all
Check the retry limit value and it's default
i'm doing a user authentication system in Reactjs with firebase with google signin method, as I think my code does not have any problem, but when I click in the button the Popup shows and close immediatly and the error in my console is:
FirebaseError: Firebase: Error (auth/unauthorized-domain).
I went to firebase console > Authentication > Sign-In-Method to authorize domain, and can't see where I can put my domain
Sorry my English it's not my first language
my code, I'm using vite to create react project
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyBPbVyiVcN4K7cmMSo1QsPJQeIxZUZ7yCE",
authDomain: "social-app-bc20f.firebaseapp.com",
projectId: "social-app-bc20f",
storageBucket: "social-app-bc20f.appspot.com",
messagingSenderId: "426481165558",
appId: "1:426481165558:web:07720e6132e0d91c21b8d7"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const provider = new GoogleAuthProvider();
export const auth = getAuth();
export const signInWithGoogle = () => {
signInWithPopup(auth, provider)
.then((result) => {
// ...
console.log(result)
}).catch((error) => {
// Handle Errors here.
console.log(error)
});
}
firebase console > Authentication > Settings +to authorize domain
I've created a Firebase account and connected it with my React code :
I filled all the fields that you can see in the picture above , however when I try to login from my React screen :
When I use it in my React code :
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
projectId: "xxxxxxxxxxx-1e2be",
storageBucket: "",
messagingSenderId: "xxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const firestore = firebase.firestore();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });
export const signInWithGoogle = () => auth.signInWithPopup(provider);
export default firebase;
And run it , I get :
What might be the problem ? looks like I have all the permissions in tact.
So where did I go wrong ?
EDIT : Sign in method is enabled and still doesn't work!
I had the same issue right now.
You did right when you enabled "Google" in the "Sign-In Method" but
you probably didn't see the grey panel
where you need to input the "Project support email".
Disable, click "Save" and then Enable Again.
Afterwards you'll see the grey panel and enter your Google account.
And then...the rest is history.
Goodluck Champ!
You have to enable it in Firebase console => Authentication tab => Sign-in method
I am very new to Firebase and I have been looking up how to simply send data to Firebase from React Native. So far I have figured out that you have to import
import * as firebase from 'firebase';
and have
const firebaseConfig = {
apiKey: "AAAAAAAAAAAA3HbIO0u6yxU5MsE6FM",
authDomain: "kokeilut.firebaseapp.com",
databaseURL: "https://kokeilut.firebaseio.com",
storageBucket: "kokeilut.appspot.com",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
but the problem is that I don't know how to send data to database.
Please help me with this, my main point is to send Name and highscore of my application.
I Strongly recommend you to read Firebase JavaScript Documentation, which is much clear than my example. Please correct me if I am wrong.
The following is my example code.
This way will allow Firebase create a Unique Id for your object.
firebase.database().ref(url).push(jsonObject).
then((data) => {
dispatch({type:"FULFILLED"})
//success
}).
catch((err) => {
dispatch({type:"REJECTED"})
//error
});
This way will make you create a customerId for your object.
firebase.database().ref(url+customerId).set(jsonObject).
then((data) => {
dispatch({type:"FULFILLED"})
//success
}).
catch((err) => {
dispatch({type:"REJECTED"})
//error
});
First, install firebase: npm install firebase
Then import firebase to your project: import * as firebase from 'firebase';
Then you can write to a database, but make sure that you have created a database in firebase, and you gave permission to write and read.
firebase.database().ref('users/').set({
username: "name",
email: "email",
profile_picture: "imageUrl"
});