how can i login with facebook account? - javascript

i wanted to create a login with facebook button, so i created this code:
import { getAuth, signOut,
onAuthStateChanged, FacebookAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-auth.js";
const firebaseConfig = {
apiKey: "AIzaSyC3GLIN5TBmCDoTfy0dEOgOdvVvqNw-ric",
authDomain: "auth-project-38aaa.firebaseapp.com",
projectId: "auth-project-38aaa",
storageBucket: "auth-project-38aaa.appspot.com",
messagingSenderId: "431888894254",
appId: "1:431888894254:web:71bb9b250fbb8a21edd2bf",
measurementId: "G-6BBPCJ3814"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
// login with facebook
const facebookProvider = new FacebookAuthProvider();
const signInWithFacebook = document.querySelector('#facebook-icon');
signInWithFacebook.addEventListener('click', (e) => {
e.preventDefault();
signInWithPopup(auth, facebookProvider).then((result) => {
const user = result.user;
const credential = FacebookAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
const email = error.email;
const credential = FacebookAuthProvider.credentialFromError(error);
});
});
when i try to login with facebook it gives me this error message:
Facebook has detected that firebase sign in isn't using a secure connection to transfer information.
can you help to solve this problem, please?

For these tests you must run them with an SSL connection, if you are testing on localhost you are probably not using SSL.

Related

Cannot register user info to firebase database when creating a new user

I am working on a signup form and I can create a new user using firebase auth, but the part where I register informations like the name, email... in a database is not working.
On the firebase side, I created a firestore database and a realtime database, and I don't see anything on them.
I tried to use the firebase documentation but it's still not working so I am probably missing something.
Thanks for your help!
PS: I hidded my firebase config here but it's filled on my code
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js'
import { getAuth, createUserWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js'
import { getFirestore, doc, getDoc, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js";
import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js";
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
const app = initializeApp(firebaseConfig);
//const db = getFirestore();
const auth = getAuth();
const db = getDatabase();
submitData.addEventListener('click', (e) => {
e.preventDefault()
var name = document.getElementById('full_name').value
var email = document.getElementById('email').value;
var password = document.getElementById('psw').value;
// do verification
// Move on with Auth
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user
alert("user created")
//add to firebase database
function writeUserData( name, email) {
set(ref(db, 'users/' + userId), {
username: name,
email: email,
});
}
})

Why am I unable to sign in anonymously as an authenticated user in firebase?

I am trying to login as an authenticated user anonymously. Here is my code:
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js';
import { getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";
const firebaseConfig = {
apiKey: "key_here",
authDomain: "project.firebaseapp.com",
projectId: "project",
storageBucket: "project.appspot.com",
messagingSenderId: "id_here",
databaseURL: "https://project-default-rtdb.firebaseio.com",
appId: "app_id_here"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth();
document.getElementById("login").addEventListener("click",function(event){
event.preventDefault();
onAuthStateChanged(auth, (user) => {
if(user){
//user can successfully login
}
else{
console.log("Something went wrong");
}
}, (error) => console.error(error)) //Nothing prints here
}
I was able to successfully log in 'til yesterday. But since this morning I keep getting the error Something went wrong in my console.
I didn't change anything in the code, nor in my firebase credentials. Where am I going wrong?
It was so silly of me to not read the documentation page carefully, I had forgotten to execute the signInAnonymously() method before checking for the user's data, the complete code is as follows:
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js';
import { getAuth, onAuthStateChanged, signInAnonymously } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";
const firebaseConfig = {
apiKey: "key_here",
authDomain: "project.firebaseapp.com",
projectId: "project",
storageBucket: "project.appspot.com",
messagingSenderId: "id_here",
databaseURL: "https://project-default-rtdb.firebaseio.com",
appId: "app_id_here"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth();
document.getElementById("login").addEventListener("click",function(event){
event.preventDefault();
signInAnonymously(auth)
.then(() => {
onAuthStateChanged(auth, (user) => {
if(user){
//user can successfully login
}
else{
console.log("Something went wrong");
}
});
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorCode+": "+errorMessage);
});
});

Error when trying to register a user using Firebase Auth service on the client side. Firebase: Error (auth/network-request-failed)

I am trying to do authentication and registration by email and password using the internal authentication system within Firebase and Vue3 on the client. I get the following error when I trying to register a user:
Firebase: Error (auth/network-request-failed).
POST
http://localhost:9099/identitytoolkit.googleapis.com/v1/accounts:signUp?key=AndHereIsTheKeyFromFB
net::ERR_CONNECTION_REFUSED
Component with registration form:
<template>
<p><input type="text" placeholder="Email" v-model="email" /></p>
<p><input type="password" placeholder="Password" v-model="password" /></p>
<p><button #click="register">Submit</button></p>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {getAuth, createUserWithEmailAndPassword} from "firebase/auth";
const auth = getAuth();
const email = ref('')
const password = ref('')
const router = useRouter()
const register = () => {
createUserWithEmailAndPassword(auth, email.value, password.value)
.then((data) => {
console.log('Successfully logged in!');
})
.catch(error => {
console.log(error.code)
alert(error.message);
});
}
</script>
main.js with firebase configurations:
const firebaseConfig = {
apiKey: "key",
authDomain: "authDomain",
databaseURL: "dbUrl",
projectId: "Id",
storageBucket: "sB",
messagingSenderId: "msgSenderId",
appId: "Id"
};
initializeApp(firebaseConfig)
if (location.hostname === "localhost") {
connectAuthEmulator(getAuth(), "http://localhost:9099");
}
I also tried to change the hostname from localhost to 127.0.0.1, but this did not affect the result in any way. My experience with Firebrace and authentication through it is small, so I will be glad of any help in this situation
Fixed the issue with some changes to main.js configuration file contains the following lines
from this:
if (location.hostname === "localhost") {
connectAuthEmulator(getAuth(), "http://localhost:9099");
}
to this:
if (location.hostname === "localhost:8080") {
connectAuthEmulator(getAuth(), "http://127.0.0.1:9099");
}
I don't know why, but the changing of port and localhost to IP like indication worked for me :)

GoogleAuthProvider gives error "this.ta is not a function" in web application

I am trying to set authentication with Google in my web application. I did this type of thing a couple of times on Android apps, but now when i load my application it gives error "this.ta is not a function". Maybe its something silly but i can't detect the problem. Here is what i have:
api.js
import { db, storage, auth, google_provider } from './firebase'
sign_in() {
auth.signInWithPopup(google_provider).then(result => {
var token = result.credential.accessToken;
var user = result.user;
}).catch(error => {
var errorCode = error.code;
var errorMessage = error.message;
var email = error.email;
var credential = error.credential;
})
}
firebase.js
import * as firebase from 'firebase';
const app = firebase.initializeApp({
apiKey: "my-key",
authDomain: "domain",
databaseURL: "https://domain-url",
projectId: "name",
storageBucket: "bucket",
messagingSenderId: "id"
})
export const db = app.firestore()
export const storage = app.storage().ref()
export const auth = app.auth()
export const google_provider = firebase.auth.GoogleAuthProvider()
This is the error GoogleAuthProvider Error
Maybe i am wrong in the way i initialize the GoogleAuthProvider or the way i call the API. If somebody knows something i will appreciate anything that could tell me.
Regards.
firebase.auth.GoogleAuthProvideris a constructor.
To me it looks like you forgot to initialize it with new.
export const google_provider = new firebase.auth.GoogleAuthProvider()

Could not link another auth method - firebase auth

I am signing in user using mobile number and then i want him to enter email and password later. (after logging in)
I am trying to link email,password Auth method to current PhoneAuth method.
But it's giving me an error:
Cannot read property 'link' of undefined
Here is code:
import { firebaseAuth,fire, messaging } from '../../config/constants';
var credential = fire.auth.EmailAuthProvider.credential(email, password);
fire.auth.currentUser.link(credential).then(function(user) {
console.log("Account linking success", user);
}, function(error) {
console.log("Account linking error", error);
});
And in config/constants
import firebase from 'firebase'
require("firebase/firestore");
const config = {
apiKey: "AIzxxxxxxxxxxxxxxxxxxKXI",
authDomain: "payxxxxxxxxxxxxja1.firebaseapp.com",
databaseURL: "https://payxxxxxxxxxxja1.firebaseio.com",
projectId: "payxxxxxxxxxxxxja1",
storageBucket: "payxxxxxxxxxxxja1.appspot.com",
messagingSenderId: "281xxxxx5xxxxx6"
}
firebase.initializeApp(config)
export const fire = firebase
export const ref = firebase.database().ref()
export const firebaseAuth = firebase.auth
export const messaging = firebase.messaging();
I think something is wrong with fire.auth or fire.auth()
Thanks
link has been removed in favor of linkWithCredential starting with Firebase JS version 4.0.0: https://firebase.google.com/support/release-notes/js#4.0.0
Also make sure the current user is ready:
firebase.auth().onAuthStateChange(user => {
if (user) {
// currentUser is not null.
} else {
// currentUser is null.
}
});

Categories

Resources