javascript - need oauth 2 client implementation for react router -

we have created our own oauth 2 server authorization code implementation below code base. https://github.com/frankhassanabad/oauth2orizerecipes

but trying integrate oauth2 client authentication in web application includes react router , flux implementation.

we looked many git repositories not getting proper way this.

is there implementation points how can achieved?

thanks again.

update

we looking below repositories, still not clear on how make things work. merge auth , oauth logic , things make server/client side.

https://github.com/rackt/react-router/tree/master/examples/auth-flow

https://github.com/andreareginato/simple-oauth2

https://github.com/learnboost/superagent-oauth

https://github.com/zalando/superagent-oauth2-client

i'll attempt explain high level take authentication react-router. need implementation on both server , client , there few decisions need make yourself. example using redux flux library.

first need mechanism protect routes, higher order component so:

// 'components/requireauthentication'  import react, { component, proptypes } 'react' import { connect } 'react-redux' import signin './signin'  export default (childcomponent) => {   class authenticatedcomponent extends component {     static proptypes = {       hasauthtoken: proptypes.bool.isrequired     };      render () {       const { hasauthtoken } = this.props       return (hasauthtoken         ? <childcomponent {...this.props} />         : <signin />       )     }   }    const mapstatetoprops = ({session}) => (session)    return connect(mapstatetoprops)(authenticatedcomponent) } 

the code here quite simple, exports function expects react component argument. childcomponent component want protect.

the hasauthtoken prop control here, if true childcomponent rendered, otherwise render signin. note, process of rendering signin fine if don't care seo may want redirect user sign-in route if care search engines indexing protected routes.

finally authenticatedcomponent connected redux store session state switched out use other flux library of choosing. put, subscribing changes on session. if hasauthtoken changes in value, component re-rendered if presently mounted.

now routes:

import { route } 'react-router' import container './components/container' import private './components/private' import requireauthentication './components/requireauthentication'  export default (   <route path='/' component={container}>     <route path='private' component={requireauthentication(private)}>       <route path='other' component={...} />     </route>   </route> ) 

here applying requireauthentication method (the default exported method code above) component want protect. keep pages being shown unless redux store session.hasauthtoken property true , instead show signin component.

other routes nested under protected component protected because of way react-router composes routes.

at high level signin component should page normal <a href> (i.e. not react-router link) begin oauth2 handshake. simple-oauth2 module has nice examples on how implement oauth2 server-side won't here. if you're following examples, it's app.get('/auth', function (req, res) {}) endpoint want link user to.

in callback endpoint want persist token somehow (e.g. session (express-session out here) or database), redirect user react app.

now you'll need session server-side redux store in preparation hydrated on client. redux docs explains how on server rendering page, inject initial component html , state , the client side sections. @ minimum you'll need object this:

{   hasauthtoken: (typeof req.session.token !== 'undefined') } 

of course actual implementation depend entirely on how store token , provide server-side request.

hopefully started. same process can used other kinds of authentication replacing oauth2 link username , password form server handles xhr.

best of luck.