@fireactjs/core
v1.1.2
Published
fireactjs-core is the core package for building web applications with Firebase and Reactjs in a simple and fast approach. Its key features include:
Downloads
101
Maintainers
Readme
What is @fireactjs/core?
fireactjs-core is the core package for building web applications with Firebase and Reactjs in a simple and fast approach. Its key features include:
- Built-in Firebase authentication features for users to sign up and sign in
- Built-in user profile features for users to change email, and password and delete user accounts
- Template base design for easy customization
- Component base architecture that supports full customization
- Easy to extend additional features
Live demo
To experience the package, go to https://demo.fireactjs.com
Documentation
For documentation of the package, go to https://fireactjs.com/docs/core-package/
Installation
To install the fireactjs-core components, create your Reactjs project first, and then run npm I @fireactjs/core
to install the components.
npx create-react-app my-app
cd my-app
npm i @fireactjs/core react-router-dom firebase @mui/material @mui/icons-material @emotion/react @emotion/styled
For details on how to create a Reactjs application, please see https://reactjs.org/docs/create-a-new-react-app.html
Setup your Firebase project
As @fireactjs/core is built on Firebase and Reactjs, you will need to have a Firebase project. Go to the Firebase website and create a project.
Create a web app
In your Firebase Project settings → General, click the “Add app” button to create a new web app. You will the instructions on install the firebase npm package and a JSON configuration named firebaseConfig
which you will need to configure your @fireactjs application.
Create a file called firebaseConfig.json
in the /src
folder and copy the firebaseConfig
JSON to the file similar to the format below.
{
"apiKey": "...",
"authDomain": "...",
"projectId": "...",
"storageBucket": "...",
"messagingSenderId": "...",
"appId": "..."
}
Enable authentication methods
After you create your Firebase project, go to the project console and enable the authentication methods you plan to use for your web application. @fireactjs/core supports the following authentication methods:
- Email and password
- Microsoft
- Github
- Apple
Some of the authentication methods require you to register your web application in the authentication platforms (e.g. Facebook). Please make sure you complete the necessary steps to enable the authentication methods.
Create a file called authMethods.json
in the /src
folder and copy the following JSON to the file, then set the authentication methods that you enabled to true
otherwise to false
.
{
"google": true,
"facebook": true,
"microsoft": true,
"apple": true,
"twitter": true,
"github": true
}
Initialize your Firebase project
Run firebase login
to sign in to your Firebase account and then run firebase init
to initialize your Firebase project locally.
Update Firestore rules
Update your firebase.rules
with the code below.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if false;
}
match /users/{userId} {
allow read, update, create: if request.auth.uid == userId;
}
}
}
Modify App.js
Replace the code in your src/App.js
with the code below. You can copy the code from https://github.com/fireactjs/core-demo/blob/main/src/App.js
import './App.css';
import firebaseConfig from "./firebaseConfig.json";
import { pathnames, ActionPages, AppTemplate, AuthProvider, AuthRoutes, FireactProvider, MainMenu, PublicTemplate, ResetPassword, SignIn, SignUp, UserMenu, UserProfile, UserUpdateEmail, UserUpdateName, UserUpdatePassword, UserDelete } from '@fireactjs/core';
import { BrowserRouter, Routes } from "react-router-dom";
import { Route } from "react-router-dom";
import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment';
import { CircularProgress, Box } from '@mui/material';
import authMethods from "./authMethods.json";
const Logo = ({size, color}) => {
const logoColor = color || 'warning';
return (
<LocalFireDepartmentIcon color={logoColor} fontSize={size} />
);
}
const Loader = ({size}) => {
let cpSize = "35px";
switch(size){
case "small":
cpSize = "30px";
break;
case "medium":
cpSize = "35px";
break;
case "large":
cpSize = "45px";
break;
default:
cpSize = "35px";
break;
}
return (
<Box sx={{ display: 'flex', justifyContent: "center", alignItems: "center"}}>
<CircularProgress color="warning" size={cpSize} />
<div style={{position: "absolute" }}>
<Logo size={size} />
</div>
</Box>
);
}
function App() {
const config = {
firebaseConfig: firebaseConfig,
brand: "FIREACTJS",
pathnames: pathnames,
authProviders: authMethods
}
return (
<FireactProvider config={config}>
<AuthProvider>
<BrowserRouter>
<Routes>
<Route element={<AuthRoutes loader={<Loader size="large" />} />} >
<Route element={<AppTemplate logo={<Logo size="large" />} toolBarMenu={<UserMenu />} drawerMenu={<MainMenu />} />}>
<Route exact path="/" element={<></>} />
<Route exact path={pathnames.UserProfile} element={<UserProfile />} />
<Route exact path={pathnames.UserUpdateEmail} element={<UserUpdateEmail />} />
<Route exact path={pathnames.UserUpdateName} element={<UserUpdateName />} />
<Route exact path={pathnames.UserUpdatePassword} element={<UserUpdatePassword />} />
<Route exact path={pathnames.UserDelete} element={<UserDelete />} />
</Route>
</Route>
<Route element={<PublicTemplate />}>
<Route path={pathnames.SignIn} element={
<SignIn
logo={<Logo size="large" />}
/>
} />
<Route path={pathnames.SignUp} element={
<SignUp
logo={<Logo size="large" />}
/>
} />
<Route path={pathnames.ResetPassword} element={
<ResetPassword
logo={<Logo size="large" />}
/>
} />
<Route path={pathnames.ActionPages} element={
<ActionPages
logo={<Logo size="large" />}
/>
} />
</Route>
</Routes>
</BrowserRouter>
</AuthProvider>
</FireactProvider>
)
}
export default App;
Replace Brand
and Logo
to customise the logo and the brand of your web application.
For further customisation, please read the documentation.
Update Firebase template action URL (Optional)
Go to your Firebase project authentication → Templates, then click on the Edit Template button, and then click on “Customize action URL”. Use https://www.yourdomain.com/auth-action
as the custom action URL and replace www.yourdomain.com
with your actual application domain.
Run your app locally
By now, your app is ready for the first run locally. Use the command npm start
to start the app.
Deploy to Firebase
After testing locally, your app is ready to be deployed to Firebase hosting.
Build
Run npm run build
to build your app
Deploy
Run firebase init
to initialize your project with Firebase and then run firebase deploy
to deploy your app to Firebase. If you see a blank screen in your production URL, make sure you set the build
as the folder in your Firebase settings.