- Download this template.
- Unzip and rename the template directory (
unzip ~/Downloads/react-auth-template-master.zip
). - Move into the new project and
git init
. - Empty
README.md
and fill with your own content. - Replace name in
package.json
with your projects name. - Replace the
"homepage"
field inpackage.json
with your (public) Github account name and repository name. - Install dependencies with
npm install
. git add
andgit commit
your changes.- Run the development server with
npm start
.
Before deploying, you first need to make sure the homepage
key in your
package.json
is pointing to the correct value. It should be the url of your
deployed application.
To deploy you should first make sure you are on the master
branch with a
clean working directory, then you can run npm run deploy
and wait to see if
it runs successfully.
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
src/auth/components
. The auth
directory has two non-component files, api
and 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 api
and messages
files, as well as a
components
directory.
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 App
.
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 component=
and render=
attributes, but like <Route />
it will not forward props to the component if you use component=
.
The App
component has a rudimentary version of flash messages. To use it,
pass 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
of 'flash-success'
, 'flash-warning'
, and '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 App.scss
.
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 understand how to do this, look at the definition of flash
in
App.js
, the signUp
method in auth/components/SignUp.js
, and the
auth/messages.js
file.
To change the duration of the message, replace 2000
with a value of your
choice (in milliseconds) in the flash
method definition in App.js
.
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.
Developers should run these often!
npm run nag
: runs code quality analysis tools on your code and complains.npm run make-standard
: reformats all your code in the JavaScript Standard Style.npm run start
: generates bundles, watches, and livereloads.npm run build
: place bundled styles and scripts whereindex.html
can find themnpm run deploy
: builds and deploys master branch
- 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 legal@ga.co.