Need help with react-firestore-authentication?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

the-road-to-react-with-firebase
176 Stars 61 Forks 32 Commits 8 Opened issues

Description

🔥Boilerplate Project for Authentication with Firestore in React.

Services available

!
?

Need anything else?

Contributors list

react-firestore-authentication

Build Status Slack Greenkeeper badge

Variations

Features

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

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.

Contributors

Installation

  • git clone [email protected]:the-road-to-react-with-firebase/react-firestore-authentication.git
  • cd react-firestore-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

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

service cloud.firestore {
  match /databases/{database}/documents {

// Custom functions
function signedIn() {
    return request.auth != null;
}

function isAdmin() {
    return signedIn() &&
        'ADMIN'in get(/databases/$(database)/documents/users/$(request.auth.uid)).data.roles.values();
}

function isOwner() {
    return signedIn() && request.auth.uid == resource.data.userId;
}

function isSelf() {
        return signedIn() && request.auth.uid == resource.id;
}

// Rules
match /users/{userId} {
    allow list: if isAdmin();
       allow get, update, delete: if isSelf() || isAdmin();
       allow create: if signedIn();
}

match /messages/{messageId} {
    allow read: if signedIn();
    allow create: if signedIn() && request.resource.data.userId == request.auth.uid;
    allow update, delete: if signedIn() && isOwner();
}

} }

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.