The Home Page is accessible by every signed in user.
11 | 12 |The Admin Page is accessible by every signed in admin user.
16 | 17 |37 | E-Mail confirmation sent: Check your E-Mails (Spam 38 | folder included) for a confirmation E-Mail. 39 | Refresh this page once you have confirmed your E-Mail. 40 |
41 | ) : ( 42 |43 | Verify your E-Mail: Check your E-Mails (Spam folder 44 | included) for a confirmation E-Mail or send 45 | another confirmation E-Mail. 46 |
47 | )} 48 | 49 | 56 |{error.message}
67 |There are no messages ...
133 |{error.message}
118 |182 | Don't have an account? Sign Up 183 |
184 | ); 185 | 186 | const SignUpForm = withRouter(withFirebase(SignUpFormBase)); 187 | 188 | export default SignUpPage; 189 | 190 | export { SignUpForm, SignUpLink }; 191 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-semantic-ui-firebase-authentication 2 | 3 | [](https://travis-ci.org/the-road-to-react-with-firebase/react-semantic-ui-firebase-authentication) [](https://slack-the-road-to-learn-react.wieruch.com/) [](https://greenkeeper.io/) 4 | 5 | * [Tutorial](https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/) 6 | 7 | Related: 8 | 9 | * [Semantic UI with React Tutorial](https://www.robinwieruch.de/react-semantic-ui-tutorial/) 10 | 11 | ## Variations 12 | 13 | * [Only React Version](https://github.com/the-road-to-react-with-firebase/react-firebase-authentication) 14 | * [Redux Version](https://github.com/the-road-to-react-with-firebase/react-redux-firebase-authentication) 15 | * [MobX Version](https://github.com/the-road-to-react-with-firebase/react-mobx-firebase-authentication) 16 | * [Gatsby Version](https://github.com/the-road-to-react-with-firebase/react-gatsby-firebase-authentication) 17 | * [Firestore Version](https://github.com/the-road-to-react-with-firebase/react-firestore-authentication) 18 | 19 | ## Features 20 | 21 | * uses: 22 | * only React (create-react-app) 23 | * firebase 24 | * react-router 25 | * **semantic UI** 26 | * features: 27 | * Sign In 28 | * Sign Up 29 | * Sign Out 30 | * Password Forget 31 | * Password Change 32 | * Verification Email 33 | * Protected Routes with Authorization 34 | * Roles-based Authorization 35 | * Social Logins with Google, Facebook and Twitter 36 | * Linking of Social Logins on Account dashboard 37 | * Auth Persistence with Local Storage 38 | * Database with Users and Messages 39 | 40 | ## License 41 | 42 | ### Commercial license 43 | 44 | 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: 45 | 46 | * [1 Developer](https://gum.co/react-with-firebase-starter-pack-developer) 47 | * [Team of up to 8 Developers](https://gum.co/react-with-firebase-starter-pack-team) 48 | * [Unlimited Developers of an Organization](https://gum.co/react-with-firebase-starter-pack-organization) 49 | 50 | It grants you also access to the other starter projects in this GitHub organization. 51 | 52 | ### Open source license 53 | 54 | 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. 55 | 56 | ## Contributors 57 | 58 | * [John Muteti (iamuteti)](https://github.com/iamuteti) 59 | 60 | ## Installation 61 | 62 | * `git clone git@github.com:the-road-to-react-with-firebase/react-semantic-ui-firebase-authentication.git` 63 | * `cd react-semantic-ui-firebase-authentication` 64 | * `npm install` 65 | * `npm start` 66 | * visit http://localhost:3000 67 | 68 | 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/). 69 | 70 | ### Firebase Configuration 71 | 72 | * copy/paste your configuration from your Firebase project's dashboard into one of these files 73 | * *src/components/Firebase/firebase.js* file 74 | * *.env* file 75 | * *.env.development* and *.env.production* files 76 | 77 | The *.env* or *.env.development* and *.env.production* files could look like the following then: 78 | 79 | ``` 80 | REACT_APP_API_KEY=AIzaSyBtxZ3phPeXcsZsRTySIXa7n33NtQ 81 | REACT_APP_AUTH_DOMAIN=react-firebase-s2233d64f8.firebaseapp.com 82 | REACT_APP_DATABASE_URL=https://react-firebase-s2233d64f8.firebaseio.com 83 | REACT_APP_PROJECT_ID=react-firebase-s2233d64f8 84 | REACT_APP_STORAGE_BUCKET=react-firebase-s2233d64f8.appspot.com 85 | REACT_APP_MESSAGING_SENDER_ID=701928454501 86 | ``` 87 | 88 | ### Activate Sign-In Methods 89 | 90 |  91 | 92 | * Email/Password 93 | * [Google](https://www.robinwieruch.de/react-firebase-social-login/) 94 | * [Facebook](https://www.robinwieruch.de/firebase-facebook-login/) 95 | * [Twitter](https://www.robinwieruch.de/firebase-twitter-login/) 96 | * [Troubleshoot](https://www.robinwieruch.de/react-firebase-social-login/) 97 | 98 | ### Activate Verification E-Mail 99 | 100 | * add a redirect URL for redirecting a user after an email verification into one of these files 101 | * *src/components/Firebase/firebase.js* file 102 | * *.env* file 103 | * *.env.development* and *.env.production* files 104 | 105 | The *.env* or *.env.development* and *.env.production* files could look like the following then (excl. the Firebase configuration). 106 | 107 | **Development:** 108 | 109 | ``` 110 | REACT_APP_CONFIRMATION_EMAIL_REDIRECT=http://localhost:3000 111 | ``` 112 | 113 | **Production:** 114 | 115 | ``` 116 | REACT_APP_CONFIRMATION_EMAIL_REDIRECT=https://mydomain.com 117 | ``` 118 | 119 | ### Security Rules 120 | 121 | ``` 122 | { 123 | "rules": { 124 | ".read": false, 125 | ".write": false, 126 | "users": { 127 | "$uid": { 128 | ".read": "$uid === auth.uid || root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])", 129 | ".write": "$uid === auth.uid || root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])" 130 | }, 131 | ".read": "root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])", 132 | ".write": "root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])" 133 | }, 134 | "messages": { 135 | ".indexOn": ["createdAt"], 136 | "$uid": { 137 | ".write": "data.exists() ? data.child('userId').val() === auth.uid : newData.child('userId').val() === auth.uid" 138 | }, 139 | ".read": "auth != null", 140 | ".write": "auth != null", 141 | }, 142 | } 143 | } 144 | ``` 145 | -------------------------------------------------------------------------------- /src/components/SignIn/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { withRouter } from 'react-router-dom'; 3 | import { compose } from 'recompose'; 4 | 5 | import { SignUpLink } from '../SignUp'; 6 | import { PasswordForgetLink } from '../PasswordForget'; 7 | import { withFirebase } from '../Firebase'; 8 | import * as ROUTES from '../../constants/routes'; 9 | 10 | import { 11 | Grid, 12 | Form, 13 | Button, 14 | Header, 15 | Icon, 16 | Message, 17 | Divider, 18 | } from 'semantic-ui-react'; 19 | 20 | const SignInPage = () => ( 21 |{error.message}
88 |{error.message}
134 |