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
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 am working on a react project that I am I want to use both Auth and real-time database from firebase. I have managed to set auth but database import is giving me a hard time. I want to use the (database().child().push() ) method to push data to the database but I can't call the database().ref() method in my firebase Config. Anyone?
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth'
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyD8aGnZYjhCTopgdNhuykWvmkJSHKj_h7E",
authDomain: "bonnie-d17be.firebaseapp.com",
databaseURL: "https://bonnie-d17be-default-rtdb.firebaseio.com",
projectId: "bonnie-d17be",
storageBucket: "bonnie-d17be.appspot.com",
messagingSenderId: "397471611615",
appId: "1:397471611615:web:3f6a743f4770ff8718c76a"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const authentication = getAuth(app);
export default app;
Firebase's documentation has examples of both name-spaced (V8) and new functional (V9) syntax. To push a new node, try the following code:
// Initialize database similar to auth
import { getDatabase } from "firebase/database";
export const database = getDatabase();
import { push, child, ref } from "firebase/database";
const dbRef = ref(database)
push(child(dbRef, 'path/')).then(() => {
console.log("Data added")
})
I am attempting to create new users with my react app using firebase, Unfortunately I seem to receive the same error message over and over.
I have read the threads and appeared to follow the instructions but nothing appears to be working.
I authorized firebase to accept account creating with email and password and I used npm install --save firebase
My firebase.js file
import firebase from "firebase";
import "firebase/auth";
const firebaseConfig = {
apiKey: "AIzaSyCHPSB1S58MWb5E5gVXccN1p8DXgFNNuVw",
authDomain: "pinterest-clone-843c8.firebaseapp.com",
projectId: "pinterest-clone-843c8",
storageBucket: "pinterest-clone-843c8.appspot.com",
messagingSenderId: "1013112040906",
appId: "1:1013112040906:web:bd97504bf14e75434d3333",
measurementId: "G-W8VETWB8RF"
};
firebase.initializeApp(firebaseConfig)
const auth = firebase.auth()
export {auth}
My header.js file
import {useState} from "react"
import auth from "firebase"
const Header = ({setimageArray}) =>{
auth.createUserWithEmailAndPassword("john#website.com",
"123abbbbc")
.then((userCredential) => {
var user = userCredential.user;
console.log(user)
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
});
I can't seem to get rid of "TypeError: firebase__WEBPACK_IMPORTED_MODULE_1__.default.createUserWithEmailAndPassword is not a function"
Thanks for any help!
I think you are not importing it correctly from your firebase.js file. Try to change the import in your header.js to this:
import { useState } from "react"
import { auth } from "./firebase" // I asume they are on the same level. If not add more ../
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!
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