Charts and Console(3)Auth and Login

Charts and Console(3)Auth and Login

ReactJS Auth and Login

Nginx Refresh 404 Issue
http://nphard.me/2016/03/07/nginx-for-react/

Add Rewrite in NGINX
location ~* html {
    rewrite .* /index.html break;
    root html;
}

Login on the Client Side

First of all, I use react-google-login feature and cookie
"react-google-login": "2.9.3",
"react-cookie": "2.1.0",

On the Router Code, I checked the cookie to see if we need to redirect to login page
import { isLogin } from '../action/AuthAction';
<Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/index.html" component={Home} />
    <Route exact path="/login.html" component={Home} />
    <Route path="/keywords.html" render={() =>(
        isLogin() ? ( <Route  component={KeywordListContainer} />)
                   : (<Route component={Home} />)
    )} />
    <Route exact path="/keyword.html" render={() =>(
        isLogin() ? ( <Route  component={AddOrEditKeywordContainer} />)
                   : (<Route component={Home} />)
    )} />
    <Route path="/keyword/:id" render={() =>(
        isLogin() ? ( <Route  component={AddOrEditKeywordContainer} />)
            : (<Route component={Home} />)
    )} />
    <Route path="/stores.html" render={() =>(
        isLogin() ? ( <Route  component={StoreListContainer} />)
            : (<Route component={Home} />)
    )} />
    <Route exact path="/store.html" render={() =>(
        isLogin() ? ( <Route  component={AddOrEditStoreContainer} />)
            : (<Route component={Home} />)
    )} />
    <Route path="/store/:id" render={() =>(
        isLogin() ? ( <Route  component={AddOrEditStoreContainer} />)
            : (<Route component={Home} />)
    )} />

    <Route path="/about" component={About} />
    <Route component={PageNotFound} />
</Switch>

In the AuthAction.js I just easily check the cookie
import Cookies from 'universal-cookie';
import { CookieDomain } from "../config";

const cookies = new Cookies();

let cookieConfig = {}
if(CookieDomain !== ''){
    cookieConfig = { domain: CookieDomain, maxAge: 3600 }
}

export function saveCookie(name, value){
    cookies.set(name, value, cookieConfig);
}

export function signOut(){
    cookies.remove('token', cookieConfig);
}

export function isLogin(){
    console.log("check if user already login");
    const token =  !!cookies.get('token');
    console.log("check if user already login, result = " + token);
    return token;
}

Place the Login Button on the Login Page
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import toastr from 'toastr';
import * as authAction from '../../action/AuthAction';
import GoogleLogin from 'react-google-login';

export class Home extends React.Component {

    constructor() {
        super();
        this.handleLoginSuccess = this.handleLoginSuccess.bind(this);
        this.handleLoginFail = this.handleLoginFail.bind(this);
    }

    componentDidMount() {

    }

    handleLoginSuccess = (response) => {
        const email = response.profileObj.email;
        const name = response.profileObj.name;
        const token = response.tokenObj.id_token;
        console.log("email from google is " + email);
        //console.log("token " + JSON.stringify(response.tokenObj));
        console.log("ID token " + response.tokenObj.id_token);
        authAction.saveCookie('token', token);
        toastr.success(name + " Login Success!");
        this.props.history.push("/keywords.html");
    }

    handleLoginFail = (response) => {
        toastr.error(response.error);
        this.props.history.push("/login.html");
    }

    render() {
        return (
            <div className="container-fluid">

                <div className="row mt-3">
                    <div className="col">
                        <h1>Login Page</h1>
                    </div>
                </div>

                <div className="row mt-3">
                    <div className="col">
                        <div className="btn-group" role="group">
                            <GoogleLogin
                                clientId=“xxxxxxx.apps.googleusercontent.com"
                                buttonText="Google Login"
                                className="btn btn-primary"
                                onSuccess={this.handleLoginSuccess }
                                onFailure={this.handleLoginFail }
                            />
                        </div>
                    </div>
                </div>

            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return {};
};

const mapDispatchToProps = dispatch => ({
    action: bindActionCreators({ ...authAction }, dispatch)
});

Home.propTypes = {
    action: PropTypes.object.isRequired,
    history: PropTypes.object
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);


References:
https://auth0.com/blog/reactjs-authentication-tutorial/
http://nphard.me/2016/03/07/nginx-for-react/
proxy
https://github.com/moonbingbing/openresty-best-practices/blob/master/ngx/reverse_proxy.md
http://sillycat.iteye.com/blog/2074417