From 874ed57849cdabcce7529997121ee4f3bc16928e Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Wed, 5 Dec 2018 16:46:59 +0800 Subject: [PATCH 01/18] add sign in methods manual --- README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index fa729e9..9e17c83 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Your minimal yet extensive authentication starter project in Gatsby.js with Fire * `git clone git@github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` * `cd react-gatsby-firebase-authentication` -* `yarn install` +* `npm install` * `gatsby develop` * visit http://localhost:8000/ * Use your own Firebase Credentials @@ -43,13 +43,17 @@ Your minimal yet extensive authentication starter project in Gatsby.js with Fire * visit https://firebase.google.com/ and create a Firebase App * copy and paste your Credentials from your Firebase App into src/firebase/firebase.js -* activate Email/Password Sign-In Method in your Firebase App +* [activate Sign-In Methods in your Firebase App](https://www.robinwieruch.de/react-firebase-social-login/) + * Email/Password + * Google + * Facebook + * Twitter ## Setup via Gatsby CLI * `gatsby new react-gatsby-firebase-authentication git@github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` * `cd react-gatsby-firebase-authentication` -* `yarn install` +* `npm install` * `gatsby develop` * visit http://localhost:8000/ * Use your own Firebase Credentials From 2d1a6241d71140c6a9a071109f57e2bc3fb47fae Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Thu, 6 Dec 2018 09:28:59 +0800 Subject: [PATCH 02/18] add license --- README.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9e17c83..11d3c99 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,23 @@ Your minimal yet extensive authentication starter project in Gatsby.js with Fire * Auth Persistence with Local Storage * Database with Users and Messages -## Setup +## 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](https://gum.co/react-with-firebase-starter-pack-developer) +* [Team of up to 8 Developers](https://gum.co/react-with-firebase-starter-pack-team) +* [Unlimited Developers of an Organization](https://gum.co/react-with-firebase-starter-pack-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](https://www.gnu.org/licenses/gpl-3.0.html), you may use this starter project under the terms of the GPLv3. + +## Installation * `git clone git@github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` * `cd react-gatsby-firebase-authentication` From 351d3780425ba5c382c990d396c1eeef5195e8bb Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Thu, 6 Dec 2018 19:36:53 +0800 Subject: [PATCH 03/18] fix travis to node 10 --- .travis.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 1968f21..1d8352c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,10 +1,10 @@ language: node_js node_js: - - stable + - '10' install: - npm install script: - - npm test \ No newline at end of file + - npm test From 4f0ba2e641fe18ea39613c135e4ccc456af2cb9e Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Sun, 9 Dec 2018 15:34:41 +0800 Subject: [PATCH 04/18] improve README.md --- README.md | 65 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 52 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 11d3c99..5285ccd 100644 --- a/README.md +++ b/README.md @@ -51,19 +51,59 @@ If you are creating an open source application under a license compatible with t * `git clone git@github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` * `cd react-gatsby-firebase-authentication` * `npm install` -* `gatsby develop` -* visit http://localhost:8000/ -* Use your own Firebase Credentials +* `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](https://www.robinwieruch.de/firebase-tutorial/). + +### 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](https://user-images.githubusercontent.com/2479967/49687774-e0a31e80-fb42-11e8-9d8a-4b4c794134e6.jpg) + +* Email/Password +* [Google](https://www.robinwieruch.de/react-firebase-social-login/) +* [Facebook](https://www.robinwieruch.de/firebase-facebook-login/) +* [Twitter](https://www.robinwieruch.de/firebase-twitter-login/) +* [Troubleshoot](https://www.robinwieruch.de/react-firebase-social-login/) + +### 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 +``` -### Use your own Firebase Credentials +**Production:** -* visit https://firebase.google.com/ and create a Firebase App -* copy and paste your Credentials from your Firebase App into src/firebase/firebase.js -* [activate Sign-In Methods in your Firebase App](https://www.robinwieruch.de/react-firebase-social-login/) - * Email/Password - * Google - * Facebook - * Twitter +``` +REACT_APP_CONFIRMATION_EMAIL_REDIRECT=https://mydomain.com +``` ## Setup via Gatsby CLI @@ -71,5 +111,4 @@ If you are creating an open source application under a license compatible with t * `cd react-gatsby-firebase-authentication` * `npm install` * `gatsby develop` -* visit http://localhost:8000/ -* Use your own Firebase Credentials +* visit http://localhost:8000 From df429aa43dfb3688b77b46f3af46d876a931f9c9 Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Wed, 12 Dec 2018 13:45:33 +0800 Subject: [PATCH 05/18] Update README.md --- README.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 5285ccd..16bdb0e 100644 --- a/README.md +++ b/README.md @@ -8,14 +8,19 @@ Your minimal yet extensive authentication starter project in Gatsby.js with Fire * [Tutorial](https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/) * [Live Version of half of the Tutorial](https://react-firebase-authentication.wieruch.com/) +## Variations + +* [Only React Version](https://github.com/the-road-to-react-with-firebase/react-firebase-authentication) +* [Redux Version](https://github.com/the-road-to-react-with-firebase/react-redux-firebase-authentication) +* [MobX Version](https://github.com/the-road-to-react-with-firebase/react-mobx-firebase-authentication) +* [Firestore Version](https://github.com/the-road-to-react-with-firebase/react-firestore-authentication) +* [Semantic UI Version](https://github.com/the-road-to-react-with-firebase/react-semantic-ui-firebase-authentication) + ## Features * uses: * only React (Gatsby.js) - * firebase 5 - * no Redux/MobX - * [Redux Version without Gatsby.js](https://github.com/the-road-to-react-with-firebase/react-redux-firebase-authentication) - * [MobX Version without Gatsby.js](https://github.com/the-road-to-react-with-firebase/react-mobx-firebase-authentication) + * firebase * features: * Sign In * Sign Up From 710796b89042ea3d015f013b903980287c3dc6a6 Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Wed, 12 Dec 2018 13:48:33 +0800 Subject: [PATCH 06/18] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 16bdb0e..fcdc776 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ Your minimal yet extensive authentication starter project in Gatsby.js with Fire ## Features * uses: - * only React (Gatsby.js) + * only React (**Gatsby.js**) * firebase * features: * Sign In From b378b8e16fa945af07682184c049f13540e68794 Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Fri, 14 Dec 2018 11:01:46 +0800 Subject: [PATCH 07/18] fix: this.listener is not a function --- src/components/Session/withAuthentication.js | 2 +- src/components/Session/withAuthorization.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Session/withAuthentication.js b/src/components/Session/withAuthentication.js index f6a1830..fcc9aea 100644 --- a/src/components/Session/withAuthentication.js +++ b/src/components/Session/withAuthentication.js @@ -48,7 +48,7 @@ const withAuthentication = Component => { } componentWillUnmount() { - this.listener(); + this.listener && this.listener(); } render() { diff --git a/src/components/Session/withAuthorization.js b/src/components/Session/withAuthorization.js index 2ee8a2d..e8280ff 100644 --- a/src/components/Session/withAuthorization.js +++ b/src/components/Session/withAuthorization.js @@ -33,7 +33,7 @@ const withAuthorization = condition => Component => { } componentWillUnmount() { - this.listener(); + this.listener && this.listener(); } render() { From 74eb0efb9ced33cbcaa672ae25c572d8c6467dc7 Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Fri, 5 Apr 2019 10:07:51 +0200 Subject: [PATCH 08/18] Update README.md --- README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/README.md b/README.md index fcdc776..d540494 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,33 @@ REACT_APP_CONFIRMATION_EMAIL_REDIRECT=http://localhost:3000 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", + }, + } +} +``` + ## Setup via Gatsby CLI * `gatsby new react-gatsby-firebase-authentication git@github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` From 8dd1244fd18d2dfd28f8ef174485c8ea11f26dbf Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Fri, 5 Apr 2019 10:31:20 +0200 Subject: [PATCH 09/18] migrate to security rules: https://github.com/the-road-to-react-with-firebase/react-firebase-authentication/pull/26 --- src/components/Firebase/firebase.js | 2 +- src/components/Messages/MessageItem.js | 40 +++++++++--------- src/components/Messages/MessageList.js | 2 + src/components/Messages/Messages.js | 24 +++++------ src/components/Navigation/index.js | 2 +- src/components/SignIn/index.js | 6 +-- src/components/SignUp/index.js | 4 +- src/pages/admin.js | 2 +- src/pages/home.js | 56 ++++---------------------- 9 files changed, 49 insertions(+), 89 deletions(-) diff --git a/src/components/Firebase/firebase.js b/src/components/Firebase/firebase.js index 872d6d9..e128552 100644 --- a/src/components/Firebase/firebase.js +++ b/src/components/Firebase/firebase.js @@ -69,7 +69,7 @@ class Firebase { // default empty roles if (!dbUser.roles) { - dbUser.roles = []; + dbUser.roles = {}; } // merge auth and db user diff --git a/src/components/Messages/MessageItem.js b/src/components/Messages/MessageItem.js index 78a9bb2..b92f954 100644 --- a/src/components/Messages/MessageItem.js +++ b/src/components/Messages/MessageItem.js @@ -28,7 +28,7 @@ class MessageItem extends Component { }; render() { - const { message, onRemoveMessage } = this.props; + const { authUser, message, onRemoveMessage } = this.props; const { editMode, editText } = this.state; return ( @@ -41,29 +41,31 @@ class MessageItem extends Component { /> ) : ( - - {message.user.username || message.user.userId} - {' '} - {message.text} {message.editedAt && (Edited)} + {message.userId} {message.text} + {message.editedAt && (Edited)} )} - {editMode ? ( + {authUser.uid === message.userId && ( - - - - ) : ( - - )} + {editMode ? ( + + + + + ) : ( + + )} - {!editMode && ( - + {!editMode && ( + + )} + )} ); diff --git a/src/components/Messages/MessageList.js b/src/components/Messages/MessageList.js index 4e0c49b..fb18585 100644 --- a/src/components/Messages/MessageList.js +++ b/src/components/Messages/MessageList.js @@ -3,6 +3,7 @@ import React from 'react'; import MessageItem from './MessageItem'; const MessageList = ({ + authUser, messages, onEditMessage, onRemoveMessage, @@ -10,6 +11,7 @@ const MessageList = ({
    {messages.map(message => ( { + const { uid, ...messageSnapshot } = message; + this.props.firebase.message(message.uid).set({ - ...message, + ...messageSnapshot, text, editedAt: this.props.firebase.serverValue.TIMESTAMP, }); @@ -100,30 +102,24 @@ class Messages extends Component { }; render() { - const { users } = this.props; const { text, messages, loading } = this.state; return ( {authUser => (
    - {!loading && - messages && ( - - )} + {!loading && messages && ( + + )} {loading &&
    Loading ...
    } {messages && ( ({ - ...message, - user: users - ? users[message.userId] - : { userId: message.userId }, - }))} + authUser={authUser} + messages={messages} onEditMessage={this.onEditMessage} onRemoveMessage={this.onRemoveMessage} /> diff --git a/src/components/Navigation/index.js b/src/components/Navigation/index.js index e63bc0f..d816ba7 100644 --- a/src/components/Navigation/index.js +++ b/src/components/Navigation/index.js @@ -29,7 +29,7 @@ const NavigationAuth = ({ authUser }) => (
  • Account
    • - {authUser.roles.includes(ROLES.ADMIN) && ( + {!!authUser.roles[ROLES.ADMIN] && (
  • Admin
    • diff --git a/src/components/SignIn/index.js b/src/components/SignIn/index.js index 213a602..df8f528 100644 --- a/src/components/SignIn/index.js +++ b/src/components/SignIn/index.js @@ -93,7 +93,7 @@ class SignInGoogleBase extends Component { return this.props.firebase.user(socialAuthUser.user.uid).set({ username: socialAuthUser.user.displayName, email: socialAuthUser.user.email, - roles: [], + roles: {}, }); }) .then(() => { @@ -139,7 +139,7 @@ class SignInFacebookBase extends Component { return this.props.firebase.user(socialAuthUser.user.uid).set({ username: socialAuthUser.additionalUserInfo.profile.name, email: socialAuthUser.additionalUserInfo.profile.email, - roles: [], + roles: {}, }); }) .then(() => { @@ -185,7 +185,7 @@ class SignInTwitterBase extends Component { return this.props.firebase.user(socialAuthUser.user.uid).set({ username: socialAuthUser.additionalUserInfo.profile.name, email: socialAuthUser.additionalUserInfo.profile.email, - roles: [], + roles: {}, }); }) .then(() => { diff --git a/src/components/SignUp/index.js b/src/components/SignUp/index.js index 928d7f4..60f0b25 100644 --- a/src/components/SignUp/index.js +++ b/src/components/SignUp/index.js @@ -33,10 +33,10 @@ class SignUpFormBase extends Component { onSubmit = event => { const { username, email, passwordOne, isAdmin } = this.state; - const roles = []; + const roles = {}; if (isAdmin) { - roles.push(ROLES.ADMIN); + roles[ROLES.ADMIN] = ROLES.ADMIN; } this.props.firebase diff --git a/src/pages/admin.js b/src/pages/admin.js index 7b5e2ca..94e177c 100644 --- a/src/pages/admin.js +++ b/src/pages/admin.js @@ -19,7 +19,7 @@ const AdminPageBase = () => ( ); const condition = authUser => - authUser && authUser.roles.includes(ROLES.ADMIN); + authUser && !!authUser.roles[ROLES.ADMIN]; const AdminPage = compose( withEmailVerification, diff --git a/src/pages/home.js b/src/pages/home.js index cf71914..7f134b9 100644 --- a/src/pages/home.js +++ b/src/pages/home.js @@ -1,4 +1,4 @@ -import React, { Component, Fragment } from 'react'; +import React from 'react'; import { compose } from 'recompose'; import Layout from '../components/layout'; @@ -6,60 +6,20 @@ import { withAuthorization, withEmailVerification, } from '../components/Session'; -import { withFirebase } from '../components/Firebase'; import Messages from '../components/Messages'; -class HomePageBase extends Component { - _initFirebase = false; +const HomePageBase = () => ( +
    +

    Home Page

    +

    The Home Page is accessible by every signed in user.

    - constructor(props) { - super(props); - - this.state = { - users: null, - }; - } - - firebaseInit = () => { - if (this.props.firebase && !this._initFirebase) { - this._initFirebase = true; - - this.props.firebase.users().on('value', snapshot => { - this.setState({ - users: snapshot.val(), - }); - }); - } - }; - - componentDidMount() { - this.firebaseInit(); - } - - componentDidUpdate() { - this.firebaseInit(); - } - - componentWillUnmount() { - this.props.firebase.users().off(); - } - - render() { - return ( - -

    Home Page

    -

    The Home Page is accessible by every signed in user.

    - - -     - ); - } -} + +
    +); const condition = authUser => !!authUser; const HomePage = compose( - withFirebase, withEmailVerification, withAuthorization(condition), )(HomePageBase); From ed740bb3fe325e2d51f7ffae020169abe2ed72fc Mon Sep 17 00:00:00 2001 From: waleedshkt Date: Sat, 11 May 2019 20:45:52 +0500 Subject: [PATCH 10/18] Adding gatsby-config.js to root dir As directed by gatsby docs, if using environment variables (env) add the above code in gatsby-config file. This lets the `dotenv` - an already installed inner dependency of gatsby - to make (env) available instantly --- gatsby-config.js | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 gatsby-config.js diff --git a/gatsby-config.js b/gatsby-config.js new file mode 100644 index 0000000..6990517 --- /dev/null +++ b/gatsby-config.js @@ -0,0 +1,3 @@ +require("dotenv").config({ + path: `.env.${process.env.NODE_ENV}`, +}) From f42f182ff16a380ee379db8328bbcfb7212aaf3b Mon Sep 17 00:00:00 2001 From: waleedshkt Date: Sat, 11 May 2019 20:50:37 +0500 Subject: [PATCH 11/18] Update package.json As been the recent issue with many users, the project fails with current dependencies. So, I'm updating the already installed dependencies to the latest versions, and adding `cire-js` to 2.6.5 (as it currecntly works well with latest gatsby release) as the project's inner node dependencies demand it --- package.json | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index e383d13..cfa8979 100644 --- a/package.json +++ b/package.json @@ -8,10 +8,11 @@ "serve": "gatsby serve" }, "dependencies": { - "firebase": "^5.6.0", - "gatsby": "^2.0.33", - "react": "^16.5.1", - "react-dom": "^16.5.1", - "recompose": "^0.30.0" + "firebase": "^6.0.2", + "gatsby": "^2.4.3", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "recompose": "^0.30.0", + "core-js": "^2.6.5" } } From 0ece78f1d0eff2188f609033ee3eb1f55d62d0ff Mon Sep 17 00:00:00 2001 From: waleedshkt Date: Sat, 11 May 2019 20:57:52 +0500 Subject: [PATCH 12/18] Changed env variables prefix According to Gatsby, for the env variables to be available in client-side (browser) include 'GATSBY' prefic in the beginning --- src/components/Firebase/firebase.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Firebase/firebase.js b/src/components/Firebase/firebase.js index e128552..c9affba 100644 --- a/src/components/Firebase/firebase.js +++ b/src/components/Firebase/firebase.js @@ -1,10 +1,10 @@ const config = { - apiKey: process.env.REACT_APP_API_KEY, - authDomain: process.env.REACT_APP_AUTH_DOMAIN, - databaseURL: process.env.REACT_APP_DATABASE_URL, - projectId: process.env.REACT_APP_PROJECT_ID, - storageBucket: process.env.REACT_APP_STORAGE_BUCKET, - messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID, + apiKey: process.env.GATSBY_API_KEY, + authDomain: process.env.GATSBY_AUTH_DOMAIN, + databaseURL: process.env.GATSBY_DATABASE_URL, + projectId: process.env.GATSBY_PROJECT_ID, + storageBucket: process.env.GATSBY_STORAGE_BUCKET, + messagingSenderId: process.env.GATSBY_MESSAGING_SENDER_ID, }; class Firebase { @@ -51,7 +51,7 @@ class Firebase { doSendEmailVerification = () => this.auth.currentUser.sendEmailVerification({ - url: process.env.REACT_APP_CONFIRMATION_EMAIL_REDIRECT, + url: process.env.GATSBY_CONFIRMATION_EMAIL_REDIRECT, }); doPasswordUpdate = password => From 931ffe55eaadd1ae1de1895053945ee9ebe46937 Mon Sep 17 00:00:00 2001 From: waleedshkt Date: Sat, 11 May 2019 21:08:52 +0500 Subject: [PATCH 13/18] Update README.md - Changed the `env` variables prefix to 'GATSBY' as recommended to allow variables to be available on client-side - Added `https` protocol when cloning project as otherwise access is denied by the repository - Corrected the port to 8000 as gatsby locally-developed project by default uses this --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index d540494..0538c5b 100644 --- a/README.md +++ b/README.md @@ -53,11 +53,11 @@ If you are creating an open source application under a license compatible with t ## Installation -* `git clone git@github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` +* `git clone https://github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` * `cd react-gatsby-firebase-authentication` * `npm install` * `npm start` -* visit http://localhost:3000 +* visit http://localhost:8000 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](https://www.robinwieruch.de/firebase-tutorial/). @@ -71,12 +71,12 @@ Get an overview of Firebase, how to create a project, what kind of features Fire 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 +GATSBY_API_KEY=AIzaSyBtxZ3phPeXcsZsRTySIXa7n33NtQ +GATSBY_AUTH_DOMAIN=react-firebase-s2233d64f8.firebaseapp.com +GATSBY_DATABASE_URL=https://react-firebase-s2233d64f8.firebaseio.com +GATSBY_PROJECT_ID=react-firebase-s2233d64f8 +GATSBY_STORAGE_BUCKET=react-firebase-s2233d64f8.appspot.com +GATSBY_MESSAGING_SENDER_ID=701928454501 ``` ### Activate Sign-In Methods @@ -101,13 +101,13 @@ The *.env* or *.env.development* and *.env.production* files could look like the **Development:** ``` -REACT_APP_CONFIRMATION_EMAIL_REDIRECT=http://localhost:3000 +GATSBY_CONFIRMATION_EMAIL_REDIRECT=http://localhost:3000 ``` **Production:** ``` -REACT_APP_CONFIRMATION_EMAIL_REDIRECT=https://mydomain.com +GATSBY_CONFIRMATION_EMAIL_REDIRECT=https://mydomain.com ``` ### Security Rules @@ -139,7 +139,7 @@ REACT_APP_CONFIRMATION_EMAIL_REDIRECT=https://mydomain.com ## Setup via Gatsby CLI -* `gatsby new react-gatsby-firebase-authentication git@github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` +* `gatsby new react-gatsby-firebase-authentication https://github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` * `cd react-gatsby-firebase-authentication` * `npm install` * `gatsby develop` From d96946d589ce6c67964e4e3cd126115431bec617 Mon Sep 17 00:00:00 2001 From: Dan Dascalescu Date: Sat, 8 Jun 2019 01:02:07 -0500 Subject: [PATCH 14/18] Clarify order of setup instructions to avoid errors --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0538c5b..1b09fed 100644 --- a/README.md +++ b/README.md @@ -53,9 +53,11 @@ If you are creating an open source application under a license compatible with t ## Installation -* `git clone https://github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` +* `git clone https://github.com/the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` * `cd react-gatsby-firebase-authentication` * `npm install` +* save the [Firebase credentials](#firebase-configuration) +* setup the [security rules](#security-rules) * `npm start` * visit http://localhost:8000 @@ -112,6 +114,8 @@ GATSBY_CONFIRMATION_EMAIL_REDIRECT=https://mydomain.com ### Security Rules +In the Firebase console, go to Database, select "Realtime Database" -> Rules, and paste the rules below: + ``` { "rules": { @@ -139,7 +143,7 @@ GATSBY_CONFIRMATION_EMAIL_REDIRECT=https://mydomain.com ## Setup via Gatsby CLI -* `gatsby new react-gatsby-firebase-authentication https://github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` +* `gatsby new react-gatsby-firebase-authentication https://github.com/the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git` * `cd react-gatsby-firebase-authentication` * `npm install` * `gatsby develop` From c8234abe7771690fb3e1c3569b8f9fb4b6332d18 Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Mon, 17 Jun 2019 08:57:06 +0200 Subject: [PATCH 15/18] Create FUNDING.yml --- .github/FUNDING.yml | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..a6b0765 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,12 @@ +# These are supported funding model platforms + +github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +patreon: rwieruch +open_collective: # Replace with a single Open Collective username +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username +custom: # Replace with a single custom sponsorship URL From abf31423d14e6c7026c4dc3543d4f3f966b84b7e Mon Sep 17 00:00:00 2001 From: Belciug Ovidiu-Mihai Date: Thu, 1 Aug 2019 00:16:55 +0300 Subject: [PATCH 16/18] PasswordForget - Use destructured variable in render --- src/components/PasswordForget/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PasswordForget/index.js b/src/components/PasswordForget/index.js index e85c8b2..7512c3e 100644 --- a/src/components/PasswordForget/index.js +++ b/src/components/PasswordForget/index.js @@ -44,7 +44,7 @@ class PasswordForgetForm extends Component {
    Date: Thu, 21 May 2020 12:46:24 +0200 Subject: [PATCH 17/18] Update README.md --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 1b09fed..2ea9f3b 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,6 @@ Your minimal yet extensive authentication starter project in Gatsby.js with Fire * Powered by [Gatsby](https://github.com/gatsbyjs/gatsby) * [Tutorial](https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/) -* [Live Version of half of the Tutorial](https://react-firebase-authentication.wieruch.com/) ## Variations From 436b7b41e1913535f884c22597451c820848163e Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Fri, 12 Jun 2020 10:39:15 +0200 Subject: [PATCH 18/18] Update FUNDING.yml --- .github/FUNDING.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index a6b0765..5282678 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,7 +1,7 @@ # These are supported funding model platforms -github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] -patreon: rwieruch +github: rwieruch +patreon: # rwieruch open_collective: # Replace with a single Open Collective username ko_fi: # Replace with a single Ko-fi username tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel