DEMO: https://fir-react-auth-35f83.firebaseapp.com/
When starting a new project it can be incredibly time consuming to reach the milestone that will finally let you start implementing your ideas, and doing actual work.
The goal of this project is to be just that, a solid modern project template that you can easily pick up on and not worry too much about the boilerplate.
- Firebase Authentication
- Firebase Storage
- Firebase Firestore
- Ant Design
- Redux
- Dockerfile
To install it with docker, you only need to run the following command:
docker-compose up -d --build
docker-compose -f docker-compose.prod.yaml up -d --build
# Install the node packages
npm install
# Start the App in Development Mode
npm startReplace the environment variables from .env and enable authentication with email and password.
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
database rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
This documentation will assume a fair knowledge of React as well as some of the tools that we are used, including:
- Ant Design as the UI webkit.
- React Hooks
- React Redux
The App.js component (App.js) is being used as the main router and it is here that the main routes are defined. If you want to define other routes in your sub-components, you should not use <Router> again.
ANTD is using Less as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
There are some major variables below, all less variables could be found in Default Variables.
Your custom changes should go in craco.config.js.
For all of the potential customizations don't hesitate to check their documentation which covers them all.
Layout Component (Layout.js)
In this template the layout component is to be used to display the main content of the webpage.
To add more links you can just add more Menu.Item under Menu and make sure that the Link to is the same as the Menu.Item key without the / at the end, otherwise it won't show as selected, you can look at how this was done for the existing ones.
Tip: make sure that the
Menu.Itemis not nested in any other component and that it goes right underMenu.
The session is managed by the Redux store.
When the page is loaded, an action actions.autoLogIn() is dispatched, from App.js, to the store actions which just checks for the existence of a token in localStorage and if there is no token in localStorage it logs the user out, otherwise it checks the token's validity and dispatches some other actions check autoLogIn() to see the code.
When the user is not logged in the store looks the following:
When the user is logged in the store looks the following:
Note: To visualize the above you need to get the Redux DevTools Extension.
- user
- loading - is a boolean that can used, for example, in the conditional rendering of elements, this is used in Login and My Profile.
- error - is a boolen, that can be used, for example, to set a given element to show that it errored out, such as an icon.
- email - note that email is moved inside profile once the user has logged in.
By default when a user is registered a document is created with his uid. You can add as many custom attributes as you wish. user.js
try {
firestore.collection("userProfile").doc(data.docId).set(
{
// CUSTOM PROFILE
bio: data.bio,
},
{ merge: true }
);
} catch {}My Profile (MyProfile/index.js)
More options will be added in the future, these existing ones are just a proof of concept or example.
Notifications (notificationHelpers.js)
The current notification system is based on the Ant Design notifications and it is implemented as a callback for actions that are dispatched to the store, this callback is optional but it is currently the way to run a notification when the axios request returns its promise.
A good example of how to use these notifications can be seen in Basic.js.
import { runNotifications } from "../helpers/Notification";
// ...
// Inside the component:
const onFinishModals = (values) => {
props.forgottenPassword(values.forgottenEmail, runNotifications);
};
// ...
const mapDispatchToProps = (dispatch) => {
return {
// map the callback just like a regular argument, in whatever action you want to dispatch
signInUser: (email, password, callback) =>
dispatch(actions.signInUser(email, password, callback)),
};
};
// ...// ...
// when you define your action make sure to define an empty anonymous function as the
// default function in case you don't want to call notifications on the given action
export const forgottenPassword = (email, notificationCallback) => (
dispatch
) => {
auth
.sendPasswordResetEmail(email)
.then((res) => {
notificationCallback(
`Thanks! Please check ${email} for a link to reset your password.`,
"SUCCESS"
);
})
.catch((error) => {
notificationCallback(error.message, "ERROR");
});
};
// ...