/react-user-authentication

Primary LanguageJavaScript

React User Authentication

đź”´ This repository has now been archived!

Build status Build Status code style: prettier jest

This is a side project to create a user authentication application with React. We will rebuild a project developed by Ryan Chenkie for a course on JWT on Frontend Masters. This frontend application will rely on an API built by following that same course, which can be found in this repository.

About this project

To build the application I followed the wonderful course taught by Brian Holt at Frontend Masters as a complete introduction to React and its ecosystem. You can find his course notes here.

Following that track, this app has been built starting from the simplest React application possible. Its first working version (check the commit after the initial one) only uses two script tags to load the React and the ReactDOM libraries (their development versions) from a CDN.

All the tools have been configured manually, instead of using a black box like create-react-app.

Getting Started

To run this application, you need to have Node.js installed. If you don't have it, please go to the Node.js website, download and install it.

Then you can install this application, by (forking and) downloading it and then running the command npm install from your terminal.

Run the app by using the script command npm run start:dev from the command line and open your browser at localhost:8080 to see it live. Watch Webpack live update your output without you having to reload your browser window, while in development, after we added the Hot Module Replacement feature (and its plugins built for React).

Built With

  • React - A JavaScript library for building user interfaces
  • Reach Router - Next generation routing for React
  • Bootstrap 4 - Frontend component library
  • reactstrap - Easy to use React Bootstrap 4 components
  • Jest - Delightful JavaScript Testing
  • Webpack - A static module bundler for modern JavaScript applications

Author

Notes

This application has been built based on these repositories: React User Authentication, Complete Intro to React v4 and Testing Workshop. The full courses based on these repositories can be found on Frontend Masters.

Styling

This application uses Bootstrap 4 as a library for custom components. Consider switching or using Material-UI to build React components that implement Google's Material Design.

Notes on ESLint rules

The ESLint configuration rules used in this project are the ones suggested by Brian Holt in his workshop notes: ESLint and React configuration.

Notes on Webpack (with focus on HMR and routing issues)

With the addition of a configuration file for Webpack, there's no need to specify manually an entry point or an output on the command line, as we already did that in that configuration file.

Live reloading and relative paths

This project uses Webpack development server, that conveniently provides live reloading. It serves its assets from the configured public path property, so a minor refactoring has been done in commit 2b8c7a9653. That little modification in index.html let us load the main.js file from that folder, instead of doing it from the home page. Errors in this configuration may lead to several issues (see Webpack and HMR issues to read more).
The bundled file referenced inside the home page now has a relative path that points to the folder where the development server accesses the webpack assets.

Protecting resources (with scope)

Part of this small project, built to learn how to deal with authentication, consists on working on protecting routes. Assigning priviledges to certain users would require a management service, that is beyond the scope of this small project. So I've created an 'augmented' signup method that you can use to play with the application with admin credentials. As a user with 'admin' credentials, you can add instructors to the database. If you want to register a user with admin credentials, just uncomment the 'signupAdmin' method in the 'login' component and comment the 'signup' method (and viceversa to create a normal user).

Continuous Integration

This application uses two services for Continuous Integration:

License

This project is intended for learning purposes only. Much of it will reproduce code found in the repositories listed in Notes, so if you intend to use it, please refer to their original licenses and give appropriate credit to the respective authors.

Acknowledgments