react-firebase-authentication icon indicating copy to clipboard operation
react-firebase-authentication copied to clipboard

Email Verification Issue

Open GunnerJnr opened this issue 5 years ago • 1 comments

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)

GunnerJnr avatar Nov 08 '19 13:11 GunnerJnr

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

...

kewarrie avatar Jun 30 '20 16:06 kewarrie