Project: React and Auth0
Project Summary
This is an entertainment website, where users are presented with a certain number of images from different categories, and they have to guess the title for those images in a limited amount of time.
This project is created with Create-React-App, and a third party authentication provider (Auth0) has been used for user login.
Everybody can create free accounts or log in using their Google accounts. Each logged in user has one of 2 roles: user or admin. All users can view their profile information, but only administrators can see the API server settings.
The API is created with PHP/MySQL and has the required Auth0 code implemented as well.
Code on GitHub DemoTechnologies Used
Frontend
React, HTML, Bootstrap
Auth0 Authentication Service
Backend
PHP, MySQL
Details
Authentication
- Everybody can view the Home page, where all the available categories are displayed.
- When users decide to start the quiz, they will be redirected to the Auth0 website's login page. Upon logging in, the auth0 website will redirect the user back to the Quiz application with an authentication token in the URL.
- The app will then save this token and send it together with the future API requests.
- Furthermore, once the user has logged in, the log in session will stay alive between tabs or after closing and opening a tab.
- For the purpose of this demo, any user with a Gmail account is considered to be an administrator.
React Hooks and Router
- Custom hooks are used wherever possible to separate concerns and to make the code more readable.
- The code has been refactored using useReducer, useCallback, useMemo and useContext. Custom hooks for fetching API calls (useAxios) and the game timer (useInterval) have been implemented from online resources, for optimum performance.
- React Router is used for routing, and requests to non-existent pages will be redirected to a custom 404 page. Moreover, when users request to view a private page, their Authentication token will be checked before proceeding, and they will be redirected to the login page if needed.
Fetching Data From API
- The custom hook used for the API calls, uses a reducer to track the progress of the request Then it will return the status (Loading, Success, Fail).
- A "Loading" message will be displayed while the API request is in process, and in case of any API problems, an error message will be shown to the user.
- If an access token is provided by the app, it will be added to the header of the API request.
- The API has been created using PHP/MySQL and the code can be found as a separate project on Github. Click to view the API's readme file.