This application illustrates how to authenticate using various service providers, such as Google, Facebook or Twitter.
The application is available at the following address:
https://authexample-b84c8.firebaseapp.com/
All the machinery related to Redux + Saga is under src/redux and its operation is quite simple:
- execute an action:
dispatch(myAction)(src/redux/actions.js) - which is optionally captured by a "saga" (src/redux/sagas.js)
- which in turn calls a "provider" (src/redux/provider.js)
- whose response is processed by a "reducer" (src/redux/reducer.js)
And finally each component is updated according to the "state tree".
src
/components/ --> Common components
/redux/ --> Redux + Saga
/translations/ --> Translations
/views
/snippets/ --> Header, Footer, etc...
/** --> Views (Layouts)
/Router.js --> Router (main application)
config-sample.js --> Template config file (copy to config.js)
- @material-ui: A list of visual components.
- firebase: A Firebase API.
- @react-firebase/auth: An authentication library.
- react-firebaseui: A federated authentication library.
- axios: An HTTP client.
- react-intl: Internationalization library.
- react-router-dom: Router (Single Page Application).
- styled-components: A library to apply CSS styles to the components.
- react-redux: React-Redux
- redux-saga: Redux-Saga
The application was translated to English and Spanish (see /src/translations). You can easily change the default language from the config.js file:
export const language = "en";
