the-road-to-react-with-firebase / react-firebase-authentication

🔥 Boilerplate Project for Authentication with Firebase in React.
https://www.robinwieruch.de
1.01k stars 296 forks source link

Email Verification Issue #33

Open GunnerJnr opened 4 years ago

GunnerJnr commented 4 years ago

Hi all, I have been following the book and as far as I can see I have done everything correctly..

I am experiencing this error when clicking the button to resend the verification email (see below image) I have only tried localhost:3000 as I have no published version currently to test yet.

here is also a gif file showing it happen in real time (i exaggerated waiting times between actions to allow time to read the screen)

I have just the one .env file for my config to which I have set:

THIS REACT_APP_GOLF_BUDDIES_CONFIRMATION_EMAIL_REDIRECT=https://golf-buddies.firebaseapp.com

AND

REACT_APP_GOLF_BUDDIES_DEV_CONFIRMATION_EMAIL_REDIRECT=http://localhost:3000

also in firebase.js I have set the url like so to use localhost..

doSendEmailVerification = () => { this.auth.currentUser.sendEmailVerification({ url: process.env.REACT_APP_GOLF_BUDDIES_DEV_CONFIRMATION_EMAIL_REDIRECT, }); }

I am recieving the emails to verify my account, and if I verify my email address, I can refresh the page and be allowed to enter the site. So the bug seems to definitely only reside in pressing the button to resend the verification email, however, even with the bug appearing, I do also recieve the follow up email, so the bug must persist in the app code alone. Maybe I am missing something..

Any help on this to solve the issue would be great.

The link to my commited code in the development branch can be accessed here

Kind Regards David Gunner (@GunnerJnr)

kewarrie commented 4 years ago

Hi, not sure if you ever figured this out but I think this is a function binding problem. On the withEmailVerification.js file, try the following:

...

const withEmailVerification = Component => {
    class WithEmailVerification extends React.Component {
        constructor(props) {
            super(props);

            this.state = { isSent: false };
            this.onSendEmailVerification = this.onSendEmailVerification.bind(this); // add this line
        }
        ...
    }
    return withFirebase(WithEmailVerification);
};

...