React Native firebase firstore add not working - reactjs

i'm trying to create an app with firebase firestore and firebase authentication. when i'm adding a document to users collection with add it's not working. but authentication is working. firestore rules are allowed read and write.
firebase configuration
import { initializeApp } from 'firebase/app'
import {
initializeAuth,
getReactNativePersistence
} from 'firebase/auth/react-native';
import AsyncStorage from '#react-native-async-storage/async-storage';
import { apiKeyUrl, apiIdUrl } from './env'
// configuration
const apiKey = apiKeyUrl.apiKey
const apiId = apiIdUrl.apiId
const app = initializeApp(firebaseConfig)
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage)
});
export { auth }
*/
import firebase from "firebase/compat/app"
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import { apiKeyUrl, apiIdUrl } from './env'
const apiKey = apiKeyUrl.apiKey
const apiId = apiIdUrl.apiId
const firebaseConfig = {
apiKey: apiKey,
authDomain: ".",
projectId: ".",
storageBucket: ".",
messagingSenderId: ".",
appId: apiId,
measurementId: "."
};
// Initialize Firebase and Firestore
let app
if (firebase.apps.length === 0) {
app = firebase.initializeApp(firebaseConfig);
} else {
app = firebase.app();
}
const db = app.firestore(app)
const auth = app.auth()
export { db, auth }
and
try {
await auth.createUserWithEmailAndPassword(email, password)
.then(_ => {
db.collection('users').add({
userEmail : "aaa",
userId : "asdasd",
userName : "asdasd"
})
})
}catch (err) {
console.log("err : " + err)
}
catch not throwing anything. firebase version is ^9.6.11

Try this it should work
try {
await auth.createUserWithEmailAndPassword(email, password)
.then((user) => {
db.collection('users')
.doc(user.uid)
.set({
userEmail : "aaa",
userId : "asdasd",
userName : "asdasd"
})
})
}catch (err) {
console.log("err : " + err)
}

Related

react firebase config .env file doesn't work

i have a question about configuration of firebase with a react app. I put all firebase config info in .env file at the top directory as environmental variables. When I tried to use them as process.env.REACT_APP_smth, they all didn't work. Once I replaced the variables to real, raw config info, my app worked. But For sure, it's too dangerous so I don't wanna do it.
Also, the .env file was darker in vs code like mentioning it's not valid or smth.
Anyone knows how to tackle with this issue??
Thanks for your time and effort here in advance.
.env
I replaced REACT_APP_FIREBASE_API_KEY with 123456789.
REACT_APP_FIREBASE_API_KEY = "123456789"
REACT_APP_FIREBASE_AUTH_DOMAIN = "kinnikuhub.firebaseapp.com"
REACT_APP_FIREBASE_DATABASE_URL = "https://kinnikuHub.firebaseio.com"
REACT_APP_FIREBASE_PROJECT_ID = "kinnikuhub"
REACT_APP_FIREBASE_STORAGE_BUCKET = "kinnikuhub.appspot.com"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "131675559"
REACT_APP_FIREBASE_APP_ID = "1:131675559:web:3ca3bbad263b6be90ff282"
firebase.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// import { getAnalytics } from "firebase/analytics";
import { addDoc, getDocs, getFirestore } from "firebase/firestore"
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { collection } from "firebase/firestore";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
export const db = getFirestore();
export const auth = getAuth(app);
const provider = new GoogleAuthProvider();
export const signInWithGoogle = () => {
signInWithPopup(auth, provider)
.then((res) => {
console.log(res);
// todo: Why create users table?? To let users have personal info, number of answers and quizzes cretaed, biography, sns links, etc
// todo: 1st, check if res.user exists
const userCollectionRef = collection(db, 'users');
let userExistance = false;
console.log(`currentUser.uid => ${res.user.uid}`)
console.log(userExistance)
const checkUserExists = async () => {
const querySnapshot = await getDocs(userCollectionRef);
querySnapshot.forEach( (doc) => {
// doc.data() is never undefined for query doc snapshots
// console.log(doc.id, " => ", doc.data());
// console.log(`currentUser.uid => ${res.user.uid}`)
if (doc.data().uid === res.user.uid) {
userExistance = true;
// console.log(userExistance)
return 0;
}
});
console.log(userExistance)
// todo: 2nd, add this user to users collection if it doesn't exists
if (userExistance === false) {
console.log(`userExistance is false, meaning this user hasn't been registerd so I am going add the user into users collection!!! ${res.user.displayName}, ${JSON.stringify(res.user)}`)
const addUser = async () => {
const payload = {
username: res.user.displayName,
uid: res.user.uid,
email: res.user.email,
photoURL: res.user.photoURL,
createdAt: new Date(),
bio: "biography",
};
await addDoc(userCollectionRef, payload);
}
addUser();
} else {
console.log('This user has been already registered!! So glad he/she keeps using this app!!')
}
}
checkUserExists();
}).catch((err) => {
console.log(err);
})
}
// export const AuthState = () => {
// const [userInfo, setUserInfo] = useState({})
// onAuthStateChanged(auth, (user) => {
// if (user) {
// const username = user.displayName;
// const uid = user.uid;
// const email = user.email;
// const photoURL = user.photoURL
// // const emailVerified = user.emailVerified
// setUserInfo({username, uid, email, photoURL});
// console.log(`username => ${username}`)
// console.log(`uid => ${uid}`)
// console.log(`email => ${email}`)
// console.log(`photoURL => ${photoURL}`)
// // console.log(`emailVerified => ${emailVerified}`)
// return userInfo;
// } else {
// console.log("no user signed in")
// }
// })
// }
// sendEmailVerification(auth.currentUser)
// .then(() => {
// console.log('email verification sent!')
// })
##.gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*
Background:
Yesterday, I initialized my pc to install Monterey in my macbook air and files in the pc were all gone. Then, I git-cloned the repo of this app.
You have everything correct from what I see except the file naming itself. I too struggled to try to get this to work until I made this simple change:
Try renaming your 'firebase.js' file to 'firebase.config.js', this will read your process.env variables as actual variables.
The variable values in .env should not be enclosed in the quotation marks. Remove the quotation marks.
I also had the same issue. I solved the issue by only replacing the projectID with the actual variable.
ex:-
const firebaseConfig = {
apiKey: process.env.REACT_APP_APIKEY,
authDomain: process.env.REACT_APP_AUTHDOMAIN,
projectId: "personal-portfolio-f1e9f",
storageBucket: process.env.REACT_APP_STORAGEBUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
appId: process.env.APPID,
measurementId: process.env.MEASUREMENTID
};

Next-Auth with firebase Authentication

just wanna have my custom credential provider which authenticate the entered username and password with Firebase Authentication on sign in page
pages/api/auth/[...nextauth].ts
import NextAuth from "next-auth"
import { getDatabase } from "firebase/database"
import { DB } from "../../../constants/firebase"
import { FirebaseAdapter } from "#next-auth/firebase-adapter"
import * as firestoreFunctions from "firebase/firestore"
import CredentialsProvider from "next-auth/providers/credentials"
export default NextAuth({
session: {
strategy: "database",
},
providers: [
CredentialsProvider({
name: "credentials",
credentials: {
username: {
label: "Username",
type: "text",
placeholder: "somebody#gmail.com",
},
password: { label: "Password", type: "password" },
},
async authorize(credentials, req) {
const database = getDatabase()
console.log(database)
const user = {
id: 1,
usename: "j",
password: "123456789",
}
if (
credentials?.username === user.usename &&
credentials.password === "123456789"
) {
return user
}
return null
},
}),
],
adapter: FirebaseAdapter({
db: DB,
...firestoreFunctions,
}),
// pages: {
// signIn: "/auth/signin",
// signOut: "/auth/signout",
// error: "/auth/error", // Error code passed in query string as ?error=
// verifyRequest: "/auth/verify-request", // (used for check email message)
// newUser: "/auth/new-user", // New users will be directed here on first sign in (leave the property out if not of interest)
// },
callbacks: {
async jwt({ token, user }) {
if (user) {
token.email = user.email
}
return token
},
async session({ session, token, user }) {
if (token) {
session.user!.email = token.email
}
return session
},
redirect({ url, baseUrl }) {
if (url.startsWith(baseUrl)) return url
else if (url.startsWith("/"))
return new URL(url, baseUrl).toString()
return baseUrl
},
},
})
firebase.ts
import { initializeApp, getApp, getApps } from "firebase/app"
import { getAnalytics } from "firebase/analytics"
import { getFirestore } from "#firebase/firestore"
import { getStorage } from "#firebase/storage"
import getFirebaseObject from "./firebaseConfig"
const app = !getApps.length ? initializeApp(getFirebaseObject()) : getApp()
const DB = getFirestore(app)
const storages = getStorage()
const analytics = getAnalytics(app)
export { app, DB, analytics, storages }
as you see
const user = {
id: 1,
usename: "j",
password: "123456789",
}
in fact except of these static data wanna search and get right user info from the Firebase
I know there are a some other way of doing this but I like working with next-auth for last change wanna make sure there's a spot of light in this was ;)
i found this public repository where the author does something similar to what you want to achieve, which is create a custom token with your database credentials.
May be this repository can help you. It has a few errors, but it gave me a general idea about what to do, as I had a similar case.
try {
if (user !== null) {
await customTokenSignIn(user.id, user.email);
(await getUser(user.id)) ??
(await createUser(toReqUser(user, account)));
const data = await getUser(user.id);
setResUser(user, data as ResUser);
return true;
}
return false;
} catch (e) {
console.error(e);
return false;
}
const customTokenSignIn = async (id: string, email: string) => {
const hash = toHash(id);
const customToken = await adminAuth.createCustomToken(hash);
await auth.signInWithCustomToken(customToken).then((res) => {
res.user?.updateEmail(email);
});
await adminAuth.setCustomUserClaims(hash, { sid: id });
await createUserToken({ id: id, firebaseUid: hash });
};

React Firebase "FirebaseError: Failed to get document because the client is offline."

the data loading good, but when I keep the page for half hour without any actions and then trying to load data without refreshing page - I'm getting this error. I've found similar issue here and added firebase.firestore().enablePersistence(). It didn't help. The other weird observation, even when the data loading successfully I'm often observe in network this error
My firebase config:
import firebase from "firebase";
const config = {
apiKey: "AIzaSyC**********1vY38Q",
authDomain: "****.firebaseapp.com",
databaseURL: "https://********",
projectId: "myproject",
storageBucket: "****.appspot.com",
messagingSenderId: "209382989",
appId: "1:1**********ceda27",
measurementId: "G*****B96",
};
firebase.initializeApp(config);
firebase.firestore().enablePersistence();
export const db = firebase.firestore();
export default firebase;
My request:
import firebase, { db } from "./firebase.config";
const getData = async (db, collection, docId) => {
const data = await db.collection(collection).doc(docId.toString()).get();
return { data: data.data()?.history.map((con) => ({ ...con, profileId: docId, names: {} })) || [], docId };
};
export const getCollectionData = async (collection, docIdArray) => {
try {
await firebase.auth().signInAnonymously();
return new Promise((resolve, reject) => {
console.log("in promise");
firebase.auth().onAuthStateChanged(async (user) => {
if (user) {
try {
const data = await Promise.all((docIdArray.map((docId) => getData(db, collection, docId))));
resolve(data);
} catch (error) {
reject(error);
}
} else {
console.log("user is signed out");
// User is signed out
// ...
}
});
});
} catch (error) {
console.log.apply(error);
}
};
after page reloading it works fine. 403 error sometimes dissappeared sometimes not. Does anybody faced something similar?

Firebase messaging is not supported in your browser how to solve this?

I am using firebase messaging for web push notification with react. But browser show this message
Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser)
This is code :
const initializedFirebaseApp = firebase.initializeApp({
apiKey: "XXXXXX",
authDomain: "XXXXXXX",
databaseURL: "XXXXXXXXX",
projectId: "XXXXXX",
storageBucket: "XXXX",
messagingSenderId: "XXXXXX",
appId: "XXXXXX"
});
if (firebase.messaging.isSupported()) {
let messaging = initializedFirebaseApp.messaging();
}
firebase.messaging.isSupported() is always returning the false. Is there any way I should proceed?
Version for react : 16.8.2 and firebase version : 6.0.2
FCM supports only in localhost and the https enabled sites only. if you want FCM to support you need to either work on localhost or deploy somewhere (you can use firebase).
If you are using proxy using nginx like local.somehost.com cloud messaging doesn't support. To solve this you need to make your local.somehost.com as HTTPS you can install openssl and certificate and key in your nginx.
I think this solves your problem.
In addition to the above explanation you can check if the browser supports messaging by doing:
const messaging = firebase.messaging.isSupported() ? firebase.messaging() : null
isSupported() in version 9
return Promise so you should wait for resolving
const messaging = (async () => {
try {
const isSupportedBrowser = await isSupported();
if (isSupportedBrowser) {
return getMessaging(config);
}
console.log('Firebase not supported this browser');
return null;
} catch (err) {
console.log(err);
return null;
}
})();
If you are using version 9 you should pass messaging to (onMessageListener resolver and getToken )
onMessageListener
export const onMessageListener = async () =>
new Promise((resolve) =>
(async () => {
const messagingResolve = await messaging;
onMessage(messagingResolve, (payload) => {
// console.log('On message: ', messaging, payload);
resolve(payload);
});
})()
);
getToken
export const requestForToken = async (dispatch) => {
try {
const messagingResolve = await messaging;
const currentToken = await getToken(messagingResolve, {
vapidKey: *your FCM APP SERVER KEY*,
});
if (currentToken) {
*your code*
}
} catch (err) {
console.log('An error occurred while retrieving token. ', err);
}
};
I used dynamic imports for solving this issue so that the file is not even evaluated before the feature is detected. I am using firebase SDK 8.2.0.
This is how my useEffect function looks like on the top level of my app.
import { isSupported } from "firebase/messaging";
useEffect(() => {
(async () => {
const hasFirebaseMessagingSupport = await isSupported();
if (hasFirebaseMessagingSupport) {
const { requestForToken } = await import("./api/cloud-notification/firebase");
await requestForToken();
}
})();
}, []);
This is how my firebase connection file looks like ("./api/cloud-notification/firebase"):
import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";
const FIREBASE_VAPID_KEY = "your-firebase-public-vapid-key";
const firebaseConfig = {
apiKey: 'api-key',
authDomain: 'project-id.firebaseapp.com',
projectId: 'project-id',
storageBucket: 'project-id.appspot.com',
messagingSenderId: 'sender-id',
appId: 'app-id',
measurementId: 'G-measurement-id',
};
initializeApp(firebaseConfig);
const messaging = getMessaging();
const getFirebaseToken = async () => {
try {
const currentToken = await getToken(messaging, { vapidKey: FIREBASE_VAPID_KEY });
if (!currentToken) {
console.log("No registration token available. Request permission to generate one.");
}
} catch (error) {
console.log("An error occurred while retrieving token. ", error);
}
};
export const requestForToken = async () => {
try {
const permission = await Notification.requestPermission();
if (permission === "granted") {
await getFirebaseToken();
}
} catch (error) {
console.log("An error occurred while getting user permission. ", error);
}
};

How to use facebook Login in react native application

i want to use facebook login in my react native app.. i used firebase on web (reactJs ).. now i use same method for react native app but its not working...
i want fbSignin button which allow me to use user profile pic and name etc..
here is my code..
import React, { Component } from "react"
import { Container, Item, Button, Text } from "native-base"
import * as firebase from "firebase"
import { FBLogin, FBLoginManager } from "react-native-facebook-login"
// Initialize Firebase
var config = {
apiKey: "AIzaSyAK7dr25d-qnsHCdvkeoVPWs7Q0",
authDomain: "quiz-appasdn-ba8c1.firebaseapp.com",
databaseURL: "httpsasdasdasdasd-ba8c1.firebaseio.com",
projectId: "quiz-asdaasdasdc1",
storageBucket: "pplicationasdasd-asddappspot.com",
messagingSenderId: "23764257465237"
};
firebase.initializeApp(config);
var provider = new firebase.auth.FacebookAuthProvider();
class App extends Component {
fbLogin() {
firebase.auth().signInWithPopup(provider).then(function (result) {
var token = result.credential.accessToken;
var user = result.user;
}).catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
var email = error.email;
var credential = error.credential;
});
}
render() {
return (
<Button onPress={this.fbLogin.bind(this)}>
<Text>faacebook Login</Text>
</Button>
);
}
};
export default App
thanks in advance..
firebase.auth().signInWithPopup(provider) doesn't work for react-native you have to use firebase.auth().signInAndRetrieveDataWithCredential(credential) along with the react-native-fbsdk to sign in with facebook..
here is the snippet
<LoginButton
onLoginFinished={
(error, result) => {
if (error) {
alert("login has error: " + result.error);
} else if (result.isCancelled) {
alert("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(
(data) => {
const provider = firebase.auth.FacebookAuthProvider;
const credential = provider.credential(data.accessToken.toString());
firebase.auth().signInAndRetrieveDataWithCredential(credential)
.then(function(userCredential) {
console.log(JSON.stringify(userCredential));
});
}
)
}
}
}
onLogoutFinished={() => alert("logout.")}/>
Resources :
Facebook React Native SDK
Firebase signInAndRetrieveDataWithCredential
i just know lib react native to use login facebook https://developers.facebook.com/docs/react-native/login mybe this can help you :)

Resources