A simple fullstack chat demo with React and Firebase.
Watch on full React Firebase Chat Tutorial on YouTube.
A simple fullstack chat demo with React and Firebase.
Watch on full React Firebase Chat Tutorial on YouTube.
Autoscroll does work after sending messages but after refreshing it doesn't work.
I know this project was probably a POC and is not maintained, but there are some security issues for anyone clicking the link from YouTube..
I wanted to test the security of Firebase and how there is essentially no server side validation of documents.
I cloned the repo, copied the firebase config from the production site, and modified sendMessage to:
Where text is no longer a string, but an object. This throws an error in react, bringing the site down for everybody right now and you cannot see/send any messages.
You can also set your profile picture to anything you'd like, set extra params on the object (Fill storage, etc.) and im sure many other malicious things..
My app Only showing 25 messeges.then,when i type messege its not showing in ui.but its goes to database
Run in VScode returns this error every time (locahost:8080):
This site canβt be reachedlocalhost refused to connect.
Try:
Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_REFUSED
Hey, I have a question: I'm currently working on my own improved version of this (except the base code is the same). How can I detect when a new message is sent by someone else so I can autoscroll to it? I currently have done this by assigning each message with an onLoad property which will fire a function with a debounce. The issue with this is that the function gets called like 25 times any time anything is updated (including when you type something). The debounce fixes it being called 25 times, but not any of the other issues with this approach. Any suggestions? Also, I'm new with react and all this so I don't understand hooks much. I tried using a vanilla JS script (which I'm much more familiar with) to attach a listener to the chat element when a DOM Node was inserted, but it didn't work for whatever reason.
i cant figure out rules properly im new to firebase.
here is cureent rules but its not working i will manually add document in banned collection, for now so i set up read write false for banned collection.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /messages/{document} {
allow read: if request.auth != null
allow write: if request.auth != null && !root.child('banned').child(request.auth.uid).exists()
}
match /banned/{document} {
allow read: if false
allow write: if false
}
}
}
please tell what to do
I feel as though I was on the right track to solving this with the main issue here being the actual dash and asterisk before and after the sign-out component which I don't see the point of. The sign-out button is unclickable can someone help me out on this I'd really appreciate it.
Hey there,
I love Fireship, Firebase and Superchat, also thank you for your great effort,
I'm a bit new to ReactJS and wanted to ask if you could please help explain to me how I can host Superchat using Nginx.
Thanks a lot
Idk why, but I got banned. I joked a bit and then I coudn't send any messages. My last message was "Likely, yeah". I recorded it and I pasted the recording in this zip.
Video.zip
I don't care if I can't chat anymore, but I think it's odd that you randomly get banned, even when you didn't swear.
when i am going to deploy on firebase gettting 404 error and asking google.cloud price api
I tried to run it and it said I had to pay to run with the blaze plan. Is there any way to run it locally?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum voluptates corporis laboriosam id, molestiae repudiandae
corrupti veritatis inventore, fuga repellendus, quae quo necessitatibus? Tenetur aut ratione consequuntur illo, ea aperiam? > Lorem ipsum dolor sit amet consectetur adipisicing elit. Error saepe facilis obcaecati neque nihil soluta omnis eos ex, et
deleniti. Temporibus ducimus cumque quos sapiente officia! Dolorum mollitia distinctio doloremque.
Tried sending this message to figure out something. The console gives this error
Uncaught (in promise) FirebaseError: Missing or insufficient permissions.
Could you assist
this is my first time trying firebase
Im unable to access, "firebase/app";
whenever I create import from firebase/app
Getting this error :
Uncaught FirebaseError: Type does not match the expected instance. Did you pass a reference from a different Firestore SDK?
The above error occurred in the ChatRoom component
But if I remove this line
const [messages] = useCollectionData(q);
everything works fine
Any help would be appreciated
initializeApp isn't work
after Sign Up in App error
Failed to load resource: net::ERR_CONNECTION_RESET
react-dom.production.min.js:209 Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Ba%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Io (react-dom.production.min.js:139:47)
at react-dom.production.min.js:149:278
at Ca (react-dom.production.min.js:173:103)
at mu (react-dom.production.min.js:265:156)
at cs (react-dom.production.min.js:246:265)
at us (react-dom.production.min.js:246:194)
at Zu (react-dom.production.min.js:239:172)
at react-dom.production.min.js:123:115
at e.unstable_runWithPriority (scheduler.production.min.js:19:467)
at Bi (react-dom.production.min.js:122:325)
Seems that the actually deployed version on https://fireship-demos.web.app/ is different than version here in GIT.
One issue is limiting 25 as described in #16
Another issue is jumping on last message. It works only when submitting the form, but not when receiving data from server. Probably it is neccessary to somehow cover the hook useCollectionData. Anyone knows how to help?
after send 25 message the new messages stored on the database but the problem is there is no new divs created or anything happen in the chat box and there is no errors
It would be nice to know the number of users currently connected in the chat.
I was watching the video and working along. But my firebase app does not have the 'databaseURL' in the SDK snippet but it has an extra 'measurementID'.
use this
Do check this link for the detailed code block
https://stackoverflow.com/questions/67345714/how-to-fix-unexpected-token-parsing-error
I think fireship.io doesn't like ### community work, they're not accepting any pull requests.
Hey fireship-io, The signInWithPopup() function doesn't work, please help, thanks!
document cant locate
Unhandled Rejection (FirebaseError): Function addDoc() called with invalid data. Unsupported field value: undefined (found in field uid in document messages/fD7NB3iC5mSIaqZhvzSY)
I already did:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
for fire store:
import React, { useRef, useState } from 'react';
import './App.css';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
import 'firebase/analytics';
import { useAuthState } from 'react-firebase-hooks/auth';
import { useCollectionData } from 'react-firebase-hooks/firestore';
const auth = firebase.auth();
const firestore = firebase.firestore();
function App() {
const [user] = useAuthState(auth);
return (
<div className="App">
<header>
<h1>π¬π¬π¬</h1>
<SignOut />
</header>
<section>
{user ? <ChatRoom /> : <SignIn/>}
</section>
</div>
);
}
function SignIn() {
const signInWithGoogle = () => {
const provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider);
}
return (
<button onClick={signInWithGoogle}>Sign in with Google</button>
)
}
function SignOut() {
return auth.currentUser && (
<button onClick={() => auth.signOut()}>Sign Out</button>
)
}
function ChatRoom() {
const dummy= useRef();
const messagesRef = firestore.collection('messages');
const query = messagesRef.orderBy('createdAt').limit(25);
const [messages] = useCollectionData(query, {idField: 'id'});
const [formValue, setFormValue] = useState('');
const sendMessage = async(e) =>{
e.preventDefault();
const {uid,photoURL}= auth.updateCurrentUser;
await messagesRef.add({
text: formValue,
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
uid,
photoURL
});
setFormValue('');
dummy.current.scrollIntoView({ behavior: 'smooth' });
}
return (
<>
<main>
{messages&& messages.map(msg => <ChatMessage key={msg.id} />)}
<span ref={dummy}></span>
</main>
<form onSubmit={sendMessage}>
<input value={formValue} onChange={(e) => setFormValue(e.target.value)} placeholder="say something nice" />
<button type="submit" disabled={!formValue}>π―</button>
</form>
</>
)
}
function ChatMessage(props) {
const {text, uid, photoURL}= props.message;
const messageClass= uid === auth.currentUser.uid ? 'sent' : 'received';
return (<>
<div classname={`messages ${messageClass}`}>
<img src={photoURL || 'https://api.adorable.io/avatars/23/[email protected]'} alt="" />
<p>{text}</p>
</div>
</>
)
}
export default App;
I read App.js in source code over and I can't seem to find the field that is returning empty.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.