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

🔥 Boilerplate Project for Authentication with Firebase in React.

react-firebase-authentication

• Tutorial

Variations

• Redux Version
• MobX Version
• Gatsby Version
• Firestore Version
• Semantic UI Version

Features

• uses:
  • only React (create-react-app)
  • firebase
  • react-router
• features:
  • Sign In
  • Sign Up
  • Sign Out
  • Password Forget
  • Password Change
  • Verification Email
  • Protected Routes with Authorization
  • Roles-based Authorization
  • Social Logins with Google, Facebook and Twitter
  • Linking of Social Logins on Account dashboard
  • Auth Persistence with Local Storage
  • Database with Users and Messages

License

Commercial license

If you want to use this starter project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase an commercial license for different team sizes:

• 1 Developer
• Team of up to 8 Developers
• Unlimited Developers of an Organization

It grants you also access to the other starter projects in this GitHub organization.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this starter project under the terms of the GPLv3.

Installation

• git clone [email protected]:the-road-to-react-with-firebase/react-firebase-authentication.git
• cd react-firebase-authentication
• npm install
• npm start
• visit http://localhost:3000

Get an overview of Firebase, how to create a project, what kind of features Firebase offers, and how to navigate through the Firebase project dashboard in this visual tutorial for Firebase.

Firebase Configuration

• copy/paste your configuration from your Firebase project's dashboard into one of these files
  • src/components/Firebase/firebase.js file
  • .env file
  • .env.development and .env.production files

The .env or .env.development and .env.production files could look like the following then:

REACT_APP_API_KEY=AIzaSyBtxZ3phPeXcsZsRTySIXa7n33NtQ
REACT_APP_AUTH_DOMAIN=react-firebase-s2233d64f8.firebaseapp.com
REACT_APP_DATABASE_URL=https://react-firebase-s2233d64f8.firebaseio.com
REACT_APP_PROJECT_ID=react-firebase-s2233d64f8
REACT_APP_STORAGE_BUCKET=react-firebase-s2233d64f8.appspot.com
REACT_APP_MESSAGING_SENDER_ID=701928454501

Activate Sign-In Methods

• Email/Password
• Google
• Facebook
• Twitter
• Troubleshoot

Activate Verification E-Mail

• add a redirect URL for redirecting a user after an email verification into one of these files
  • src/components/Firebase/firebase.js file
  • .env file
  • .env.development and .env.production files

The .env or .env.development and .env.production files could look like the following then (excl. the Firebase configuration).

Development:

REACT_APP_CONFIRMATION_EMAIL_REDIRECT=http://localhost:3000

Production:

REACT_APP_CONFIRMATION_EMAIL_REDIRECT=https://mydomain.com

Security Rules

{
  "rules": {
    ".read": false,
    ".write": false,
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid || root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])",
        ".write": "$uid === auth.uid || root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])"
      },
      ".read": "root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])",
      ".write": "root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])"
    },
    "messages": {
      ".indexOn": ["createdAt"],
      "$uid": {
        ".write": "data.exists() ? data.child('userId').val() === auth.uid : newData.child('userId').val() === auth.uid"
      },
      ".read": "auth != null",
      ".write": "auth != null",
    },
  }
}

react-firebase-authentication's Issues

Webpage not working

I got white page only when i run in dev mode

Component labelled SignUpForm instead of SignUpFormBase

Hi Robert,

The book is brilliant! Keep up the amazing work! A quick question/issue, on Page 33 of the book in the src/components/SignUp/index.js the component is labelled SignUpForm though I believe this should actually be SignUpFormBase (from the alterations made higher up the page).

Happy to be wrong!

Sign up warning

Hi. Thank you this project, it is awesome. After the registration I get this warning:

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the SignUpForm component.

How can I fix this problem? Thank you.

Using prop function in child component

I have a component which is exported like this: export default withAuthorization(authCondition)(Child); and I pass a function to the child component from the parent via prop
but if I console log this.props, I don't see the passed prop function.

How can I use a prop function inside the child component?

Issue with Context "unknown" in current release

Amazing tutorial/code here! Just wanted to post that I'm seeing a discrepancy between what's showing on the demo at https://react-firebase-authentication.wieruch.com/home vs what happens when I fork and run your code with my Firebase credentials.

Here's the react dev tools on yours: https://d.pr/i/e5o10I (note the proper context and components showing in the side (authentication pushes to state in authUser properly etc)

Then, in a fresh install of what's in the repo here (with my working Firebase credentials) I see this: https://d.pr/Pm8VmY (note the Unknown tag in the context etc and upon logging in the state doesn't have authUser).

I'm still learning, so I'm not sure what is going on yet, but I'll do the usual googling and stack overflowing to see if I can figure out what's going on. If it's something in the code I'll try to do a PR with a fix, and if it's something I did / my config I'll come back and let everyone know in case they can use the info. Stay tuned! And thanks again for the work you're doing here. Great tutorials/books.

A quick question and a thank you!

First of all, thank you for this excellent tutorial. I have a full-cycle auth app up and running and it was fun and easy to do!

Second, I am using the hooks api for most of the meat of my app (still using withFirebase as a HOC)... in the step where we save the authUser state to App you added a componentWillUnmount to reset the listener. I got lost at this step... here is my implementation:

const App = (props: Props) => {
  const [authUser, setAuthUser] = useState(null)

  useEffect(() => {
    props.firebase.auth.onAuthStateChanged((authUser: any) => {
      authUser ? setAuthUser(authUser) : setAuthUser(null)
    })
  })

  return (
    <ChakraProvider theme={theme}>
      <Router>
        <Navigation authUser={authUser} />

        <hr />
        ...
      </Router>
    </ChakraProvider>
  )
}

Is there potential for memory leakage here?

Thanks again!

Justin

Authorization permissions

Hello,

I am building an application based on your boilerplate. Currently, I am facing an issue and I would appreciate if you could give me some insight on how could I approach it.

I need to know how could I pass down to condition in withAuthorization.js the user that I get from Firestore and not the auth user so I can authorize it based on other fields that are not available in the auth user.

I made these changes to the component so I can have a general UserContext instead of an AuthUserContext. Basically, after getting the authUser, I look for the Firestore user data and then I merge the objects. Doing so, I can't rely anymore on onAuthStateChanged hook in withAuthorization file. The problem is that my users are redirected to the sign in page until the UserContext is filled (with auth user id and Firestore user data) and then they get redirected to the home component instead of the page they requested. I would like to avoid that trip and make the users land to the route they type in.

const withAuthorization = (
  authCondition = permissions.isLoggedIn,
  getRedirectRoute = () => routes.SIGN_IN
) => Component => props => (
  <UserContext.Consumer>
    {user =>
      user && authCondition(user) ? (
        <Component {...props} user={user} />
      ) : (
        <Redirect to={getRedirectRoute(user)} />
      )
    }
  </UserContext.Consumer>
);

Any recommendation would be appreciated, thank you.

Admin Dashboard: <UserItem> does not show up. Switch issues ?

as the title said.
when i click to "Details" in /admin, Userlist.
it did direct me into /admin/:id but the component of that route does not show up.

Security rules format

The format of the security rules seems to be in the format of Firebase Realtime Database, not in the "match" syntax of Cloud Firestore.

Using a class rather than an inline function for the component property in Route

Hi @rwieruch and thanks for your hard work on this.

In your example, shouldn't the Route components' value be a class rather than an inline function?

According to react-router docs, in that way a new component is created every time rather than being updated.

Here's a proposed change:

<Route exact path={routes.LANDING} component={LandingPage} />

<Route exact path={routes.SIGN_UP} component={SignUpPage} />

<Route exact path={routes.SIGN_IN} component={SignInPage} />

<Route exact path={routes.PASSWORD_FORGET} component={PasswordForgetPage} />

<Route exact path={routes.HOME} component={HomePage} />

<Route exact path={routes.ACCOUNT} component={AccountPage} />

Pushing to firebase storage and database

How do i push to firebase storage and database, i created it following the style you used but still it throws an error.

error of: A continue URL must be provided in the request.

Got message of

A continue URL must be provided in the request.

after done signup.

Commercial License links not working

Hi Robin,

I'm a student who's currently working for a startup in developing a charity orientated web app and I was wondering if it was okay for me to incorporate your code in the project I'm working on at the moment.

I'm asking since the links you have for commercial licenses are not working for this repository(page not found error).

I would also like to thank you on the resources that you have published, it has helped better understand React and Firebase in a productive manner.

Can you implement it using hooks api?

I was trying to understand but most of the new developers like me are not familiar with the HOC. So its a request if you can implement it using the new hooks API and functional components.

Authorization(1): UsersList not loading

Hi Robin,

Thanks for this and all of your tutorials and articles.

I've completed the Authorization(1) section and I'm getting PERMISSION DENIED errors now when I try to sign a user up.

Here is the warning/error in the console:

[2019-01-30T03:08:20.837Z] @firebase/database: FIREBASE WARNING: set at /users/3TmKy1wayITeJ1QSkHiAVrHj4BC3 failed: permission_denied

Because of this, there are no users in the users array so cannot view them on the Admin page. Any idea why I'm getting denied and how to fix?

Thanks!

Localstorage is not updated after SignUp

I removed the email verification. My submit function is like :

onSubmit = event => {
const { username, email, passwordOne, isAdmin } = this.state;
const roles = {};

if (isAdmin) {
  roles[ROLES.ADMIN] = ROLES.ADMIN;
}

this.props.firebase
  .doCreateUserWithEmailAndPassword(email, passwordOne)
  .then(authUser => {
    // Retrieve data from Firestore
    const appConfig = await this.firestore
     .doc('config/app')
      .get();   

    // Create a user in your Firebase realtime database
    return this.props.firebase.user(authUser.user.uid).set({
      username,
      email,
      roles,
      appConfig
    });
  })
  .then(() => {
    this.setState({ ...INITIAL_STATE });
    this.props.history.push(ROUTES.HOME);
  })
  .catch(error => {
    if (error.code === ERROR_CODE_ACCOUNT_EXISTS) {
      error.message = ERROR_MSG_ACCOUNT_EXISTS;
    }

    this.setState({ error });
  });

event.preventDefault();

};

I have a console.log of authUser value in localStorage when HOME is mounted, it doesn't contains my appConfig value. I had to refresh the page to have the proper value.

CSS not working

CSS of the app is not working as shown. please fix and help

SignUp page doesn't redirect

event.preventDefault() doesn't appear to be working on the SignUp page, which causes the page to refresh and the user is never redirected.

Security issues: Persisting user info to localStorage

Hi Robin, big fan of your work on React!

I've been trying to tackle the problem you described in React Firebase Auth Persistence with Local Storage: the delay between when the UI loads and when Firebase figures out that the user is signed-in is unpleasant user experience indeed.

In this version of /src/components/Session/withAuthentication.js my issues are twofold:

1. ) A malicious client can set their own localStorage authUser JSON-style string to any other user, and this way access a user's pages and abuse said access to the detriment of the user.
2. The data stored (authUser object) contains personal information about the user contained in that user's Firebase user, including: full name, email address, etc. (depending on the permissions the OAuth app requires). having such information available to any user of that machine, unencrypted, is risky.

Would like to hear your thoughts on these points 🤔
Felix

An in-range update of firebase is breaking the build 🚨

The dependency firebase was updated from 5.5.6 to 5.5.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

firebase is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of firebase is breaking the build 🚨

The dependency firebase was updated from 5.5.5 to 5.5.6.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

firebase is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Add multiple observers to this.listener to React component class

Your tutorial really helped me out getting firebase to work nicely in my React app so thanks a lot! 👍

I want to add multiple listeners to a React component. With Firebase authentication, I want to trigger these actions

• when the user first signs in or out: onauthstatechanged
• everytime the idToken changes: onidtokenchanged

Form the tutorial:

export class AuthContextProvider extends React.Component {

  componentDidMount() {
    if (!this.state.firebase) {

      /** set listener whether user is signed in */
      this.listener = this.props.firebase.auth().onAuthStateChanged(
        authUser => {
          if (authUser) {
            this.setState({ authUser });
          } else {
            this.setState({ authUser: null });
          }
        },
      );

      /**
       * ########
       * Question: Can I just add another function to this.listener?
       * Will both listeners trigger the appropriate times?
       * ########
       */
      this.listener = this.props.firebase.auth().onIdTokenChanged(
        authUser => {
          if (authUser) {
            // do something
          }
        },
      );
    }
  }
}

It seemed to work in my implementation. Both events are triggered. But it seems wrong to me since I am reassigning this.listener when using .onIdTokenChanged().

How can I add both onAuthStateChanged AND onIdTokenChanged to this.listener correctly?

My question is also about this.listener. What exactly does it do? Where can I find documentation about it? Typing '"this.listener" react' shows many results about window.addEventListener. Is this an equivalent and achieves the same goal?

I assume this in this.listener refers to my class which extends React.Component. The React documentation does not mention anything about the listener property. Please correct me here if this refers to something else.

Unhandled Rejection (TypeError): Cannot read property 'roles' of null

this block of code in firebase.js is throwing an error:

//if (!dbUser.roles) {...}

error
Unhandled Rejection (TypeError): Cannot read property 'roles' of null

These dependencies were not found

I tried to run the project but it doesn't work. I looked for the dependencies but I am not sure if those are the right ones.

``

• core-js/features/array/find in ./node_modules/@firebase/polyfill/dist/index.esm.js
• core-js/features/array/find-index in ./node_modules/@firebase/polyfill/dist/index.esm.js
• core-js/features/object/assign in ./node_modules/@firebase/polyfill/dist/index.esm.js
• core-js/features/string/repeat in ./node_modules/@firebase/polyfill/dist/index.esm.js
• core-js/features/string/starts-with in ./node_modules/@firebase/polyfill/dist/index.esm.js
• core-js/features/symbol in ./node_modules/@firebase/polyfill/dist/index.esm.js
• core-js/features/symbol/iterator in ./node_modules/@firebase/polyfill/dist/index.esm.js

To install them, you can run: npm install --save core-js/features/array/find core-js/features/array/find-index core-js/features/object/assign core-js/features/string/repeat core-js/features/string/starts-with core-js/features/symbol core-js/features/symbol/iterator
error ✖ ｢wdm｣:
ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find' in '/Users/mikenieva/Web/prueba-gatsby/react-gatsby-firebase-authentication/node_modules/@firebase/polyfill/dist'
@ ./node_modules/@firebase/polyfill/dist/index.esm.js 3:0-37
@ ./node_modules/firebase/app/dist/index.cjs.js
@ ./src/components/layout.js
@ ./src/pages/account.js
@ ./.cache/sync-requires.js
@ ./.cache/app.js
@ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find-index' in '/Users/mikenieva/Web/prueba-gatsby/react-gatsby-firebase-authentication/node_modules/@firebase/polyfill/dist'
@ ./node_modules/@firebase/polyfill/dist/index.esm.js 4:0-43
@ ./node_modules/firebase/app/dist/index.cjs.js
@ ./src/components/layout.js
@ ./src/pages/account.js
@ ./.cache/sync-requires.js
@ ./.cache/app.js
@ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/object/assign' in '/Users/mikenieva/Web/prueba-gatsby/react-gatsby-firebase-authentication/node_modules/@firebase/polyfill/dist'
@ ./node_modules/@firebase/polyfill/dist/index.esm.js 5:0-40
@ ./node_modules/firebase/app/dist/index.cjs.js
@ ./src/components/layout.js
@ ./src/pages/account.js
@ ./.cache/sync-requires.js
@ ./.cache/app.js
@ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/string/repeat' in '/Users/mikenieva/Web/prueba-gatsby/react-gatsby-firebase-authentication/node_modules/@firebase/polyfill/dist'
@ ./node_modules/@firebase/polyfill/dist/index.esm.js 7:0-40
@ ./node_modules/firebase/app/dist/index.cjs.js
@ ./src/components/layout.js
@ ./src/pages/account.js
@ ./.cache/sync-requires.js
@ ./.cache/app.js
@ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/string/starts-with' in '/Users/mikenieva/Web/prueba-gatsby/react-gatsby-firebase-authentication/node_modules/@firebase/polyfill/dist'
@ ./node_modules/@firebase/polyfill/dist/index.esm.js 6:0-45
@ ./node_modules/firebase/app/dist/index.cjs.js
@ ./src/components/layout.js
@ ./src/pages/account.js
@ ./.cache/sync-requires.js
@ ./.cache/app.js
@ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/symbol' in '/Users/mikenieva/Web/prueba-gatsby/react-gatsby-firebase-authentication/node_modules/@firebase/polyfill/dist'
@ ./node_modules/@firebase/polyfill/dist/index.esm.js 8:0-33
@ ./node_modules/firebase/app/dist/index.cjs.js
@ ./src/components/layout.js
@ ./src/pages/account.js
@ ./.cache/sync-requires.js
@ ./.cache/app.js
@ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/symbol/iterator' in '/Users/mikenieva/Web/prueba-gatsby/react-gatsby-firebase-authentication/node_modules/@firebase/polyfill/dist'
@ ./node_modules/@firebase/polyfill/dist/index.esm.js 9:0-42
@ ./node_modules/firebase/app/dist/index.cjs.js
@ ./src/components/layout.js
@ ./src/pages/account.js
@ ./.cache/sync-requires.js
@ ./.cache/app.js
@ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
``

Functions are not valid as a React child

Once I implemented the chapter: Email Verification I get the warning:

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

This warning is generated for the following router components:

react-firebase-authentication/src/components/App/index.js

Lines 31 to 33 in 316a175

	<Route exact path={ROUTES.HOME} component={HomePage} />
	<Route exact path={ROUTES.ACCOUNT} component={AccountPage} />
	<Route exact path={ROUTES.ADMIN} component={AdminPage} />

Their common denominator is that they all compose over the HOC: withEmailVerification. When I comment out:

react-firebase-authentication/src/components/Home/index.js

Line 16 in 316a175

withEmailVerification,

then the warning disappears.

I tried googling for answers and found this: https://stackoverflow.com/a/48458532/4400976 but I do not see how our HOC is being misused as a regular component as the answer is alluding to. It is the exact same pattern we are using for withAuthorization and withAuthentication; e.g. a declaration of HOC that embeds the argument Component by means of a closure and that we use for our compositions accordingly. But the warning would not come about then.

Firebase Auth Error

Within the App class this.props.firebase.auth.onAuthStateChanged needs to be updated to this.props.firebase.auth().onAuthStateChanged to avoid errors.

Removing onAuthStateChanged listeners

Hi,
Great tutorial and example code! Definitely most comprehensive from all the react/firebase stuff I've seen.
Just a small comment, wouldn't be cleaner to remove the onAuthStateChanged listeners in the two HOCs in a componentWillUnmount method?

How to access authUser.uid from firebase.js

Hello,

Apologies if this is badly worded or an entirely stupid question. I have followed this fantastic tutorial and it's working perfectly. I would now like to allow logged-in users to post content. This is all fine, but I need to name each user's collection something like .collection(${currentUser.uid}). What's the best way to access this value in my component, please?
Many thanks for any help.
Matt

Instructions

Hi

Please can you give complete instructions.

I only have FB credentials in the development object but node is thinking I am in production - all I did was edited firebase.js and placed devConfig data and ran npm start it says:

Failed to compile
./src/firebase/firebase.js
  Line 4:   'YOUR_API_KEY' is not defined                             no-undef
  Line 5:   'YOUR_AUTH_DOMAIN' is not defined                         no-undef
  Line 6:   'YOUR_DATABASE_URL' is not defined                        no-undef
  Line 7:   'YOUR_PROJECT_ID' is not defined                          no-undef
  Line 9:   'YOUR_MESSAGING_SENDER_ID' is not defined                 no-undef
  Line 13:  'AIzaSyCJiwEvXKaIfMHaFbuKuv2ouk7zzkL23E4' is not defined  no-undef
  Line 14:  'YOUR_AUTH_DOMAIN' is not defined                         no-undef
  Line 15:  'YOUR_DATABASE_URL' is not defined                        no-undef
  Line 16:  'YOUR_PROJECT_ID' is not defined                          no-undef
  Line 18:  'YOUR_MESSAGING_SENDER_ID' is not defined                 no-undef

Search for the keywords to learn more about each error.

Thanks so much for this script

Navigating with Params

Hey Awesome Project! Love the implementation so far just have one question as to how to navigate to other pages programatically with parameters/props?

Email Verification Issue

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)

Failed at the [email protected] install script

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-pre-gyp install --fallback-to-build --library=static_library
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Security issues: Missing Firebase db security rules

I'm concerned that there is no mention (or I don't see it) to security rules on firebase db. I know this is a kind of boilerplate or introductory tutorial, but if the focus is in React + Firebase it should be a must!

It would be so helpful to add some rules, i.e:

• Messages should only be edited by the owner.
• Only user with role admin should have the permissions to see users' data (or own logged user data), on boilerplate are only restricted by route's condition.
• Some kind of validation rule, maybe a message length (just for introducing us).

I'm introducing myself to Firebase, reading the security documentation, trying to manage those rules but, despite the simplicity, it's a little confusing without real example. Maybe anyone could shed light on this matter.

Sorry about my English (I try to improve it).
Thanks a lot @rwieruch for your job!

How can i hide config values?

One question, are the firebase config values ​​(ie the apiKey, appId, etc ..) meant to be exposed or should we hide them in some way? Thank you!

"roles" type mismatch in google signin component

the roles type should be set to a javascript object and not an array