Semantic UI React starter project with Firebase Auth

Use this template or check out the Demo

This is a basic web app with boilerplate to get you started with Firebase user authentication with fresh Semantic UI React components.

• built using React
• bootstrapped with Create React App
• styled with Semantic UI React

You'll get

• a responsive navbar that collapses on mobile as well as a footer
• a react-router with public and protected routes and 404 error page
• lazy loading of componenents once needed with a suspense progress bar and error boundry
• arrow function components (ES6 syntax)
• localization / translation with i18next
• provider for current user object as context to all pages

as well as basic Firebase features for user authentication like

• Create account
• Login
• Login with Google
• Log out
• Account page
• Change username, email, password
• Verify email
• Reset password
• Avatar upload
• Delete account

Usage

Feel free to fork this repo and built your project based on it.

If you improve this starter template in any way a pull request would be very much appreciated! ✌️

Start by setting up a project with the Firebase dashboard and adding your credentials to the .env file. Authentication features should work out of the box. Make sure not to publish your credentials (obviously).

## Firebase
REACT_APP_FIREBASE_KEY="AbCDefgHIJklmNOpQrsTUvWxYZ"
REACT_APP_FIREBASE_DOMAIN="project-abCDe.firebaseapp.com"
REACT_APP_FIREBASE_DATABASE="https://project-abCDe.firebaseio.com/"
REACT_APP_FIREBASE_PROJECT_ID="project-abCDe"
REACT_APP_FIREBASE_STORAGE_BUCKET="project-abCDe.appspot.com"
REACT_APP_FIREBASE_SENDER_ID="123456789"
REACT_APP_FIREBASE_APP_ID="1:123456789:web:123456789"

Available Scripts

In the project directory, you can run:

npm install

to install the dependencies.

npm start

to run the app in the development mode at http://localhost:3000

The page will reload if you make edits.
You will also see any lint errors in the console.

npm build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!