fireship-io / react-firebase-chat

React Firebase Super Chat

A simple fullstack chat demo with React and Firebase.

Watch on full React Firebase Chat Tutorial on YouTube.

Live demo

react-firebase-chat's Issues

Firebase Reactjs

Auto ban after 7 messages

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.

Access Error: 404 -- Not Found

document cant locate

REPLACEMENT ALERT

use this

I get Parsing error : unexpected token

Do check this link for the detailed code block

https://stackoverflow.com/questions/67345714/how-to-fix-unexpected-token-parsing-error

after Sign Up in App error

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)

can not send up to 25 message

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

2# center the P tag in the main page

FirebaseError

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

How can I detect when a new message is received?

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.

No databaseURL in the SDK snippet

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'.

The signInWithPopup doesn't work

Hey fireship-io, The signInWithPopup() function doesn't work, please help, thanks!

Show # of users connected

It would be nice to know the number of users currently connected in the chat.

localhost refused to connect

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

unable to access "firebase/app" when firebase module is updated

Could you assist
this is my first time trying firebase
Im unable to access, "firebase/app";
whenever I create import from firebase/app

initializeApp error

initializeApp isn't work

unable to go to the chat screen after login

Unable to deploy

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?

Injection - Site Broken

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..

unable to send the messages

Can't send message

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.

The SignOut component does not work???

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.

Can you provide your database rules? i want to implement ban system

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
}
}
}

Autoscroll doesn't work.

Autoscroll does work after sending messages but after refreshing it doesn't work.

How to host Superchat on Nginx?

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

Insufficient Permissions

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.

I can't send the messages

Check Updated Version of the app

I think fireship.io doesn't like ### community work, they're not accepting any pull requests.

Different sourcecodes vs. what is deployed - not jumping to last message

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?

i am having issue to deploy on firebase

when i am going to deploy on firebase gettting 404 error and asking google.cloud price api

Only showing 25 messeges

My app Only showing 25 messeges.then,when i type messege its not showing in ui.but its goes to database

not signing in showing network error

please tell what to do