- Download this template.
- Unzip and rename the template directory (
- Move into the new project and
README.mdand fill with your own content.
package.jsonwith your projects name.
- Replace the
package.jsonwith your (public) Github account name and repository name.
- Install dependencies with
git commityour changes.
- Run the development server with
This template is derived from GA Boston's react-template. Most of the development dependencies, such as linters, SCSS compiler, Webpack config, NPM scripts, etc in this repo come from there.
It includes all the components and routes needed to sign up, sign in, change passwords, and sign out of an API built with either template linked above, with no need for modification.
NOTE: You should customize the included components to suit you app! They're provided as a guide and a bare minimum of functionality and style. Consider changing the provided SCSS styles, modifying the auth code, improving the flash messages, etc.
Currently, the top-level
App component stores the currently authenticated
user in state, as well as data related to the flash messages.
App renders the
Header component, and a list of routes, each of which render a component from
auth directory has two non-component files,
messages, which contain all the needed
fetch calls, and messages to
display when API calls succeed or fail, respectively.
We recommend following this pattern in your app. For instance, if you are making
an app that keeps track of books, you might want a
books directory next to
auth, which contains its own
messages files, as well as a
This template contains a handy component for creating routes that require a
user to be authenticated before visiting. This component lives in
src/auth/components/AuthenticatedRoute.js and is already required in
It's a thin wrapper around React Router's
<Route /> component. The only
difference is that it expects a prop called
user, and if that prop is falsy,
it will render a
<Redirect /> that takes the user to
/. If you want to use
it, you must pass it the currently authenticated as a prop!
It supports both the
render= attributes, but like
it will not forward props to the component if you use
App component has a rudimentary version of flash messages. To use it,
this.flash into a subcomponent of
App as a prop and call it from there.
It expects two arguments: a message to display, and a message type, which is one
'flash-error' which make the
message green, yellow, and red, respectively. You must pass one of these types.
You can add more types by adding more CSS rules in
In the auth components, flash messages are used in conjunction with the
auth/messages file to select from a list of predefined success/failure
messages. To undertand how to do this, look at the definition of
signUp method in
auth/components/SignUp.js, and the
To change the duration of the message, replace
2000 with a value of your
choice (in milliseconds) in the
flash method definition in
Just like in
this file will determine whether you're in a production or development
environment and choose an API URL accordingly. Don't forget to replace the
production URL with your deployed API's URL.
- All content is licensed under a CCBYNCSA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact firstname.lastname@example.org.