All Projects → the-road-to-react-with-firebase → React Firestore Authentication

the-road-to-react-with-firebase / React Firestore Authentication

🔥Boilerplate Project for Authentication with Firestore in React.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Firestore Authentication

React Firebase Authentication
🔥 Boilerplate Project for Authentication with Firebase in React.
Stars: ✭ 863 (+423.03%)
Mutual labels:  create-react-app, authentication, authorization
React Mobx Firebase Authentication
🔥Boilerplate Project for Authentication with Firebase in React and MobX
Stars: ✭ 111 (-32.73%)
Mutual labels:  create-react-app, authentication, authorization
Spring Security React Ant Design Polls App
Full Stack Polls App built using Spring Boot, Spring Security, JWT, React, and Ant Design
Stars: ✭ 1,336 (+709.7%)
Mutual labels:  authentication, authorization, react-router
React Redux Firebase Authentication
🔥Boilerplate Project for Authentication with Firebase in React and Redux
Stars: ✭ 265 (+60.61%)
Mutual labels:  create-react-app, authentication, authorization
Spotify Clone Client
A ReactJS clone application of the popular Spotify music streaming service. This application utilizes the Spotify API and the Spotify Web Playback SDK
Stars: ✭ 162 (-1.82%)
Mutual labels:  authentication, authorization, react-router
Cakephp Tinyauth
CakePHP TinyAuth plugin for an easy and fast user authentication and authorization. Single or multi role. DB or config file based.
Stars: ✭ 114 (-30.91%)
Mutual labels:  authentication, authorization
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (-30.3%)
Mutual labels:  create-react-app, react-router
Go Postgres Jwt React Starter
A go, gin, and postgres API with jwt auth, complete with a react frontend
Stars: ✭ 115 (-30.3%)
Mutual labels:  authentication, react-router
Fosite
Extensible security first OAuth 2.0 and OpenID Connect SDK for Go.
Stars: ✭ 1,738 (+953.33%)
Mutual labels:  authentication, authorization
Road Beyond React App
🌈 The Road beyond React - Thing you can use after learning plain React.js
Stars: ✭ 108 (-34.55%)
Mutual labels:  create-react-app, react-router
Graphql Directive Auth
GraphQL directive for handling auth
Stars: ✭ 120 (-27.27%)
Mutual labels:  authentication, authorization
Security.identity
.NET DevPack Identity is a set of common implementations to help you implementing Identity, Jwt, claims validation and another facilities
Stars: ✭ 165 (+0%)
Mutual labels:  authentication, authorization
Mern Boilerplate
Fullstack boilerplate with React, Redux, Express, Mongoose, Passport Local, JWT, Facebook and Google OAuth out of the box.
Stars: ✭ 112 (-32.12%)
Mutual labels:  authentication, authorization
Xxl Sso
A distributed single-sign-on framework.(分布式单点登录框架XXL-SSO)
Stars: ✭ 1,635 (+890.91%)
Mutual labels:  authentication, authorization
Spring Webmvc Pac4j
Security library for Spring Web MVC: OAuth, CAS, SAML, OpenID Connect, LDAP, JWT...
Stars: ✭ 110 (-33.33%)
Mutual labels:  authentication, authorization
Serverless Architectures Aws
The code repository for the Serverless Architectures on AWS book
Stars: ✭ 120 (-27.27%)
Mutual labels:  authentication, authorization
Fullstack Apollo React Boilerplate
💥A sophisticated Apollo in React boilerplate project.
Stars: ✭ 136 (-17.58%)
Mutual labels:  authentication, authorization
Registration Login Spring Xml Maven Jsp Mysql
Registration and Login Example with Spring MVC, Spring Security, Spring Data JPA, XML Configuration, Maven, JSP, and MySQL.
Stars: ✭ 134 (-18.79%)
Mutual labels:  authentication, authorization
Vuejs2 Authentication Tutorial
Stars: ✭ 144 (-12.73%)
Mutual labels:  authentication, authorization
Warden Github Rails
Use GitHub as authorization and more. Use organizations and teams as means of authorization by simply wrapping your rails routes in a block. Also useful to get a user's details through OAuth.
Stars: ✭ 100 (-39.39%)
Mutual labels:  authentication, authorization

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

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();
    }
  }
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].