Code Monkey home page Code Monkey logo

react-redux-firebase-authentication's Introduction

react-redux-firebase-authentication

Build Status Slack Greenkeeper badge

Variations

Features

  • uses:
    • only React (create-react-app)
    • firebase
    • react-router
    • redux
  • 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:

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

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

firebase-enable-google-social-login_640

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-redux-firebase-authentication's People

Contributors

rwieruch avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-redux-firebase-authentication's Issues

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

The dependency firebase was updated from 5.5.8 to 5.5.9.

🚨 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 🌴

Protect API endpoins

Hello, first of all, thanks for the amazing tutorial. It's really simple and easy to follow!

I have a question, actually is not about this project itself, but a project using this and maybe you can show me a way.

I'm current working on a project that uses this firebase auth and firebase cloud functions as API. At frontend, the authorization flow is fine, because the content are protected with protected routes. But the API is open, as I can make any request with postman (rest api) ou graphiql (ghraphql api), for example. But how can I make authenticated requests to API? In common API + frontend, we can for example, store the auth token after login and send it on every request at Authentication header. But I didn't understand yet this authentication flow using firebase.

Thanks in advance

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 🌴

Registering new user Issue

When i register with a random username and password, it registers the user immediately, but i get an error..

i've begun refactoring the entire project, moving folders around, pulling pieces out of files and moving them to different places. i've also made a version of this projecct where i ejected and added .less support and put semantic-ui-react with it as a test.. i'm going to be using about half the methods you've layed out and mix them with some other stuff from the last boilerplate i played with and cleaned up.. i cleaned it up and made it a bit shinier, but it's gone as far as it can go without a full teardown and rebuild with newer babel and webpack and it was missing a good system for local persisting auth and storage of user profiles and roles.. so i'm stealing that from you.. so it's important i get it right...

where is this error coming from (this is in a brand spanking new clone of the redux version)

i literally cloned, ran npm install, ran npm start, opened the browser, hit sign up, entered that data, hit submiit, got that error.

capture

verify that the package.json has a valid "main" entry

$ npm start

[email protected] start
react-scripts start

node:internal/modules/cjs/loader:371
throw err;
^

Error: Cannot find module 'C:\Data\projects\react-redux-firebase-authentication\node_modules\lodash\lodash.js'. Please verify that the package.json has a valid "main" entry
at tryPackage (node:internal/modules/cjs/loader:363:19)
at Module._findPath (node:internal/modules/cjs/loader:576:18)
at Module._resolveFilename (node:internal/modules/cjs/loader:941:27)
at Module._load (node:internal/modules/cjs/loader:803:27)
at Module.require (node:internal/modules/cjs/loader:1021:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object. (C:\Data\projects\react-redux-firebase-authentication\node_modules\http-proxy-middleware\lib\index.js:1:9)
at Module._compile (node:internal/modules/cjs/loader:1119:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
at Module.load (node:internal/modules/cjs/loader:997:32) {
code: 'MODULE_NOT_FOUND',
path: 'C:\Data\projects\react-redux-firebase-authentication\node_modules\lodash\package.json',
requestPath: 'lodash'
}

Node.js v18.9.1

onAuthStateChanged

First of all, very good sample, But why do you register to onAuthStateChanged on every component that needs permission(withAuthorization), Shouldn't that be handled differently since you already listen to it in the withAuthentication component

Issue with 'A continue URL must be provided in the request'

Hello, I downloaded the project, connected it to a firebase project, and ran it locally. On the signup page, users are being registered normally, but it fails to redirect to Home after the signup, even though this part of the code is supposed to do it (I guess):

//inside the onSubmit function in SignUp component: 

 this.props.firebase
      .doCreateUserWithEmailAndPassword(email, passwordOne)
      .then(authUser => {
        // Create a user in your Firebase realtime database
        return this.props.firebase.user(authUser.user.uid).set({
          username,
          email,
          roles,
        });
      })
      .then(() => {
        console.log("email verification sent  ---2")

        return this.props.firebase.doSendEmailVerification();
      })
      .then(() => {
        console.log("setting state --2")

        this.setState({ ...INITIAL_STATE });
        this.props.history.push(ROUTES.HOME);          //this is supposed to work, but it is not
      })
      .catch(error => {
        if (error.code === ERROR_CODE_ACCOUNT_EXISTS) {
          error.message = ERROR_MSG_ACCOUNT_EXISTS;
        }

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

I haven't changed anything about the project (except adding firebase), and still, I am getting the 'A continue URL must be provided in the request' message. Am I supposed to add it somewhere else? Thanks for any help, I am still a beginner in the whole authentication thing.

Capture-thing

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 🌴

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.