Navigation Menu

Skip to content

Commit

Permalink
v2.0 release
Browse files Browse the repository at this point in the history
  • Loading branch information
Yury Dymov committed Aug 7, 2016
1 parent dc9324c commit f5220ee
Show file tree
Hide file tree
Showing 48 changed files with 929 additions and 1,082 deletions.
2 changes: 1 addition & 1 deletion .babelrc
@@ -1,3 +1,3 @@
{
presets: ["es2015", "react", "stage-0"]
presets: ["es2015", "stage-0"]
}
47 changes: 0 additions & 47 deletions .eslintrc
@@ -1,10 +1,6 @@
{
"parser": "babel-eslint",

"plugins": [
"react"
],

"env": {
"browser": true,
"node": true,
Expand Down Expand Up @@ -202,49 +198,6 @@
"markers": ["=", "!"]
}],

// React
"react/jsx-boolean-value": 2,
"react/jsx-closing-bracket-location": 2,
"react/jsx-curly-spacing": [2, "never"],
"react/jsx-handler-names": 2,
"react/jsx-indent-props": [2, 2],
"react/jsx-indent": [2, 2],
"react/jsx-key": 2,
"react/jsx-max-props-per-line": [2, {maximum: 3}],
"react/jsx-no-bind": [2, {
"ignoreRefs": true,
"allowBind": true,
"allowArrowFunctions": true
}],
"react/jsx-no-duplicate-props": 2,
"react/jsx-no-undef": 2,
"react/jsx-pascal-case": 2,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
// "react/no-danger": 2,
"react/no-deprecated": 2,
"react/no-did-mount-set-state": 0,
"react/no-did-update-set-state": 2,
"react/no-direct-mutation-state": 2,
"react/no-is-mounted": 2,
"react/no-multi-comp": 2,
"react/no-string-refs": 2,
"react/no-unknown-property": 2,
"react/prefer-es6-class": 2,
"react/prop-types": 2,
"react/react-in-jsx-scope": 2,
"react/self-closing-comp": 2,
"react/sort-comp": [2, {
"order": [
"lifecycle",
"/^handle.+$/",
"/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/",
"everything-else",
"/^render.+$/",
"render"
]
}],
"react/wrap-multilines": 2,

// Legacy
"max-depth": [0, 4],
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -36,3 +36,4 @@ jspm_packages
# Optional REPL history
.node_repl_history
.idea
dist
2 changes: 1 addition & 1 deletion LICENSE
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2016 Yury Dymov
Copyright (c) 2016 Yuri Dymov

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
171 changes: 160 additions & 11 deletions README.md
@@ -1,15 +1,164 @@
# redux-oauth
Bearer token-based authentication library with omniauth support for redux applications

Based on [Redux-Auth](https://github.com/lynndylanhurley/redux-auth)
# Notes on migration from 1.x version
First version is based and fully compatible with [Redux-Auth](https://github.com/lynndylanhurley/redux-auth). Support is discontinued.

* Dropped e-mail support, only omniauth logic left
* Dropped multiple endpoint support
* Dropped TokenBridge logic as we are using redux initial state anyway
* Dropped all unused code
* Dropped all shortcuts found in the code
* Dropped default and material-ui themes, dropped all modals
Second version is more simple to configure and more stable. All React Components were also extracted to separate packages, therefore React is removed from dependencies.

* Implemented isomorphic fetch
* extend -> lodash.assign
* Code styling, es6
* Extracted ButtonLoader to separate package
# Features
* Implements Bearer token-based authentication for your application to talk to 3d party APIs
* Provides universal fetch method for any HTTP/HTTPS calls both client and server side
* Supports OAuth2
* Supports server-side rendering to make users and search engines happy. This means that page, which require several API requests, can be fully or partly rendered on the server first

# Configuration
### Universal / Isomorphic use-case
Configuration is required only on server-side. Client will fetch configuration and latest authentication data from redux initial state.

1. Add authStateReducer to your reducer as 'auth'
2. Dispatch initialize method with your configuration, cookies and current location before rendering step
3. Update cookies. In case javascript fails to load / initialize user session will be still valid

### Client-only use-case
1. Add authStateReducer to your reducer as 'auth'
2. Dispatch initialize method with your configuration and current location before rendering step

# Usage
Dispatch fetch action with any Url and [fetch API](https://github.com/github/fetch/) options. If it is an API request, than authentication headers are applied
prior the request and token value in redux store and browser cookies is updated right after. Otherwise, regular request is performed.

# Workflow
### Universal / Isomorphic use-case
1. Browser sends request to the web-application. Initial credentials are provided within cookies
2. Server performs validateToken API request to check the provided credentials and load user information
3. Server performs desired API requests and each times update authentication information in redux store if required
4. Server sends content to the client. Most recent authentication information is sent within native http 'setCookie' method to ensure session persistence.
5. Client loads and initialize javascript. Redux initial state is loaded from markup including redux-oauth configuration, latest authentication information and user data

### Client-only use-case
1. Client dispatch initialize action to setup configuration and initial authentication data
2. Client performs validateToken API request to check credentials and load user data

# Configuration Options
### cookies
Provide request cookies for initial authentication information. Optional

### currentLocation
Provide current url. MANDATORY to process OAuth callbacks properly.

### backend
apiUrl - MANDATORY, base url to your API

tokenValidationPath - path to validate token, default: `/auth/validate_token`

signOutPath - path to sign out from backend, default: `/auth/sign_out`

authProviderPaths - configuration for OAuth2 providers, default: {}

### cookieOptions
key - cookie key for storing authentication headers for persistence, default: 'authHeaders'

path - cookie path, default: '/'

expire - cookie expiration in days, default: 14

### tokenFormat
authentication data structure, which is going back and forth between backend and client

Access-Token - no default value

Token-Type - default value: 'Bearer',

Client - no default value

Expiry - no default value

Uid - no default value

Authorization - default value: '{{ Token-Type } { Access-Token }}'. This expression means that default value is computed using current 'Token-Type' and 'Access-Token' values.

Unlike 'backend' and 'cookieOptions' objects if you would like to override tokenFormat, you have to provide whole structure.

## Example
#### server.js with Express
```
import { initialize, authStateReducer } from "redux-auth";
// ...
const rootReducer = combineReducers({
auth: authStateReducer,
// ... add your own reducers here
});
app.use((req, res) => {
const store = createStore(rootReducer, {}, applyMiddleware(thunk));
store.dispatch(initialize({
backend: {
apiUrl: 'https://my-super-api.zone',
authProviderPaths: {
facebook: '/auth/facebook',
github: '/auth/github'
}
},
currentLocation: request.url,
cookies: request.cookies
}).then(() => {
// ... do your regular things like routing and rendering
// We need to update browser headers. User will still have valid session in case javascript fails
// 'authHeaders' is default cookieOptions.key value bere. If you redefined it, use your value instead
res.cookie('authHeaders', JSON.stringify(getHeaders(store.getState())), { maxAge: ... });
})
}
```

# Full example
### Universal / Isomorphic use-case
[Live demo](https://yury-dymov.github.io/redux-oauth-client-demo)
[Source code](https://github.com/yury-dymov/redux-oauth-demo)

### Client-side only
[Live demo](https://yury-dymov.github.io/redux-oauth-client-demo)
[Source code](https://github.com/yury-dymov/redux-oauth-client-demo)

### Backend
[Backend source code](https://github.com/yury-dymov/redux-oauth-backend-demo)

# Email-password authentication and other use-cases
I wanted to make library as light-weight as possible. Also many folks have very different use-cases so it is hard to satisfy everyone. Therefore it is considered that everyone can easily implement methods they need themselves.

#### Email-password authentication method example

```
import { fetch, authenticateStart, authenticateComplete, authenticateError, parseResponse } from 'redux-oauth';
function signIn(email, password) {
return dispatch => {
dispatch(authenticateStart());
return dispatch(fetch(yourCustomAuthMethod(email, password)))
.then(parseResponse)
.then(user => {
dispatch(authenticateComplete(user));
// it is recommended to return resolve or reject for server side rendering case.
// It helps to know then all requests are finished and rendering can be performed
return Promise.resolve(user);
}
.catch(error => {
if (error.errors) {
dispatch(authenticateError(error.errors));
}
return Promise.reject(error.errors || error);
};
};
}
```

# License
MIT (c) Yuri Dymov
1 change: 0 additions & 1 deletion dist/bundle.js

This file was deleted.

54 changes: 7 additions & 47 deletions package.json
@@ -1,23 +1,24 @@
{
"name": "redux-oauth",
"description": "Oauth token authentication system for react + redux.",
"version": "1.0.2",
"description": "Oauth token authentication system for redux.",
"version": "2.0.0",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/yury-dymov/redux-oauth.git"
},
"homepage": "https://github.com/yury-dymov/redux-oauth",
"keywords": [
"react",
"redux",
"isomorphic",
"universal",
"oauth",
"authentification"
],
"main": "dist/bundle.js",
"scripts": {
"release": "webpack --verbose --colors --display-error-details --config webpack.release.js -p"
"release": "node node_modules/webpack/bin/webpack --verbose --colors --display-error-details -p",
"lint": "node node_modules/eslint/bin/eslint src"
},
"files": [
"src",
Expand All @@ -26,14 +27,11 @@
"README.md"
],
"dependencies": {
"cookie": "^0.3.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.1.2",
"lodash": "^4.1.3",
"query-string": "^4.2.2",
"react-bootstrap-button-loader": "^1.0.0",
"react-router-redux": "^4.0.5",
"redux-immutablejs": "^0.0.8"
},
"devDependencies": {
Expand All @@ -42,57 +40,19 @@
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.9.0",
"bootstrap": "^3.3.6",
"bootstrap-sass": "^3.3.6",
"bootstrap-webpack": "^0.0.5",
"chai": "^3.5.0",
"chai-as-promised": "^5.3.0",
"concurrently": "^2.1.0",
"css-loader": "^0.23.1",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "0.8.5",
"imports-loader": "^0.6.5",
"invariant": "^2.2.1",
"jsdom": "^9.2.1",
"jsdomify": "^2.1.0",
"eslint": "^3.2.2",
"eslint-plugin-import": "^1.12.0",
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"lodash": "^4.1.3",
"node-sass": "^3.8.0",
"react": "^15.0.1",
"react-addons-test-utils": "^15.0.1",
"react-bootstrap": "^0.29.5",
"react-dom": "^15.0.1",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.4.5",
"react-router": "^2.5.0",
"react-select": "^1.0.0-beta13",
"react-tap-event-plugin": "^1.0.0",
"react-transmit": "3.1.7",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",
"require-subvert": "^0.1.0",
"rewire": "^2.5.1",
"sass-loader": "^3.2.1",
"serialize-javascript": "^1.3.0",
"sinon": "^1.17.4",
"style-loader": "^0.13.1",
"thunk": "^0.0.1",
"url-loader": "^0.5.7",
"warning": "^3.0.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-node-externals": "^1.2.0"
},
"peerDependencies": {
"react": "*",
"react-bootstrap": "*",
"react-redux": "*",
"redux": "*"
},
"engines": {
Expand Down
26 changes: 13 additions & 13 deletions src/actions/authenticate.js
@@ -1,13 +1,13 @@
export const AUTHENTICATE_START = 'AUTHENTICATE_START';
export const AUTHENTICATE_COMPLETE = 'AUTHENTICATE_COMPLETE';
export const AUTHENTICATE_ERROR = 'AUTHENTICATE_ERROR';

export function authenticateStart() {
return { type: AUTHENTICATE_START };
}
export function authenticateComplete(user) {
return { type: AUTHENTICATE_COMPLETE, user };
}
export function authenticateError(errors) {
return { type: AUTHENTICATE_ERROR, errors };
}
export const AUTHENTICATE_START = 'AUTHENTICATE_START';
export const AUTHENTICATE_COMPLETE = 'AUTHENTICATE_COMPLETE';
export const AUTHENTICATE_ERROR = 'AUTHENTICATE_ERROR';

export function authenticateStart() {
return { type: AUTHENTICATE_START };
}
export function authenticateComplete(user) {
return { type: AUTHENTICATE_COMPLETE, user };
}
export function authenticateError(errors) {
return { type: AUTHENTICATE_ERROR, errors };
}

0 comments on commit f5220ee

Please sign in to comment.