This is meant to be a boilerplate app to clone for future auth purposes.
The Firebase project used for bootstrapping this is myuniversalserver
*usesyarn
for dependency management and for scripts
-
The project uses
contexts
to pass data. For example, the firebase class is passed to relevant components using contexts. BothContext.Consumer
and theuseContext
APIs have been used. -
the firebase wrapper class
firebaseAPI
has anauth
property which is effectively a singleton object available through the withFirebaseHOC which injects an instance of the firebase wrapper class into the application, at the<App />
level via aAuthUserContext.Provider
. This can be consumed using
const authUserContext = useContext(AuthUserContext);
from any child of the top level <App />
component. See example of it being consumed in Protected
-
this firebase object that gets passed through application context API is where the
onAuthStateChanged
listener attaches. The listener attaches in more than one place in the app, but in all cases it attaches to the one singleton object. -
each folder is designed to be a module - each folder has an
index.js
file that serves as an entry point to the module by exporting key objects from it. -
the Main HOCs are
withFirebase
andProtected
.withFirebase
only injects thefirebaseAPI
wrapper class for use to interact with firebase services.Protected
includes that plus theAuthUser
object and is used to wrap components that are accessed through protected routes.
https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial