react-auth-template

Installation

1. Download this template.
2. Unzip and rename the template directory (unzip ~/Downloads/react-auth-template-master.zip).
3. Move into the new project and git init.
4. Empty README.md and fill with your own content.
5. Replace name in package.json with your projects name.
6. Replace the "homepage" field in package.json with your (public) Github account name and repository name.
7. Install dependencies with npm install.
   • if it doesn't work run npm update then npm rebuild node-sass (this might take a while)
8. git add and git commit your changes.
9. Run the development server with npm start.

Deployment

1. npm install gh-pages
2. Update package.json with

"homepage": "http://<git-name>.github.io/<repo-name>"

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

3. Run npm run deploy
4. From then on they only have to run npm run deploy from master anytime they need to deploy again.

See react gh-pages docs for more details.

About

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.

Structure

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 axios 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.

Features

<AuthenticatedRoute />

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=.

src/apiConfig.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.

Tasks

Developers should run these often!

• npm run start: generates bundles, watches, and livereloads.
• npm run deploy: builds and deploys master branch

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.